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.activeBorder#D1913C
  • activityBar.background#151B22
  • activityBar.foreground#D1913C
  • activityBarBadge.background#D1913C
  • activityBarBadge.foreground#CDB79E
  • badge.background#D1913C
  • badge.foreground#CDB79E
  • button.background#202830
  • button.foreground#CDB79E
  • button.hoverBackground#2A2F36
  • dropdown.background#151B22
  • dropdown.border#202830
  • dropdown.foreground#CDB79E
  • editor.background#0F141A
  • editor.findMatchBackground#D1913C40
  • editor.findMatchHighlightBackground#D1913C20
  • editor.foreground#CDB79E
  • editor.lineHighlightBackground#28303A40
  • editor.lineHighlightBorder#28303A80
  • editor.selectionBackground#34567880
  • editor.selectionHighlightBackground#34567840
  • editorBracketMatch.background#34567840
  • editorBracketMatch.border#345678
  • editorCursor.foreground#D1913C
  • editorGroupHeader.tabsBackground#0F141A
  • editorIndentGuide.activeBackground#2A2F36AA
  • editorIndentGuide.background#2A2F3666
  • editorLineNumber.activeForeground#D1913C
  • editorLineNumber.foreground#5A5A5A
  • editorWhitespace.foreground#2A2F36
  • focusBorder#D1913C
  • gitDecoration.conflictingResourceForeground#E6B86A
  • gitDecoration.deletedResourceForeground#D1913C
  • gitDecoration.modifiedResourceForeground#345678
  • gitDecoration.untrackedResourceForeground#9ACD32
  • input.background#151B22
  • input.border#202830
  • input.foreground#CDB79E
  • input.placeholderForeground#5A5A5A
  • inputOption.activeBorder#D1913C
  • list.activeSelectionBackground#202830
  • list.activeSelectionForeground#CDB79E
  • list.focusBackground#202830
  • list.highlightForeground#D1913C
  • list.hoverBackground#151B2266
  • minimap.background#0F141A
  • minimapSlider.activeBackground#34567866
  • minimapSlider.background#34567822
  • minimapSlider.hoverBackground#34567844
  • panel.background#0F141A
  • panel.border#202830
  • panelTitle.activeBorder#D1913C
  • panelTitle.activeForeground#D1913C
  • panelTitle.inactiveForeground#9AA5B4
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#34567888
  • scrollbarSlider.background#2A2F3666
  • scrollbarSlider.hoverBackground#2A2F36AA
  • sideBar.background#151B22
  • sideBar.foreground#CDB79E
  • sideBarSectionHeader.background#151B22
  • sideBarSectionHeader.foreground#D1913C
  • sideBarTitle.foreground#D1913C
  • statusBar.background#202830
  • statusBar.debuggingBackground#D1913C
  • statusBar.foreground#CDB79E
  • statusBar.noFolderBackground#151B22
  • statusBarItem.hoverBackground#2A2F36
  • tab.activeBackground#202830
  • tab.activeBorder#D1913C
  • tab.activeForeground#CDB79E
  • tab.border#0F141A
  • tab.inactiveBackground#151B22
  • tab.inactiveForeground#9AA5B4
  • terminal.ansiBlue#345678
  • terminal.ansiBrightBlue#6A9FD8
  • terminal.ansiBrightCyan#7FFFD4
  • terminal.ansiBrightGreen#9ACD32
  • terminal.ansiBrightMagenta#C776C5
  • terminal.ansiBrightRed#FF8844
  • terminal.ansiBrightYellow#FFD580
  • terminal.ansiCyan#5C9EA0
  • terminal.ansiGreen#7A9A5B
  • terminal.ansiMagenta#A15C9A
  • terminal.ansiRed#D1913C
  • terminal.ansiYellow#E6B86A
  • terminal.background#0F141A
  • terminal.foreground#CDB79E
  • titleBar.activeBackground#151B22
  • titleBar.activeForeground#CDB79E
  • titleBar.inactiveBackground#0F141A
  • titleBar.inactiveForeground#9AA5B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E5F53italic
string, string.quoted, string.template#E6B86A
keyword, storage.type, storage.modifier#D1913Cbold
keyword.operator, punctuation.accessor#9AA5B4
variable, variable.other#CDB79E
variable.parameter#9ACD32italic
entity.name.function, support.function#345678
meta.function-call#6A9FD8
entity.name.class, entity.name.type.class, support.class#D1913Cbold
entity.name.type, support.type#5C9EA0
entity.name.type.interface#5C9EA0italic
constant.numeric#9ACD32
constant, constant.language, constant.character#9ACD32
constant.language.boolean#D1913Cbold
variable.other.property, support.variable.property#CDB79E
meta.object-literal.key#345678
entity.name.tag, punctuation.definition.tag#D1913C
entity.other.attribute-name#5C9EA0italic
punctuation, meta.brace#9AA5B4
string.regexp#9ACD32
constant.character.escape#5C9EA0
meta.decorator, punctuation.decorator#D1913C
invalid, invalid.illegal#FF5F5Fstrikethrough
markup.heading, entity.name.section#D1913Cbold
markup.bold#D1913Cbold
markup.italic#5C9EA0italic
markup.underline.link#345678
markup.inline.raw, markup.fenced_code#9ACD32
support.type.property-name.json#345678
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D1913C
support.type.property-name.css#345678
support.constant.property-value.css#5C9EA0