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