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#000000
  • activityBar.foreground#F0F3F6
  • activityBar.inactiveForeground#6E7681
  • activityBarBadge.background#FF6A2A
  • activityBarBadge.foreground#0B0B0B
  • badge.background#FF6A2A
  • badge.foreground#0B0B0B
  • button.background#FF6A2A
  • button.foreground#0B0B0B
  • button.hoverBackground#FF7D45
  • dropdown.background#0A0A0A
  • dropdown.border#202020
  • editor.background#000000
  • editor.findMatchBackground#FF6A2A55
  • editor.findMatchHighlightBackground#FF6A2A2A
  • editor.foreground#E6EDF3
  • editor.lineHighlightBackground#0A0A0A
  • editor.selectionBackground#3A2014
  • editor.selectionHighlightBackground#FF6A2A22
  • editorBracketMatch.background#FF6A2A22
  • editorBracketMatch.border#FF6A2A
  • editorCursor.foreground#FF6A2A
  • editorGroup.border#111111
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.background#000000
  • editorIndentGuide.activeBackground1#FF6A2A66
  • editorIndentGuide.background1#171717
  • editorLineNumber.activeForeground#ADB6C2
  • editorLineNumber.foreground#2D333B
  • focusBorder#FF6A2A
  • icon.foreground#C9D1D9
  • input.background#0A0A0A
  • input.border#202020
  • input.foreground#E6EDF3
  • list.activeSelectionBackground#151515
  • list.focusOutline#FF6A2A
  • list.highlightForeground#FF6A2A
  • list.hoverBackground#101010
  • list.inactiveSelectionBackground#0D0D0D
  • panel.background#000000
  • panel.border#111111
  • progressBar.background#FF6A2A
  • sideBar.background#000000
  • sideBar.border#111111
  • sideBar.foreground#C9D1D9
  • sideBarSectionHeader.background#050505
  • sideBarSectionHeader.foreground#E6EDF3
  • sideBarTitle.foreground#9CA6B3
  • statusBar.background#000000
  • statusBar.border#111111
  • statusBar.debuggingBackground#FF6A2A
  • statusBar.debuggingForeground#0B0B0B
  • statusBar.foreground#DCE3EA
  • tab.activeBackground#000000
  • tab.activeBorderTop#FF6A2A
  • tab.activeForeground#F3F6FA
  • tab.border#111111
  • tab.inactiveBackground#080808
  • tab.inactiveForeground#8B949E
  • terminal.background#000000
  • terminal.foreground#E6EDF3
  • terminalCursor.foreground#FF6A2A
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#E6EDF3
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#6E7681

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E7681italic
string, constant.other.symbol#F2D17D
constant.numeric, constant.language, support.constant, constant.character.escape#B7C7FF
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#C9B8FF
entity.name.function, support.function, meta.function-call, variable.function#7DD3FC
variable, variable.other.readwrite, meta.definition.variable.name#E6EDF3
variable.parameter, meta.parameters, storage.modifier, keyword.modifier#F4A261
keyword.operator, punctuation.separator, punctuation.accessor#BAC2CF
punctuation, punctuation.section, meta.brace#8B949E
entity.name.tag, entity.name.tag.html, support.class.component#FF7A3D
entity.other.attribute-name, entity.other.attribute-name.html#F2D17D
support.type.property-name.css, support.type.property-name.json, meta.object-literal.key, meta.property-name, variable.other.property#8EE6CF
Blankill Theme by Blankill NetWork - VS Code Theme