Skip to main content
Coding Theme

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#000000
  • activityBar.foreground#a0a0a0
  • activityBarBadge.background#3c3c3c
  • editor.background#000000
  • editor.findMatchBackground#ffff0055
  • editor.findMatchForeground#ffffff
  • editor.findMatchHighlightBackground#5555ff55
  • editor.findMatchHighlightForeground#ffffffcc
  • editor.lineHighlightBackground#33333333
  • editor.selectionBackground#66666666
  • editor.wordHighlightBackground#1c1c2c88
  • editor.wordHighlightStrongBackground#1c1c2c88
  • editorBracketHighlight.foreground1#a0a0a0
  • editorBracketHighlight.foreground2#1c1cff
  • editorBracketHighlight.foreground3#a0a0a0
  • editorBracketHighlight.foreground4#1c1cff
  • editorBracketHighlight.foreground5#a0a0a0
  • editorBracketHighlight.foreground6#1c1cff
  • editorGroupHeader.tabsBackground#000000
  • editorIndentGuide.activeBackground1#4c4c4c
  • editorLineNumber.foreground#444b6a
  • editorSuggestWidget.background#080808
  • editorSuggestWidget.focusHighlightForeground#3c3cff
  • editorSuggestWidget.highlightForeground#3c3cff
  • editorSuggestWidget.selectedBackground#2c2c2c
  • editorWidget.background#0c0c0c
  • input.background#0c0c0c
  • list.inactiveSelectionBackground#1c1c1c
  • scrollbarSlider.background#44444444
  • sideBar.background#000000
  • sideBarSectionHeader.background#000000
  • sideBarTitle.foreground#3c3c3c
  • statusBar.background#0c0c0c
  • statusBar.noFolderBackground#0c0c0c
  • tab.activeBackground#0c0c0c
  • tab.activeBorder#6c6c6c
  • tab.inactiveBackground#000000
  • titleBar.activeBackground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#a0a0a0—
variable.parameter.function#a0a0a0—
comment, punctuation.definition.comment#444b6a—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#a0a0a0—
none#a0a0a0—
keyword.operator#a0a0a0—
keyword#8855ff—
variable#a0a0a0—
entity.name.function, meta.require, support.function.any-method#5555cc—
entity.name.label#5DE4C7—
support.class, entity.name.class, entity.name.type.class#999900—
meta.class#ffffff—
keyword.other.special-method#5555cc—
storage#8855ff—
support.function#5FB3A1—
string, constant.other.symbol, entity.other.inherited-class#009900—
constant.numeric#ff0000—
none#ff0000—
none#ff0000—
constant#ff0000—
entity.name.tag, entity.name#990000—
entity.other.attribute-name#ff0000—
entity.other.attribute-name.id, punctuation.definition.entity#5555cc—
meta.selector#8855ff—
none#ff0000—
markup.heading punctuation.definition.heading, entity.name.section, markup.heading - text.html.markdown#5555cc
keyword.other.unit#ff0000—
markup.bold, punctuation.definition.bold#999900bold
markup.italic, punctuation.definition.italic#8855ffitalic
markup.raw.inline#009900—
string.other.link, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown#990000—
meta.link#ff0000—
markup.quote#ff0000—
meta.separator#a0a0a0—
markup.inserted#009900—
markup.deleted#990000—
markup.changed#8855ff—
constant.other.color#5FB3A1—
string.regexp#5FB3A1—
constant.character.escape#5FB3A1—
punctuation.section.embedded, variable.interpolation#8855ff—
invalid.illegal#ffffff—
invalid.broken#3c3c3c—
invalid.deprecated#ffffff—
invalid.unimplemented#ffffff—
RetroNvim by YeferYV - VS Code Theme