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#04111C
  • activityBar.foreground#E3F0FA
  • activityBar.inactiveForeground#6F8799
  • activityBarBadge.background#FF6A2A
  • activityBarBadge.foreground#071A2A
  • badge.background#FF6A2A
  • badge.foreground#071A2A
  • button.background#FF6A2A
  • button.foreground#071A2A
  • button.hoverBackground#FF7D45
  • dropdown.background#0A2032
  • dropdown.border#17344B
  • editor.background#071A2A
  • editor.findMatchBackground#FF6A2A55
  • editor.findMatchHighlightBackground#FF6A2A2A
  • editor.foreground#D9E7F2
  • editor.lineHighlightBackground#0B2235
  • editor.selectionBackground#17344B
  • editor.selectionHighlightBackground#FF6A2A24
  • editorBracketMatch.background#FF6A2A22
  • editorBracketMatch.border#FF6A2A
  • editorCursor.foreground#FF6A2A
  • editorGroup.border#0C2436
  • editorGroupHeader.tabsBackground#04111C
  • editorGutter.background#071A2A
  • editorIndentGuide.activeBackground1#FF6A2A66
  • editorIndentGuide.background1#123047
  • editorLineNumber.activeForeground#A7C2D8
  • editorLineNumber.foreground#36536A
  • focusBorder#FF6A2A
  • icon.foreground#C6D7E4
  • input.background#0A2032
  • input.border#17344B
  • input.foreground#D9E7F2
  • list.activeSelectionBackground#112C42
  • list.focusOutline#FF6A2A
  • list.highlightForeground#FF9A68
  • list.hoverBackground#0D263A
  • list.inactiveSelectionBackground#0A2032
  • panel.background#061522
  • panel.border#0C2436
  • progressBar.background#FF6A2A
  • sideBar.background#061522
  • sideBar.border#0C2436
  • sideBar.foreground#C6D7E4
  • sideBarSectionHeader.background#081C2D
  • sideBarSectionHeader.foreground#D9E7F2
  • sideBarTitle.foreground#8FA9BC
  • statusBar.background#04111C
  • statusBar.border#0C2436
  • statusBar.debuggingBackground#FF6A2A
  • statusBar.debuggingForeground#071A2A
  • statusBar.foreground#D9E7F2
  • tab.activeBackground#071A2A
  • tab.activeBorderTop#FF6A2A
  • tab.activeForeground#F0F8FF
  • tab.border#0C2436
  • tab.inactiveBackground#061522
  • tab.inactiveForeground#8FA9BC
  • terminal.background#071A2A
  • terminal.foreground#D9E7F2
  • terminalCursor.foreground#FF6A2A
  • titleBar.activeBackground#04111C
  • titleBar.activeForeground#D9E7F2
  • titleBar.inactiveBackground#04111C
  • titleBar.inactiveForeground#6F8799

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#728EA3italic
string, constant.other.symbol#A6E9FF
constant.numeric, constant.language, support.constant, constant.character.escape#FFD08A
keyword, keyword.control, keyword.control.flow#FF9A68
storage.type, entity.name.type, support.type, support.class, entity.name.class, entity.name.interface, entity.name.enum#B9C6FF
entity.name.function, support.function, meta.function-call, variable.function#7DD3FC
variable, variable.other.readwrite, meta.definition.variable.name#D9E7F2
variable.parameter, meta.parameters, storage.modifier, keyword.modifier#C8D7FF
keyword.operator, punctuation.separator, punctuation.accessor#A8B7C5
punctuation, punctuation.section, meta.brace#8FA9BC
entity.name.tag, entity.name.tag.html, support.class.component#FF9A68
entity.other.attribute-name, entity.other.attribute-name.html#FFD08A
support.type.property-name.css, support.type.property-name.json, meta.object-literal.key, meta.property-name, variable.other.property#A7F3D0