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#0b0b12
  • activityBar.inactiveForeground#fff4
  • activityBarBadge.background#fc593d
  • button.background#fc593d
  • editor.background#111118
  • editor.foreground#eff
  • editor.lineHighlightBackground#fff1
  • editor.lineHighlightBorder#0003
  • editor.selectionBackground#ca7bff44
  • editor.selectionHighlightBackground#fff2
  • editorBracketMatch.background#f3854635
  • editorBracketMatch.border#fff0
  • editorCursor.foreground#ffa33a
  • editorGroupHeader.noTabsBackground#111118
  • editorGroupHeader.tabsBackground#0d0d14
  • editorHoverWidget.background#111118
  • editorLineNumber.activeForeground#fff
  • editorLineNumber.foreground#fff3
  • list.activeSelectionBackground#0005
  • list.activeSelectionForeground#f38546
  • list.focusBackground#fff1
  • list.hoverBackground#fff1
  • menu.background#181825
  • menu.selectionBackground#fff1
  • menu.separatorBackground#0004
  • notificationCenter.border#000
  • notificationCenterHeader.background#0b0b12
  • notifications.background#0b0b12
  • notifications.border#0000
  • notifications.foreground#fff
  • sideBar.background#0d0d14
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#181825
  • statusBar.debuggingBackground#fc593d
  • tab.activeBackground#111118
  • tab.activeBorder#f38546
  • tab.border#0000
  • tab.inactiveBackground#0d0d14
  • titleBar.activeBackground#0b0b12
  • titleBar.inactiveBackground#0b0b12
  • titleBar.inactiveForeground#444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#525263italic
variable#eff
keyword.control, source.rust keyword.other, variable.language.super, keyword.operator.new, keyword.operator.expression#f38546italic
storage.modifier, storage.type, entity.other.attribute-name.class.css, keyword.other.unit#f36147
entity.name.tag, variable.other.constant#ca7bff
punctuation.definition.tag#ca7bffa0
string, storage.modifier.lifetime, entity.name.tag.wildcard, support.constant.property-value.css#c0f348
string.template#94cf46
constant.numeric, support.class.component, support.type.property-name.json#ff5c9a
variable.parameter, entity.other.attribute-name.pseudo-class.css, support.function.std.rust#34fa90italic
meta.object-literal.key#92c5ff
meta.definition variable.other.constant, meta.definition variable, entity.name.type.instance.jsdoc#6eb2ff
variable.language, entity.other.attribute-name, storage.type.class.jsdoc, meta.attribute.rust#2495f1italic
constant.language, entity.name.type, support.variable.property, support.constant, constant.character.entity, storage.class#ff5765italic
variable.other.property, variable.other.object.property, support.class#9dcbff
keyword.operator.assignment, keyword.operator.arithmetic, punctuation.terminator, punctuation.accessor, keyword.operator, punctuation.separator, punctuation.definition.bracket.curly, support.type.property-name.css, punctuation.definition.template-expression, punctuation.definition.tag.begin.svelte, punctuation.definition.tag.end.svelte, meta.tag.other, punctuation.definition.block.sequence.item.yaml#b3d0ff
entity.name.function, entity.other.inherited-class, meta.definition.method, support.function, keyword.other.special-method#ffc955
meta.definition entity.name.functionitalic