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#1c1c1c
  • editor.findMatchBackground#00CC444f
  • editor.findMatchBorder#00CC4400
  • editor.findMatchHighlightBackground#0000CC4f
  • editor.findMatchHighlightBorder#0000CC00
  • editor.findRangeHighlightBackground#CC44004f
  • editor.findRangeHighlightBorder#CC440000
  • editor.foldBackground#88888833
  • editor.foreground#ffffff77
  • 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#ffffff88
  • editorGroup.border#88888800
  • editorGroup.dropBackground#88888800
  • editorGroupHeader.tabsBorder#88888800
  • editorGutter.addedBackground#33BB33
  • editorGutter.background#88888800
  • editorGutter.deletedBackground#FF3377
  • editorGutter.modifiedBackground#BB33FF
  • editorOverviewRuler.border#88888800
  • editorOverviewRuler.currentContentForeground#88888800
  • minimapGutter.addedBackground#33BB33
  • minimapGutter.deletedBackground#FF3377
  • minimapGutter.modifiedBackground#BB33FF
  • panel.border#88888800
  • sideBar.border#88888800
  • sideBarActivityBarTop.border#88888800
  • statusBar.background#88888811
  • statusBar.border#88888800
  • statusBar.foreground#ffffff
  • 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#686868
meta.attribute, meta.objectliteral.js#868686
string, function, entity.name.function, storage.type, punctuation, comment keyword#A4A4A4
support, variable, variable.other.object, variable.language.this, entity.other.attribute-name, meta.tag#C2C2C2
class, support.class, entity.name.class, keyword.operator, punctuation.definition.variable, meta.tag.structure#E1E1E1
constant, keyword, namespace, entity.other.attribute-name.namespace, heading, meta.tag.custom#FFFFFF