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#211b17
  • activityBar.foreground#dcae7c
  • activityBar.inactiveForeground#847a70
  • activityBarBadge.background#dcae7c
  • activityBarBadge.foreground#1a1a1a
  • badge.background#dcae7c
  • badge.foreground#1a1a1a
  • button.background#dcae7c
  • button.foreground#1a1a1a
  • button.hoverBackground#e0b88c
  • dropdown.background#211b17
  • editor.background#2e2620
  • editor.findMatchBackground#dcae7c66
  • editor.findMatchHighlightBackground#dcae7c38
  • editor.foreground#ede1d1
  • editor.lineHighlightBackground#3b332d
  • editor.selectionBackground#dcae7c42
  • editorBracketMatch.border#dcae7c
  • editorCursor.foreground#dcae7c
  • editorGroupHeader.tabsBackground#29221d
  • editorIndentGuide.activeBackground1#ede1d138
  • editorIndentGuide.background1#ede1d114
  • editorLineNumber.activeForeground#dcae7c
  • editorLineNumber.foreground#847a70
  • editorSuggestWidget.selectedBackground#dcae7c42
  • editorWhitespace.foreground#ede1d11a
  • editorWidget.background#211b17
  • focusBorder#dcae7c
  • input.background#211b17
  • input.foreground#ede1d1
  • input.placeholderForeground#847a70
  • list.activeSelectionBackground#dcae7c42
  • list.activeSelectionForeground#ede1d1
  • list.hoverBackground#3b332d
  • list.inactiveSelectionBackground#dcae7c24
  • panel.background#28211c
  • panelTitle.activeForeground#dcae7c
  • scrollbarSlider.activeBackground#ede1d15c
  • scrollbarSlider.background#ede1d129
  • scrollbarSlider.hoverBackground#ede1d142
  • selection.background#dcae7c4d
  • sideBar.background#28211c
  • sideBar.foreground#ede1d1
  • sideBarSectionHeader.background#2e2620
  • sideBarTitle.foreground#dcae7c
  • statusBar.background#211b17
  • statusBar.foreground#ede1d1
  • statusBar.noFolderBackground#211b17
  • tab.activeBackground#2e2620
  • tab.activeBorderTop#dcae7c
  • tab.activeForeground#dcae7c
  • tab.border#29221d
  • tab.inactiveBackground#29221d
  • tab.inactiveForeground#847a70
  • terminal.background#2e2620
  • terminal.foreground#ede1d1
  • titleBar.activeBackground#211b17
  • titleBar.activeForeground#ede1d1
  • titleBar.inactiveBackground#211b17
  • titleBar.inactiveForeground#847a70

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#897a66italic
string, string.quoted, string.template#bcc77f
constant.numeric, constant.language, constant.character#dfa46f
keyword, keyword.control, storage, storage.type, storage.modifier#e0a878
entity.name.function, support.function, meta.function-call.generic#ecc47e
variable, meta.definition.variable.name, variable.other.readwrite#ede1d1
variable.parameter, parameter#cbbfb1
entity.name.type, support.type, support.class, entity.name.namespace#e6c084
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#e3936f
keyword.operator#dcae7c
entity.name.tag, punctuation.definition.tag#e0a878
entity.other.attribute-name#ecc47e
constant.other.color, support.constant#dfa46f
entity.name.type.class#e6c084bold
markup.boldbold
markup.italicitalic
markup.heading#dcae7cbold
invalid#2e2620