Skip to main content
Coding Theme

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBorder#19f9d8
  • activityBar.background#222223
  • activityBar.border#222223
  • activityBar.dropBorder#19f9d8
  • activityBar.foreground#E6E6E6
  • activityBarBadge.background#45A9F9
  • activityBarBadge.foreground#242526
  • badge.background#6FC1FF
  • badge.foreground#242526
  • breadcrumb.focusForeground#19f9d8
  • button.background#45A9F9
  • button.foreground#FFFFFF
  • button.hoverBackground#B084EB
  • checkbox.border#B084EB
  • contrastBorder#222223
  • diffEditor.insertedTextBackground#19f9d840
  • diffEditor.removedTextBackground#FF4B8266
  • editor.background#292A2B
  • editor.findMatchBackground#B084EB60
  • editor.findMatchHighlightBackground#FFB86C40
  • editor.foreground#E6E6E6
  • editor.hoverHighlightBackground#45A9F940
  • editor.inactiveSelectionBackground#FFB86C40
  • editor.lineHighlightBackground#373B41
  • editor.selectionBackground#FFB86C40
  • editor.selectionHighlightBackground#FFB86C40
  • editor.wordHighlightBackground#FFCC9560
  • editor.wordHighlightStrongBackground#FF9AC170
  • editorBracketHighlight.foreground1#FFB86C
  • editorBracketHighlight.foreground2#6FC1FF
  • editorBracketHighlight.foreground3#FF9AC1
  • editorBracketMatch.background#19f9d840
  • editorBracketMatch.border#19f9d8
  • editorBracketPairGuide.activeBackground1#FFB86C
  • editorBracketPairGuide.activeBackground2#6FC1FF
  • editorBracketPairGuide.activeBackground3#FF9AC1
  • editorBracketPairGuide.background1#FFB86C60
  • editorBracketPairGuide.background2#6FC1FF40
  • editorBracketPairGuide.background3#FF9AC170
  • editorCodeLens.foreground#FFB86C40
  • editorCursor.foreground#FF4B82
  • editorError.border#292A2B
  • editorError.foreground#FF4B82
  • editorGroup.border#222223
  • editorGutter.addedBackground#6FE7D2
  • editorGutter.deletedBackground#FF4B82
  • editorGutter.modifiedBackground#FF9AC1
  • editorHint.border#292A2B
  • editorHint.foreground#6FE7D2
  • editorHoverWidget.background#292A2B
  • editorHoverWidget.border#373B41
  • editorHoverWidget.highlightForeground#19f9d8
  • editorInfo.border#292A2B
  • editorInfo.foreground#6FC1FF
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#CDCDCD99
  • editorOverviewRuler.addedForeground#6FE7D2
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#19f9d840
  • editorOverviewRuler.deletedForeground#FF4B82
  • editorOverviewRuler.errorForeground#FF4B82
  • editorOverviewRuler.findMatchForeground#FFB86C40
  • editorOverviewRuler.infoForeground#6FC1FF
  • editorOverviewRuler.modifiedForeground#FF9AC1
  • editorOverviewRuler.warningForeground#FFCC95
  • editorRuler.foreground#B084EB60
  • editorSuggestWidget.selectedBackground#19f9d840
  • editorSuggestWidget.selectedForeground#19f9d8
  • editorWarning.border#292A2B
  • editorWarning.foreground#FFCC95
  • editorWhitespace.foreground#3E4250
  • editorWidget.background#292A2B
  • editorWidget.border#373B41
  • errorForeground#FF4B82
  • errorLens.errorBackground#FF4B8220
  • errorLens.errorForeground#FF4B82
  • errorLens.hintBackground#6FE7D220
  • errorLens.hintForeground#6FE7D2
  • errorLens.infoBackground#6FC1FF20
  • errorLens.infoForeground#6FC1FF
  • errorLens.warningBackground#FFCC9520
  • errorLens.warningForeground#FFCC95
  • extensionButton.prominentBackground#45A9F9
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#676B79
  • focusBorder#19f9d899
  • foreground#E6E6E6
  • gitDecoration.addedResourceForeground#6FE7D2
  • gitDecoration.deletedResourceForeground#FF4B82
  • gitDecoration.ignoredResourceForeground#757575
  • gitDecoration.modifiedResourceForeground#FF9AC1
  • gitDecoration.untrackedResourceForeground#BCAAFE
  • inputValidation.errorBackground#FF4B8266
  • inputValidation.errorBorder#FF4B82
  • inputValidation.infoBackground#6FC1FF90
  • inputValidation.infoBorder#6FC1FF
  • inputValidation.warningBackground#FFCC9560
  • inputValidation.warningBorder#FFCC95
  • list.activeSelectionBackground#292A2B
  • list.activeSelectionForeground#19f9d8
  • list.errorForeground#FF4B82
  • list.focusBackground#292A2B
  • list.focusForeground#19f9d8
  • list.highlightForeground#6FC1FF
  • list.hoverBackground#292A2B
  • list.hoverForeground#19f9d8
  • list.inactiveSelectionBackground#292A2B
  • list.inactiveSelectionForeground#19f9d8
  • list.warningForeground#FFCC95
  • merge.currentContentBackground#B084EB40
  • merge.currentHeaderBackground#B084EB60
  • merge.incomingContentBackground#45A9F940
  • merge.incomingHeaderBackground#45A9F990
  • notificationsErrorIcon.foreground#FF4B82
  • notificationsInfoIcon.foreground#6FC1FF
  • notificationsWarningIcon.foreground#FFCC95
  • panel.background#242526
  • panel.border#222223
  • panelSection.border#222223
  • panelSectionHeader.border#222223
  • panelTitle.activeBorder#19f9d8
  • panelTitle.activeForeground#19f9d8
  • panelTitle.inactiveForeground#E6E6E6
  • peekView.border#19f9d8
  • peekViewEditor.background#292A2B
  • peekViewEditor.matchHighlightBackground#FFB86C60
  • peekViewResult.matchHighlightBackground#FFB86C40
  • peekViewResult.selectionBackground#19f9d840
  • problemsErrorIcon.foreground#FF4B82
  • problemsInfoIcon.foreground#6FC1FF
  • problemsWarningIcon.foreground#FFCC95
  • progressBar.background#B084EB
  • scrollbar.shadow#222223
  • scrollbarSlider.activeBackground#757575
  • scrollbarSlider.background#373B4199
  • scrollbarSlider.hoverBackground#757575
  • selection.background#FFB86C40
  • sideBar.background#242526
  • sideBar.border#222223
  • sideBar.foreground#BBBBBB
  • statusBar.background#222223
  • statusBar.debuggingBackground#B084EB
  • statusBar.debuggingForeground#E6E6E6
  • statusBar.foreground#E6E6E6
  • statusBar.noFolderBackground#242526
  • statusBar.noFolderForeground#E6E6E6
  • statusBarItem.errorBackground#FF4B8266
  • statusBarItem.errorForeground#FF4B82
  • tab.activeBackground#292A2B
  • tab.activeBorder#19f9d8
  • tab.activeForeground#19f9d8
  • tab.inactiveBackground#242526
  • tab.inactiveForeground#E6E6E6
  • terminal.ansiBlue#45A9F9
  • terminal.ansiBrightBlack#757575
  • terminal.ansiBrightBlue#6FC1FF
  • terminal.ansiBrightCyan#BCAAFE
  • terminal.ansiBrightGreen#19f9d8
  • terminal.ansiBrightMagenta#FF9AC1
  • terminal.ansiBrightRed#FF2C6D
  • terminal.ansiBrightWhite#E6E6E6
  • terminal.ansiBrightYellow#FFCC95
  • terminal.ansiCyan#B084EB
  • terminal.ansiGreen#19f9d8
  • terminal.ansiMagenta#FF75B5
  • terminal.ansiRed#FF2C6D
  • terminal.ansiWhite#CDCDCD
  • terminal.ansiYellow#FFB86C
  • terminalCursor.background#E6E6E6
  • terminalCursor.foreground#FF4B82
  • titleBar.activeBackground#242526
  • titleBar.activeForeground#E6E6E6
  • titleBar.inactiveBackground#242526
  • titleBar.inactiveForeground#E6E6E6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#676B79italic
comment.block#676B79italic
keyword#FF75B5
keyword.operator#E6E6E6
keyword.control, keyword.operator.new#FF75B5
storage, storage.type#FF75B5
storage.modifier#FF75B5
constant#FFB86C
constant.language#FF9AC1
constant.character.escape#FFCC95
variable#E6E6E6
variable.parameter#E6E6E6
variable.other.constant, variable.language.this, variable.language.self#FF9AC1
string#19f9d8
entity.name.function#45A9F9
entity.name.type#FFB86C
keyword.control.directive#6FC1FF
storage.type.built-in.primitive.cpp#FFCC95
storage.modifier.array.bracket.square.cpp#E6E6E6
entity.name.tag.yaml#E6E6E6
variable.key.table.toml#FFB86C
variable.key.array.table.toml#FFB86Citalic
variable.key.toml#E6E6E6
storage.type.built-in.primitive.c#FFCC95
storage.modifier.array.bracket.square.c#E6E6E6
support.type.property-name.json#E6E6E6
comment.documentation.heredoc.elixir#19f9d8
entity.name.function-call.elixir#45A9F9
storage.type.haskell#FFB86C
entity.name.namespace.haskell#E6E6E6
entity.name.function.infix.haskell#E6E6E6
constant.other.haskell#E6E6E6bold
markup.bold#FFB86Cbold
punctuation.definition.bold.markdown#FFCC95bold
markup.changed#FF75B5
markup.deleted#FF2C6D
markup.italic#FF9AC1italic
punctuation.definition.italic.markdown#FF75B5italic
markup.inserted#19f9d8
punctuation.definition.heading#19f9d8
entity.name.section.markdown#BBBBBB
markup.quote#FFB86C
markup.inline.raw#19f9d8italic
beginning.punctuation.definition.list#FF75B5
markup.fenced_code.block.markdown punctuation.definition.markdown#757575
fenced_code.block.language#BBBBBBitalic
string.other.link#BBBBBB
meta.link.inline.markdown#45A9F9italic
text.html.markdown punctuation.definition.string#FFCC95
storage.modifier.package.java, storage.modifier.import.java#E6E6E6
entity.other.inherited-class.java, storage.type.java, storage.type.generic.java#FFB86C
storage.type.generic.wildcard.java, storage.type.primitive.java#FFCC95
storage.type.annotation.java, punctuation.definition.annotation.java#6FC1FF
keyword.operator.logical.python#FF75B5
variable.language.special.self.python#FF9AC1
meta.function-call.generic.python#45A9F9
support.function.magic.python#6FC1FF
support.function.builtin.python#6FC1FF
punctuation.definition.decorator.python, meta.function.decorator.python#6FC1FF
support.type.exception.python#FFB86C
entity.name.function.macro.rules.rust#FF75B5
variable.language.super.rust#FF75B5
support.type.primitive.ts, support.type.builtin.ts#FFCC95
meta.template.expression.ts#FFCC95
keyword.operator.expression.typeof.ts, keyword.operator.expression.in.ts, keyword.operator.expression.of.ts, keyword.operator.expression.is.ts#FF75B5
constant.language.import-export-all.ts.ts#E6E6E6
MuPanda Theme by veykril - VS Code Theme