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.markdownitalic
meta.separator.markdown#705128
markup.quote.markdown#5f733e
markup.list.unnumbered.markdown#1d7479
Ceramic by Jennifer Ong - VS Code Theme