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#eeeeee
  • activityBar.foreground#808080
  • activityBarBadge.background#3e82f8
  • badge.background#3e82f8
  • editor.background#ffffff
  • editor.findMatchBackground#f2ea01
  • editor.findMatchHighlightBackground#f2ea0163
  • editor.findRangeHighlightBackground#0000ff
  • editor.foreground#222222
  • editor.lineHighlightBackground#94949455
  • editor.selectionBackground#b2d6ff
  • editor.selectionForeground#000000
  • editorCursor.foreground#4d4d4c
  • editorGroupHeader.noTabsBackground#f3f3f3
  • editorGroupHeader.tabsBackground#f3f3f3
  • editorIndentGuide.background#aaaaaa
  • editorLineNumber.foreground#808080
  • editorWhitespace.foreground#f3f3f3
  • statusBar.background#f3f3f3
  • statusBar.foreground#5a5a5a
  • statusBar.noFolderBackground#f3f3f3
  • statusBar.noFolderForeground#5a5a5a
  • tab.activeBackground#ffffff
  • tab.inactiveBackground#f3f3f3
  • terminal.ansiBlack#222222
  • terminal.ansiBrightBlack#222222
  • terminal.ansiBrightRed#c80000
  • terminal.ansiRed#c80000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#222222ff—
variable.parameter.function#4d4d4c—
comment, punctuation.definition.comment#949494—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#4d4d4c—
none#4d4d4c—
keyword.operator#4d4d4c—
keyword#d7005f—
variable#8959a8—
entity.name.function, meta.require, support.function.any-method#005f87—
support.class, entity.name.class, entity.name.type.class#d75f00—
meta.class#262626—
keyword.other.special-method#005f87—
storage#d7005f—
support.function#3e999f—
string, constant.other.symbol, entity.other.inherited-class#718c00—
constant.numeric#d75f00—
none#d75f00—
none#d75f00—
constant#d75f00—
entity.name.tag#8959a8—
entity.other.attribute-name#d75f00—
entity.other.attribute-name.id, punctuation.definition.entity#005f87—
meta.selector#d7005f—
none#d75f00—
markup.heading punctuation.definition.heading, entity.name.section#005f87
keyword.other.unit#d75f00—
markup.bold, punctuation.definition.bold#d75f00bold
markup.italic, punctuation.definition.italic#d7005fitalic
markup.raw.inline#718c00—
string.other.link#8959a8—
meta.link#d75f00—
markup.list#8959a8—
markup.quote#d75f00—
meta.separator#4d4d4c—
markup.inserted#718c00—
markup.deleted#8959a8—
markup.changed#d7005f—
constant.other.color#3e999f—
string.regexp#3e999f—
constant.character.escape#3e999f—
punctuation.section.embedded, variable.interpolation#df0000—
invalid.illegal#f3f3f3—
invalid.broken#262626—
invalid.deprecated#f3f3f3—
invalid.unimplemented#262626—
markup.heading.markdown.punctuation.definition, markdown.entity.name.section#d70087bold
markup.markdown.meta.paragraph.inline#5f8700—
markdown.meta.separator#bcbcbc—
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#508aaa—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#508aaa—
markup.italic.markdown—italic
markup.bold.markdown—bold
markup.deleted.git_gutter#e61f44—
markup.inserted.git_gutter#a7da1e—
markup.changed.git_gutter#f7b83d—
token.info-token#316bcd—
token.warn-token#cd9731—
token.error-token#cd3131—
token.debug-token#800080—
support.function#222—
keyword.operator#994500—
storage#ac1391—
keyword.operator.new#ac1391—
keyword#ac1391—
variable#3134b1—
constant#ab0d8f—
string.quoted.double.html#1154cc—
string#c61816—
punctuation.definition.string.begin.js#c61816—
punctuation.definition.string.end.js#c61816—
punctuation.definition.string.begin.ts#c61816—
punctuation.definition.string.end.ts#c61816—
punctuation.definition.string.begin.html#a894a6—
punctuation.definition.string.end.html#a894a6—
meta.tag.inline.any#a894a6—
entity.other.attribute-name.html#994500—
entity.name.tag#871280—
meta.tag.sgml.doctype#c0c0c0—
punctuation.definition.tag.html#a894a6—
comment#236e26—
punctuation.definition.comment#236e26—
invalid.illegal.expected-dictionary-separator#FF0000—
punctuation.definition.string.begin.css#c61816—
punctuation.definition.string.end.css#c61816—
keyword.operator.pattern.css#222—
entity.other.attribute-name.css#222—
support.constant.font-name.css#07909A—
keyword.other.important.css#07909A—
support.function.calc.css#07909A—
entity.other.attribute-name.class#222—
entity.name.tag#222—
support.constant.property-value#07909A—
support.function.misc.css#07909A—
entity.other.attribute-name.pseudo-class.css#222—
punctuation.definition.entity.css#222—
punctuation.section.function.begin.bracket.round.css#222—
punctuation.section.function.end.bracket.round.css#222—
constant.numeric.css#3200FF—
keyword.other.unit#3200FF—
support.type.property-name#C80000—
support.type.vendored.property-name.css#C80000—
invalid.deprecated.color.system.css#07909A—
meta.property-value.css#C80000—
support.function.timing-function.css#C80000—
punctuation.separator.list.comma.css#222—
constant.numeric#1B00D4—
constant.character.escape#c61816—
entity.name.function#222—
variable.other.object#3134b1—
support.class#222—
punctuation.definition.string.begin.tsx#c61816—
punctuation.definition.string.end.tsx#c61816—
entity.name.type.class#3134b1—
entity.other.inherited-class#222—
variable.language.super#ac1391—
variable.language.this#ac1391—
variable.other.property#222—
variable.other.object.property#222—
entity.other.attribute-name#994500—
support.class.component#871280—
punctuation.definition.string.begin.css#c61816—
punctuation.definition.string.end.css#c61816—
keyword.operator.pattern.css#222—
entity.other.attribute-name.css#222—
support.constant.font-name.css#07909A—
keyword.other.important.css#07909A—
support.function.calc.css#07909A—
entity.other.attribute-name.class#222—
entity.name.tag#222—
support.constant.property-value#07909A—
support.function.misc.css#07909A—
entity.other.attribute-name.pseudo-class.css#222—
punctuation.definition.entity.css#222—
punctuation.section.function.begin.bracket.round.css#222—
punctuation.section.function.end.bracket.round.css#222—
constant.numeric.css#3200FF—
keyword.other.unit#3200FF—
support.type.property-name#C80000—
support.type.vendored.property-name.css#C80000—
invalid.deprecated.color.system.css#07909A—
meta.property-value.css#C80000—
support.function.timing-function.css#C80000—
punctuation.separator.list.comma.css#222—
constant.numeric#1B00D4—
constant.character.escape#c61816—
entity.name.function#222—
variable.other.object#3134b1—
support.class#222—
punctuation.definition.string.begin.tsx#c61816—
punctuation.definition.string.end.tsx#c61816—
entity.name.type.class#3134b1—
entity.other.inherited-class#222—
variable.language.super#ac1391—
variable.language.this#ac1391—
variable.other.property#222—
variable.other.object.property#222—
entity.other.attribute-name#994500—
support.class.component#871280—