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#FF6A2A
  • activityBar.background#0D0E10
  • activityBar.foreground#EEF2F6
  • activityBar.inactiveForeground#737D89
  • activityBarBadge.background#FF6A2A
  • activityBarBadge.foreground#111214
  • badge.background#FF6A2A
  • badge.foreground#111214
  • button.background#FF6A2A
  • button.foreground#111214
  • button.hoverBackground#FF7D45
  • dropdown.background#181A1D
  • dropdown.border#2A2F35
  • editor.background#111214
  • editor.findMatchBackground#FF6A2A55
  • editor.findMatchHighlightBackground#FF6A2A2A
  • editor.foreground#DDE3EA
  • editor.lineHighlightBackground#181A1D
  • editor.selectionBackground#3B271C
  • editor.selectionHighlightBackground#FF6A2A22
  • editorBracketMatch.background#FF6A2A22
  • editorBracketMatch.border#FF6A2A
  • editorCursor.foreground#FF6A2A
  • editorGroup.border#1D2024
  • editorGroupHeader.tabsBackground#0D0E10
  • editorGutter.background#111214
  • editorIndentGuide.activeBackground1#FF6A2A66
  • editorIndentGuide.background1#25282D
  • editorLineNumber.activeForeground#B1BAC5
  • editorLineNumber.foreground#41474F
  • focusBorder#FF6A2A
  • icon.foreground#CBD3DD
  • input.background#181A1D
  • input.border#2A2F35
  • input.foreground#DDE3EA
  • list.activeSelectionBackground#22262B
  • list.focusOutline#FF6A2A
  • list.highlightForeground#FF8A4D
  • list.hoverBackground#1B1E22
  • list.inactiveSelectionBackground#1A1C20
  • panel.background#111214
  • panel.border#1D2024
  • progressBar.background#FF6A2A
  • sideBar.background#111214
  • sideBar.border#1D2024
  • sideBar.foreground#CBD3DD
  • sideBarSectionHeader.background#15171A
  • sideBarSectionHeader.foreground#DDE3EA
  • sideBarTitle.foreground#9BA5B1
  • statusBar.background#0D0E10
  • statusBar.border#1D2024
  • statusBar.debuggingBackground#FF6A2A
  • statusBar.debuggingForeground#111214
  • statusBar.foreground#DDE3EA
  • tab.activeBackground#111214
  • tab.activeBorderTop#FF6A2A
  • tab.activeForeground#F3F6FA
  • tab.border#1D2024
  • tab.inactiveBackground#0F1012
  • tab.inactiveForeground#8D96A2
  • terminal.background#111214
  • terminal.foreground#DDE3EA
  • terminalCursor.foreground#FF6A2A
  • titleBar.activeBackground#0D0E10
  • titleBar.activeForeground#DDE3EA
  • titleBar.inactiveBackground#0D0E10
  • titleBar.inactiveForeground#737D89

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7B8A80italic
string, constant.other.symbol#F0D083
constant.numeric, constant.language, support.constant, constant.character.escape#B9C6FF
keyword, keyword.control, keyword.control.flow#FF7A3D
storage.type, entity.name.type, support.type, support.class, entity.name.class, entity.name.interface, entity.name.enum#C4B5FD
entity.name.function, support.function, meta.function-call, variable.function#7DD3FC
variable, variable.other.readwrite, meta.definition.variable.name#DDE3EA
variable.parameter, meta.parameters, storage.modifier, keyword.modifier#F6B47E
keyword.operator, punctuation.separator, punctuation.accessor#C3CBD6
punctuation, punctuation.section, meta.brace#939DAA
entity.name.tag, entity.name.tag.html, support.class.component#FF7A3D
entity.other.attribute-name, entity.other.attribute-name.html#F0D083
support.type.property-name.css, support.type.property-name.json, meta.object-literal.key, meta.property-name, variable.other.property#92E6D0