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#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.markdownitalic
markup.bold.markdownbold
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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Chrome Dev Tools - Coding Theme