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.activeBackground#3a3633
  • activityBar.background#1b1917
  • activityBar.border#454240
  • activityBar.foreground#dcd8d3
  • activityBar.inactiveForeground#918c86
  • activityBarBadge.background#b8b2ab
  • activityBarBadge.foreground#232120
  • agents.background#1b1917
  • agentsPanel.background#232120
  • agentsPanel.border#454240
  • agentsPanel.foreground#dcd8d3
  • badge.background#b8b2ab
  • badge.foreground#232120
  • breadcrumb.background#232120
  • breadcrumb.focusForeground#dcd8d3
  • breadcrumb.foreground#948f89
  • breadcrumbPicker.background#1b1917
  • button.background#b8b2ab
  • button.foreground#232120
  • descriptionForeground#948f89
  • diffEditor.insertedTextBackground#8dc4b022
  • diffEditor.removedTextBackground#d1786a22
  • dropdown.background#232120
  • dropdown.border#454240
  • dropdown.foreground#dcd8d3
  • editor.background#232120
  • editor.foreground#dcd8d3
  • editor.lineHighlightBackground#211f1d
  • editor.lineHighlightBorder#211f1d
  • editor.selectionBackground#3a3633
  • editor.selectionHighlightBackground#3a363380
  • editorBracketHighlight.foreground1#dcd8d3
  • editorBracketHighlight.foreground2#dcd8d3
  • editorBracketHighlight.foreground3#dcd8d3
  • editorBracketHighlight.foreground4#dcd8d3
  • editorBracketHighlight.foreground5#dcd8d3
  • editorBracketHighlight.foreground6#dcd8d3
  • editorBracketHighlight.unexpectedBracket.foreground#d1786a
  • editorBracketMatch.background#3a363380
  • editorBracketMatch.border#918c86
  • editorCodeLens.foreground#918c86
  • editorCursor.foreground#f0a83c
  • editorError.foreground#d1786a
  • editorGroup.border#454240
  • editorGroupHeader.tabsBackground#1b1917
  • editorGroupHeader.tabsBorder#454240
  • editorGutter.addedBackground#8dc4b0
  • editorGutter.deletedBackground#d1786a
  • editorGutter.modifiedBackground#b8b2ab
  • editorHoverWidget.background#1b1917
  • editorHoverWidget.border#454240
  • editorIndentGuide.activeBackground1#918c86
  • editorIndentGuide.background1#454240
  • editorInfo.foreground#b8b2ab
  • editorInlayHint.background#45424066
  • editorInlayHint.foreground#948f89
  • editorLightBulb.foreground#c9b06a
  • editorLineNumber.activeForeground#dcd8d3
  • editorLineNumber.foreground#948f89
  • editorLink.activeForeground#b8b2ab
  • editorOverviewRuler.border#454240
  • editorRuler.foreground#454240
  • editorSuggestWidget.background#1b1917
  • editorSuggestWidget.border#454240
  • editorSuggestWidget.selectedBackground#3a3633
  • editorWarning.foreground#c9b06a
  • editorWhitespace.foreground#918c86
  • editorWidget.background#1b1917
  • editorWidget.border#454240
  • errorForeground#d1786a
  • focusBorder#454240
  • foreground#dcd8d3
  • gitDecoration.deletedResourceForeground#d1786a
  • gitDecoration.ignoredResourceForeground#918c86
  • gitDecoration.modifiedResourceForeground#c9b06a
  • gitDecoration.untrackedResourceForeground#8dc4b0
  • icon.foreground#948f89
  • input.background#232120
  • input.border#454240
  • input.foreground#dcd8d3
  • input.placeholderForeground#918c86
  • list.activeSelectionBackground#3a3633
  • list.activeSelectionForeground#dcd8d3
  • list.highlightForeground#b8b2ab
  • list.hoverBackground#3a363366
  • list.inactiveSelectionBackground#3a363399
  • minimap.background#232120
  • notebook.cellEditorBackground#232120
  • notebook.editorBackground#232120
  • panel.background#232120
  • panel.border#454240
  • panelTitle.activeBorder#b8b2ab
  • panelTitle.activeForeground#dcd8d3
  • panelTitle.inactiveForeground#918c86
  • peekView.border#454240
  • peekViewEditor.background#232120
  • peekViewResult.background#1b1917
  • peekViewTitle.background#1b1917
  • scrollbarSlider.activeBackground#948f8988
  • scrollbarSlider.background#918c8655
  • scrollbarSlider.hoverBackground#918c8688
  • selection.background#3a3633
  • sideBar.background#1b1917
  • sideBar.border#454240
  • sideBar.foreground#948f89
  • sideBarSectionHeader.background#1b1917
  • sideBarSectionHeader.border#454240
  • sideBarSectionHeader.foreground#dcd8d3
  • sideBarTitle.foreground#dcd8d3
  • statusBar.background#232120
  • statusBar.border#454240
  • statusBar.debuggingBackground#c9b06a
  • statusBar.debuggingForeground#232120
  • statusBar.foreground#948f89
  • statusBar.noFolderBackground#232120
  • tab.activeBackground#232120
  • tab.activeBorder#b8b2ab
  • tab.activeForeground#dcd8d3
  • tab.border#454240
  • tab.inactiveBackground#1b1917
  • tab.inactiveForeground#948f89
  • terminal.ansiBlack#dcd8d3
  • terminal.ansiBlue#b8b2ab
  • terminal.ansiBrightBlack#948f89
  • terminal.ansiBrightBlue#b8b2ab
  • terminal.ansiBrightCyan#e8a94e
  • terminal.ansiBrightGreen#8dc4b0
  • terminal.ansiBrightMagenta#c8c2ba
  • terminal.ansiBrightRed#d1786a
  • terminal.ansiBrightWhite#232120
  • terminal.ansiBrightYellow#c9b06a
  • terminal.ansiCyan#e8a94e
  • terminal.ansiGreen#f0c987
  • terminal.ansiMagenta#c8c2ba
  • terminal.ansiRed#a8a29b
  • terminal.ansiWhite#918c86
  • terminal.ansiYellow#e8a94e
  • terminal.background#232120
  • terminal.foreground#dcd8d3
  • terminal.selectionBackground#3a3633
  • terminalCursor.foreground#f0a83c
  • textCodeBlock.background#1b1917
  • textLink.activeForeground#b8b2ab
  • textLink.foreground#b8b2ab
  • titleBar.activeBackground#1b1917
  • titleBar.activeForeground#dcd8d3
  • titleBar.border#454240
  • titleBar.inactiveBackground#1b1917
  • titleBar.inactiveForeground#918c86
  • widget.border#454240

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage#e8a94e
string#f0c987
entity.name.function, support.function#b8b2ab
constant.numeric, constant.language#a8a29b
entity.name.type, entity.name.class, support.type#c8c2ba
support, variable.language, constant.other.symbol#e8a94e
punctuation, keyword.operator#dcd8d3
comment#918c86italic
entity.name.tag, entity.name.namespace#c8c2ba
entity.other.attribute-name#e8a94e
constant.character.escape#a8a29b
invalid#d1786a
markup.heading, entity.name.section#b8b2abbold
markup.bold#e8a94ebold
markup.italic#e8a94eitalic
markup.raw, markup.inline.raw#e8a94e
markup.underline.link, string.other.link#b8b2abunderline
markup.quote#918c86italic
markup.inserted#8dc4b0
markup.deleted#d1786a
markup.changed#c9b06a