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
Candela Themes by Candela - VS Code Theme