Skip to main content
Coding Theme

Color themes

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.background#000000
  • activityBar.border#000000
  • activityBar.foreground#d1c7c7
  • activityBarBadge.background#605304
  • activityBarBadge.foreground#ffffff
  • breadcrumb.focusForeground#85814a
  • breadcrumb.foreground#585332
  • button.background#000000
  • button.foreground#797979
  • button.hoverBackground#11252b
  • debugConsole.errorForeground#7a3737
  • debugConsole.infoForeground#3d607a
  • debugConsole.sourceForeground#295c0f
  • debugConsole.warningForeground#696417
  • debugIcon.breakpointForeground#7b2c1e
  • debugIcon.continueForeground#7c702c
  • debugIcon.pauseForeground#b2b2b2
  • debugIcon.restartForeground#277690
  • debugIcon.startForeground#2e7c35
  • debugIcon.stepIntoForeground#266f4b
  • debugIcon.stepOutForeground#7f5924
  • debugIcon.stepOverForeground#798c83
  • debugIcon.stopForeground#8f4637
  • debugTokenExpression.boolean#39657f
  • debugTokenExpression.name#616c44
  • debugTokenExpression.number#39657f
  • debugTokenExpression.string#76553d
  • debugTokenExpression.value#8c8b85
  • debugToolBar.background#030303
  • debugToolBar.border#000000
  • debugView.stateLabelBackground#2e1919
  • diffEditor.insertedLineBackground#0b1917
  • diffEditor.insertedTextBackground#00331f
  • diffEditor.removedLineBackground#221414
  • diffEditor.removedTextBackground#351111
  • diffEditorOverview.insertedForeground#09392a
  • diffEditorOverview.removedForeground#481818
  • dropdown.background#0c0c0c
  • dropdown.border#35332f
  • dropdown.foreground#837947
  • editor.background#000000
  • editor.findMatchBackground#00ff001a
  • editor.findMatchBorder#14964b
  • editor.findMatchHighlightBackground#0000
  • editor.findMatchHighlightBorder#0F7018
  • editor.findRangeHighlightBackground#00ff550a
  • editor.foreground#969696
  • editor.hoverHighlightBackground#46daff20
  • editor.inactiveSelectionBackground#1d2a38
  • editor.lineHighlightBackground#00000042
  • editor.rangeHighlightBackground#00ff001a
  • editor.selectionBackground#46daff20
  • editor.selectionHighlightBackground#46daff20
  • editor.selectionHighlightBorder#46dbff3b
  • editor.stackFrameHighlightBackground#23270b
  • editor.wordHighlightBackground#0000
  • editor.wordHighlightBorder#186092
  • editor.wordHighlightStrongBackground#0000
  • editor.wordHighlightStrongBorder#4F3A73
  • editorBracketMatch.background#5ff2
  • editorBracketMatch.border#0000
  • editorCursor.foreground#9a9a8e
  • editorError.foreground#982a2a
  • editorGroup.dropBackground#000000
  • editorGroupHeader.border#232322
  • editorGroupHeader.tabsBackground#21211f
  • editorGroupHeader.tabsBorder#272626
  • editorHoverWidget.background#0e0e0e
  • editorHoverWidget.border#ffffff00
  • editorIndentGuide.background#00000000
  • editorInfo.foreground#4397f7
  • editorLineNumber.activeForeground#177a85
  • editorLineNumber.foreground#1e2c2f
  • editorLink.activeForeground#1AC1DE
  • editorOverviewRuler.bracketMatchForeground#5ff6
  • editorOverviewRuler.findMatchForeground#14964baa
  • editorOverviewRuler.wordHighlightForeground#1882ccaa
  • editorOverviewRuler.wordHighlightStrongForeground#6d3dbfaa
  • editorSuggestWidget.background#050506
  • editorSuggestWidget.border#334159
  • editorSuggestWidget.highlightForeground#abd
  • editorSuggestWidget.selectedBackground#334159
  • editorSuggestWidget.selectedForeground#fff
  • editorWarning.foreground#b86428
  • editorWhitespace.foreground#00000000
  • editorWidget.background#000000
  • focusBorder#50525400
  • foreground#969595
  • gitDecoration.addedResourceForeground#857c3f
  • gitDecoration.conflictingResourceForeground#aa5230
  • gitDecoration.deletedResourceForeground#8e3747
  • gitDecoration.ignoredResourceForeground#3a3131
  • gitDecoration.modifiedResourceForeground#257378
  • gitDecoration.renamedResourceForeground#575e8e
  • gitDecoration.stageDeletedResourceForeground#903545
  • gitDecoration.stageModifiedResourceForeground#28838a
  • gitDecoration.untrackedResourceForeground#517a47
  • icon.foreground#919191
  • input.background#060606
  • input.border#2a3036
  • input.foreground#888888
  • inputOption.activeBorder#42697e
  • keybindingLabel.background#46411e
  • keybindingLabel.border#00000000
  • keybindingLabel.bottomBorder#00000000
  • keybindingLabel.foreground#c1c1c1
  • list.activeSelectionBackground#0c0c0c
  • list.activeSelectionForeground#928962
  • list.dropBackground#0c0c0c
  • list.errorForeground#8a3939
  • list.focusBackground#0c0c0c
  • list.highlightForeground#6b6625
  • list.hoverBackground#0c0c0c
  • list.inactiveSelectionBackground#0c0c0c
  • list.inactiveSelectionForeground#999589
  • list.warningForeground#8d5326
  • menu.background#1b2330
  • menu.selectionBackground#455980
  • menu.separatorBackground#495e86
  • menubar.selectionBackground#1a2333
  • merge.border#ff000000
  • merge.currentHeaderBackground#39442e
  • merge.incomingHeaderBackground#1e3844
  • minimap.findMatchHighlight#09680C
  • notifications.background#000000
  • notifications.foreground#6c6a51
  • notificationsErrorIcon.foreground#934b4b
  • notificationsInfoIcon.foreground#bdb0b0
  • panel.background#161616
  • panel.border#32322a
  • panelTitle.activeForeground#7e5932
  • panelTitle.inactiveForeground#695e50
  • peekView.border#00000000
  • peekViewEditor.background#0d0d0d
  • peekViewEditor.matchHighlightBackground#00000000
  • peekViewEditor.matchHighlightBorder#7b813b
  • peekViewResult.background#0e0e0e
  • peekViewResult.matchHighlightBackground#312d2d
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#858338
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#805045
  • peekViewTitleLabel.foreground#817835
  • quickInput.background#191919
  • quickInput.foreground#898585
  • quickInputList.focusBackground#000000
  • quickInputList.focusIconForeground#90845d
  • scrollbarSlider.activeBackground#3586
  • scrollbarSlider.background#606d7422
  • scrollbarSlider.hoverBackground#606d7422
  • sideBar.background#141414
  • sideBar.border#2a2a28
  • sideBar.foreground#5e5754
  • sideBarSectionHeader.background#0a0a0a
  • sideBarSectionHeader.foreground#754232
  • statusBar.background#000000
  • statusBar.border#252417
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingForeground#5d743c
  • statusBar.foreground#756e54
  • symbolIcon.arrayForeground#346b85
  • symbolIcon.booleanForeground#3b708f
  • symbolIcon.classForeground#856a45
  • symbolIcon.constantForeground#3b708f
  • symbolIcon.constructorForeground#8b7049
  • symbolIcon.fieldForeground#56815f
  • symbolIcon.functionForeground#1e7a84
  • symbolIcon.interfaceForeground#7a7a50
  • symbolIcon.keywordForeground#677742
  • symbolIcon.methodForeground#1e7a84
  • symbolIcon.moduleForeground#a86b3d
  • symbolIcon.namespaceForeground#688690
  • symbolIcon.propertyForeground#537c5c
  • symbolIcon.stringForeground#9e9d9d
  • symbolIcon.typeParameterForeground#838359
  • symbolIcon.variableForeground#1e7d62
  • tab.activeBorder#67770d
  • tab.activeForeground#9f9838
  • tab.border#a9535300
  • tab.inactiveBackground#1c1b1a
  • terminal.ansiBlue#083e67
  • terminal.ansiBrightBlue#037598
  • terminal.ansiBrightCyan#0f7770
  • terminal.ansiBrightGreen#5d7a1d
  • terminal.ansiBrightMagenta#7c0a41
  • terminal.ansiBrightRed#9a1a0087
  • terminal.ansiBrightWhite#b4b4b4
  • terminal.ansiBrightYellow#978825
  • terminal.ansiCyan#0a534e
  • terminal.ansiGreen#295c0f
  • terminal.ansiMagenta#723351
  • terminal.ansiRed#7a3737
  • terminal.ansiYellow#888231
  • terminal.border#3a3939
  • terminal.foreground#898989
  • terminal.selectionBackground#000000
  • terminalCursor.foreground#7b7b7b
  • textLink.activeForeground#aea73d
  • textLink.foreground#827c31
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#636455
  • titleBar.inactiveBackground#090909
  • tree.indentGuidesStroke#424115
  • widget.shadow#090a0c95

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control, keyword.control punctuation, keyword.other#677742bold
storage, storage.type, keyword.operator.new, entity.name.type#875143bold
entity.name.type.module#9d9b9bbold
entity.name.namespace#688690—
token, meta.property-list#7d889e—
entity.name.function#1e7a84—
comment, puncutuation.definition.comment, puncutuation.definition.comment.json, comment.line.double-slash#4d4d44italic
string, punctuation.definition.string, string.regexp punctuation.definition.string, meta.attribute-selector#9e9d9d—
support.type.primitive, keyword.type, support.type.builtin#3b708fbold
constant.numeric, constant.language, keyword.other.unit, keyword.operator.quantifier#3b708fbold
entity.name.scope-resolution#5b747e—
meta.structure, punctuation.definition.block, meta.brace.square, meta.brace.round, punctuation.definition.parameters, keyword.operator.logical#959191—
keyword.operator.optional#997f6c—
punctuation.separator.pointer-access#cecaca—
source variable, source support.variable#577d8d—
keyword.operator, punctuation.separator.pointer#a29f9f—
variable.parameter#627e89—
source variable.other.constant, variable.other.constant#856e42—
support.constant.property-value#a8a4a4—
constant.character, constant.other#63808b—
entity.other.attribute-name#4a6749—
variable.language.this#b0adad—
entity.name.tag.reference#587c9b—
source.css, support.type.property-name.css#7e6d46—
support.class.component, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.tag#736b5c—
variable.other.property, support.type.property-name#47684e—
punctuation.definition.array.begin, punctuation.definition.array.end#816743bold
punctuation.definition.dictionary.begin, punctuation.definition.dictionary.end#8f563ebold
punctuation.separator.dictionary.key-value#1b7b82bold
string.quoted.double.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json#777752—
heading.1.markdown#82823c—
heading.2.markdown#4d7e3c—
heading.3.markdown#2e7880—
heading.4.markdown#8f4d41—
heading.5.markdown#8b6f3e—
heading.6.markdown#277157—
text.html.markdown#a4a2a2—
meta.link.inline.markdown, string.other.link.title.markdown#7e762c—
markup.fenced_code.block.markdown#52524d—
meta.embedded.block#a5a3a3—
markup.bold.markdown#a4a4a4bold
markup.italic.markdown—italic
meta.separator.markdown#775528—
markup.quote.markdown#62793e—
markup.list.unnumbered.markdown#1c7b80—