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.background#121315
  • activityBar.border#00000000
  • activityBar.foreground#e4e6eb
  • badge.background#a78bfa
  • badge.foreground#121315
  • editor.background#121315
  • editor.foreground#e4e6eb
  • editor.inactiveSelectionBackground#1c263EE6
  • editor.lineHighlightBackground#1a1e26
  • editor.selectionBackground#223048E6
  • editor.selectionHighlightBackground#283656E6
  • editorBracketHighlight.foreground1#34d399
  • editorBracketHighlight.foreground2#a78bfa
  • editorBracketHighlight.foreground3#7aa2f7
  • editorCursor.foreground#34d399
  • editorError.foreground#e06c75
  • editorIndentGuide.activeBackground1#242b33
  • editorIndentGuide.background1#1b2127
  • editorInfo.foreground#7aa2f7
  • editorLineNumber.activeForeground#e4e6eb
  • editorLineNumber.foreground#7b7f87
  • editorWarning.foreground#f59e0b
  • foreground#e4e6eb
  • panel.border#00000000
  • sideBar.background#121315
  • sideBar.border#00000000
  • sideBar.foreground#e4e6eb
  • statusBar.background#121315
  • statusBar.border#00000000
  • statusBar.foreground#e4e6eb
  • tab.activeBackground#151a21
  • tab.activeForeground#e4e6eb
  • tab.border#00000000
  • tab.inactiveBackground#0f1318
  • tab.inactiveForeground#7b7f87
  • terminal.background#121315
  • terminal.foreground#e4e6eb
  • titleBar.activeBackground#121315
  • titleBar.activeForeground#e4e6eb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b7280italic
punctuation, punctuation.separator, punctuation.terminator, meta.brace#99a1a9
string, string.quoted, string.template, string.interpolated#c9c9d6
constant.numeric, constant.language, constant.character, constant.other#94d9d6
keyword, storage, storage.type, keyword.operator#aab0b6
entity.name.function, support.function, meta.function-call, variable.function#34d399
entity.name.type, support.type, entity.name.class, support.class#7aa2f7
entity.name.type.interface, support.type.interface#a78bfa
meta.decorator, meta.annotation, storage.type.annotation#a78bfa
entity.name.tag, meta.tag.js, meta.tag.tsx, meta.jsx, support.class.component#7aa2f7
entity.other.attribute-name, meta.tag.attribute#a78bfa
support.type.property-name.json, meta.object-literal.key#64ffda
entity.name.tag.xml, entity.other.attribute-name.xml#7aa2f7