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#d8e5d8
  • activityBar.foreground#5e6e5e
  • activityBarBadge.background#909990
  • button.background#909990
  • button.foreground#5e6e5e
  • dropdown.background#d8e5d8
  • dropdown.foreground#5e6e5e
  • editor.background#f0fff0
  • editor.foreground#5e6e5e
  • editor.lineHighlightBackground#80998055
  • editor.selectionBackground#cfe8cf
  • editorCursor.foreground#5e6e5e
  • editorGroup.background#d8e5d8
  • editorGroup.border#5e6e5e
  • editorGroup.dropBackground#cfe8cf
  • editorGroupHeader.tabsBackground#d8e5d8
  • editorWhitespace.foreground#cfe8cf
  • list.activeSelectionBackground#d8e5d8
  • list.dropBackground#d8e5d8
  • list.focusBackground#d8e5d8
  • list.hoverBackground#d8e5d8
  • list.inactiveSelectionBackground#d8e5d8
  • notification.background#5e6e5e
  • sideBar.background#f3fff3
  • sideBarTitle.foreground#5e6e5e
  • statusBar.background#d8e5d8
  • statusBar.debuggingBackground#909990
  • statusBar.foreground#5e6e5e
  • statusBar.noFolderBackground#909990
  • statusBarItem.prominentBackground#a8b2a8
  • statusBarItem.prominentHoverBackground#a8b2a899
  • tab.activeBackground#f0fff0
  • tab.inactiveBackground#d8e5d8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#5e6e5e
variable.parameter.function#5e6e5e
comment, punctuation.definition.comment#809980
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#5e6e5e
none#5e6e5e
keyword.operator#5e6e5e
keyword#ad2bee
variable#e6193c
entity.name.function, meta.require, support.function.any-method#3d62f5
support.class, entity.name.class, entity.name.type.class#87711d
meta.class#242924
keyword.other.special-method#3d62f5
storage#ad2bee
support.function#1999b3
string, constant.other.symbol, entity.other.inherited-class#29a329
constant.numeric#87711d
none#87711d
none#87711d
constant#87711d
entity.name.tag#e6193c
entity.other.attribute-name#87711d
entity.other.attribute-name.id, punctuation.definition.entity#3d62f5
meta.selector#ad2bee
none#87711d
markup.heading punctuation.definition.heading, entity.name.section#3d62f5
keyword.other.unit#87711d
markup.bold, punctuation.definition.bold#87711dbold
markup.italic, punctuation.definition.italic#ad2beeitalic
markup.raw.inline#29a329
string.other.link#e6193c
meta.link#87711d
markup.list#e6193c
markup.quote#87711d
meta.separator#5e6e5e
markup.inserted#29a329
markup.deleted#e6193c
markup.changed#ad2bee
constant.other.color#1999b3
string.regexp#1999b3
constant.character.escape#1999b3
punctuation.section.embedded, variable.interpolation#e619c3
invalid.illegal#f0fff0
invalid.broken#131513
invalid.deprecated#f0fff0
invalid.unimplemented#131513