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#100D0B
  • activityBar.foreground#EFE8E0
  • activityBar.inactiveForeground#81746A
  • activityBarBadge.background#FF6A2A
  • activityBarBadge.foreground#151413
  • badge.background#FF6A2A
  • badge.foreground#151413
  • button.background#FF6A2A
  • button.foreground#151413
  • button.hoverBackground#FF7D45
  • dropdown.background#1D1915
  • dropdown.border#302821
  • editor.background#151413
  • editor.findMatchBackground#FF6A2A55
  • editor.findMatchHighlightBackground#FF6A2A2A
  • editor.foreground#E3DED7
  • editor.lineHighlightBackground#1C1A18
  • editor.selectionBackground#3A271B
  • editor.selectionHighlightBackground#FF6A2A22
  • editorBracketMatch.background#FF6A2A22
  • editorBracketMatch.border#FF6A2A
  • editorCursor.foreground#FF6A2A
  • editorGroup.border#241E19
  • editorGroupHeader.tabsBackground#100D0B
  • editorGutter.background#151413
  • editorIndentGuide.activeBackground1#FF6A2A66
  • editorIndentGuide.background1#292622
  • editorLineNumber.activeForeground#BDB1A6
  • editorLineNumber.foreground#4A4038
  • focusBorder#FF6A2A
  • icon.foreground#D4C9BE
  • input.background#1D1915
  • input.border#302821
  • input.foreground#E3DED7
  • list.activeSelectionBackground#2B231D
  • list.focusOutline#FF6A2A
  • list.highlightForeground#FF9A68
  • list.hoverBackground#241E19
  • list.inactiveSelectionBackground#211B16
  • panel.background#151413
  • panel.border#241E19
  • progressBar.background#FF6A2A
  • sideBar.background#151413
  • sideBar.border#24211E
  • sideBar.foreground#D4C9BE
  • sideBarSectionHeader.background#1A1816
  • sideBarSectionHeader.foreground#E3DED7
  • sideBarTitle.foreground#A99B8F
  • statusBar.background#100D0B
  • statusBar.border#241E19
  • statusBar.debuggingBackground#FF6A2A
  • statusBar.debuggingForeground#151413
  • statusBar.foreground#E3DED7
  • tab.activeBackground#151413
  • tab.activeBorderTop#FF6A2A
  • tab.activeForeground#F3EEE8
  • tab.border#241E19
  • tab.inactiveBackground#100D0B
  • tab.inactiveForeground#9C8E82
  • terminal.background#151413
  • terminal.foreground#E3DED7
  • terminalCursor.foreground#FF6A2A
  • titleBar.activeBackground#100D0B
  • titleBar.activeForeground#E3DED7
  • titleBar.inactiveBackground#100D0B
  • titleBar.inactiveForeground#81746A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8F8477italic
string, constant.other.symbol#E7C88E
constant.numeric, constant.language, support.constant, constant.character.escape#F2B8A2
keyword, keyword.control, keyword.control.flow#FF8A4D
storage.type, entity.name.type, support.type, support.class, entity.name.class, entity.name.interface, entity.name.enum#D7A875
entity.name.function, support.function, meta.function-call, variable.function#8FD3C7
variable, variable.other.readwrite, meta.definition.variable.name#E3DED7
variable.parameter, meta.parameters, storage.modifier, keyword.modifier#F0C28E
keyword.operator, punctuation.separator, punctuation.accessor#C9BEB2
punctuation, punctuation.section, meta.brace#9B8F84
entity.name.tag, entity.name.tag.html, support.class.component#FF9A68
entity.other.attribute-name, entity.other.attribute-name.html#E7C88E
support.type.property-name.css, support.type.property-name.json, meta.object-literal.key, meta.property-name, variable.other.property#B6D7C9
Blankill Theme by Blankill NetWork - VS Code Theme