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.border#88888800
  • breadcrumb.background#88888800
  • debugToolBar.border#88888800
  • editor.background#f3f3f3
  • editor.findMatchBackground#88CC884f
  • editor.findMatchBorder#88CC8800
  • editor.findMatchHighlightBackground#8888CC4f
  • editor.findMatchHighlightBorder#8888CC00
  • editor.findRangeHighlightBackground#CC88884f
  • editor.findRangeHighlightBorder#CC888800
  • editor.foldBackground#88888833
  • editor.foreground#00000077
  • editor.inactiveSelectionBackground#CC008899
  • editor.minimap.background#88888800
  • editor.selectionBackground#CC008877
  • editor.selectionHighlightBackground#CC00884f
  • editor.wordHighlightBackground#00CC444f
  • editor.wordHighlightBorder#00CC4400
  • editor.wordHighlightStrongBackground#0000CC4f
  • editor.wordHighlightStrongBorder#0000CC00
  • editorBracketMatch.border#00000000
  • editorCursor.foreground#00000088
  • editorGroup.border#88888800
  • editorGroup.dropBackground#88888800
  • editorGroupHeader.tabsBorder#88888800
  • editorGutter.addedBackground#44CC44
  • editorGutter.background#88888800
  • editorGutter.deletedBackground#CC0044
  • editorGutter.modifiedBackground#4488FF
  • editorOverviewRuler.border#88888800
  • editorOverviewRuler.currentContentForeground#88888800
  • minimapGutter.addedBackground#44CC44
  • minimapGutter.deletedBackground#CC0044
  • minimapGutter.modifiedBackground#4488FF
  • panel.border#88888800
  • sideBar.border#88888800
  • sideBarActivityBarTop.border#88888800
  • statusBar.background#88888811
  • statusBar.border#88888800
  • statusBar.foreground#000000
  • statusBar.noFolderBorder#88888800
  • tab.border#88888800
  • titleBar.border#88888800
  • tree.indentGuidesStroke#88888800

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment punctuation#A2A2A2
meta.attribute, meta.objectliteral.js#828282
string, function, entity.name.function, storage.type, punctuation, comment keyword#616161
support, variable, variable.other.object, variable.language.this, entity.other.attribute-name, meta.tag#414141
class, support.class, entity.name.class, keyword.operator, punctuation.definition.variable, meta.tag.structure#202020
constant, keyword, namespace, entity.other.attribute-name.namespace, heading, meta.tag.custom#000000