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#0b0b0b
  • activityBar.foreground#a4a4a4
  • activityBarBadge.background#4b4104
  • activityBarBadge.foreground#ffffff
  • breadcrumb.focusForeground#807d54
  • breadcrumb.foreground#545036
  • 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#7e7753
  • editor.background#111213
  • editor.findMatchBackground#00ff001a
  • editor.findMatchBorder#14964b
  • editor.findMatchHighlightBackground#0000
  • editor.findMatchHighlightBorder#0F7018
  • editor.findRangeHighlightBackground#00ff550a
  • editor.foreground#969696
  • editor.hoverHighlightBackground#46dbff12
  • editor.inactiveSelectionBackground#1d2a38
  • editor.lineHighlightBackground#00000042
  • editor.rangeHighlightBackground#00ff001a
  • editor.selectionBackground#46dbff12
  • editor.selectionHighlightBackground#46dbff12
  • 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#ce3e3e
  • editorGroup.dropBackground#000000
  • editorGroupHeader.tabsBackground#161616
  • editorHoverWidget.background#0e0e0e
  • editorHoverWidget.border#ffffff00
  • editorIndentGuide.background#00000000
  • editorInfo.foreground#4397f7
  • editorLineNumber.activeForeground#18717b
  • editorLineNumber.foreground#263235
  • 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#797979
  • gitDecoration.addedResourceForeground#716b3a
  • gitDecoration.conflictingResourceForeground#9f4623
  • gitDecoration.deletedResourceForeground#7f3744
  • gitDecoration.ignoredResourceForeground#423939
  • gitDecoration.modifiedResourceForeground#1f696e
  • gitDecoration.renamedResourceForeground#4f5580
  • gitDecoration.stageDeletedResourceForeground#7f3744
  • gitDecoration.stageModifiedResourceForeground#1f696e
  • gitDecoration.untrackedResourceForeground#4c6c44
  • icon.foreground#919191
  • input.background#060606
  • input.border#2a3036
  • input.foreground#888888
  • inputOption.activeBorder#385768
  • keybindingLabel.background#46411e
  • keybindingLabel.border#00000000
  • keybindingLabel.bottomBorder#00000000
  • keybindingLabel.foreground#c1c1c1
  • list.activeSelectionBackground#0c0c0c
  • list.activeSelectionForeground#999589
  • list.dropBackground#0c0c0c
  • list.errorForeground#7f3b3b
  • list.focusBackground#0c0c0c
  • list.highlightForeground#6b6625
  • list.hoverBackground#0c0c0c
  • list.inactiveSelectionBackground#0c0c0c
  • list.inactiveSelectionForeground#999589
  • list.warningForeground#7c4a25
  • menu.background#1b2330
  • menu.selectionBackground#4b5b79
  • menu.separatorBackground#4b5b79
  • menubar.selectionBackground#202939
  • merge.border#ff000000
  • merge.currentHeaderBackground#39442e
  • merge.incomingHeaderBackground#1e3844
  • minimap.findMatchHighlight#09680C
  • notifications.background#000000
  • notifications.foreground#656351
  • notificationsErrorIcon.foreground#8c4d4d
  • notificationsInfoIcon.foreground#b1a9a9
  • panel.background#161616
  • panel.border#0d0d0b
  • panelTitle.activeForeground#7e5932
  • panelTitle.inactiveForeground#695e50
  • peekView.border#00000000
  • peekViewEditor.background#0d0d0d
  • peekViewEditor.matchHighlightBackground#00000000
  • peekViewEditor.matchHighlightBorder#7e8346
  • peekViewResult.background#0e0e0e
  • peekViewResult.matchHighlightBackground#312d2d
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#807e3a
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#7b554c
  • peekViewTitleLabel.foreground#77703c
  • quickInput.background#131313
  • quickInput.foreground#636363
  • quickInputList.focusBackground#000000
  • quickInputList.focusIconForeground#857d63
  • scrollbarSlider.activeBackground#3586
  • scrollbarSlider.background#606d7422
  • scrollbarSlider.hoverBackground#606d7422
  • sideBar.background#131313
  • sideBar.border#0d0d0b
  • sideBar.foreground#575555
  • sideBarSectionHeader.background#0a0a0a
  • sideBarSectionHeader.foreground#6b4438
  • statusBar.background#000000
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingForeground#526338
  • statusBar.foreground#686456
  • symbolIcon.arrayForeground#336278
  • symbolIcon.booleanForeground#39657f
  • symbolIcon.classForeground#796344
  • symbolIcon.constantForeground#39657f
  • symbolIcon.constructorForeground#796344
  • symbolIcon.fieldForeground#4f6f56
  • symbolIcon.functionForeground#1d6870
  • symbolIcon.interfaceForeground#71714f
  • symbolIcon.keywordForeground#5b673e
  • symbolIcon.methodForeground#1d6870
  • symbolIcon.moduleForeground#9c673f
  • symbolIcon.namespaceForeground#637b83
  • symbolIcon.propertyForeground#4f6f56
  • symbolIcon.stringForeground#828282
  • symbolIcon.typeParameterForeground#717152
  • symbolIcon.variableForeground#1e6d56
  • tab.activeBorder#3f4711
  • tab.activeForeground#9b9765
  • tab.border#ffffff00
  • tab.inactiveBackground#1a1a1a
  • 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#a09a43
  • textLink.foreground#757034
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#646756
  • titleBar.inactiveBackground#090909
  • tree.indentGuidesStroke#3d3c19
  • widget.shadow#090a0c95

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control, keyword.control punctuation, keyword.other#5b673ebold
storage, storage.type, keyword.operator.new, entity.name.type#744d43bold
entity.name.type.module#848484bold
entity.name.namespace#637b83—
token, meta.property-list#79808e—
entity.name.function#1d6870—
comment, puncutuation.definition.comment, puncutuation.definition.comment.json, comment.line.double-slash#494945italic
string, punctuation.definition.string, string.regexp punctuation.definition.string, meta.attribute-selector#828282—
support.type.primitive, keyword.type, support.type.builtin#336278bold
constant.numeric, constant.language, keyword.other.unit, keyword.operator.quantifier#39657fbold
entity.name.scope-resolution#5b6f76—
meta.structure, punctuation.definition.block, meta.brace.square, meta.brace.round, punctuation.definition.parameters, keyword.operator.logical#888888—
keyword.operator.optional#8c7a6c—
punctuation.separator.pointer-access#bfbfbf—
source variable, source support.variable#5b7883—
keyword.operator, punctuation.separator.pointer#888888—
variable.parameter#5b6f76—
source variable.other.constant, variable.other.constant#786541—
support.constant.property-value#989898—
constant.character, constant.other#5b6f76—
entity.other.attribute-name#495e48—
variable.language.this#a4a4a4—
entity.name.tag.reference#52708b—
source.css, support.type.property-name.css#756644—
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#6b665c—
variable.other.property, support.type.property-name#4f6f56—
punctuation.definition.array.begin, punctuation.definition.array.end#796344bold
punctuation.definition.dictionary.begin, punctuation.definition.dictionary.end#88543ebold
punctuation.separator.dictionary.key-value#1e767cbold
string.quoted.double.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json#717152—
heading.1.markdown#7d7d3d—
heading.2.markdown#4b763d—
heading.3.markdown#2f7179—
heading.4.markdown#894c41—
heading.5.markdown#82693e—
heading.6.markdown#286c54—
text.html.markdown#909090—
meta.link.inline.markdown, string.other.link.title.markdown#746d2c—
markup.fenced_code.block.markdown#494945—
meta.embedded.block#969696—
markup.bold.markdown#969696bold
markup.italic.markdown—italic
meta.separator.markdown#705128—
markup.quote.markdown#5f733e—
markup.list.unnumbered.markdown#1d7479—