Skip to main content
CodingTheme

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.

  • editor.background#333333
  • editor.foreground#c5c8c6
  • editor.lineHighlightBackground#99dbff0a
  • editor.selectionBackground#99dbff26
  • editorCursor.foreground#8abeb7
  • editorWhitespace.foreground#c5c8c646
  • statusBar.background#818181
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#81a2be
  • terminal.ansiBrightBlack#7a7a7a
  • terminal.ansiBrightBlue#99dbff
  • terminal.ansiBrightCyan#8abeb7
  • terminal.ansiBrightGreen#b5bd68
  • terminal.ansiBrightMagenta#b294bb
  • terminal.ansiBrightRed#cc6666
  • terminal.ansiBrightWhite#c5c8c6
  • terminal.ansiBrightYellow#f0c674
  • terminal.ansiCyan#5e8d87
  • terminal.ansiGreen#8c9440
  • terminal.ansiMagenta#85678f
  • terminal.ansiRed#a54242
  • terminal.ansiWhite#6c7a80
  • terminal.ansiYellow#de935f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#c5c8c6
comment#818181italic
string#b5bd68
constant.numeric#de935f
constant.language#de935f
constant.character, constant.other#de935f
keyword, storage.modifier.async#b294bb
storage#c5c8c6
meta.brace.round#8abeb7
keyword.operator#8abeb7
storage.type#b294bb
storage.type.function#8abeb7
entity.name.class#a6e22e
entity.other.inherited-class, entity.name.type.module#81a2beitalic
entity.name.function#81a2be
variable.parameter#de935fbb
entity.name.tag#de935f
entity.other.attribute-name#81a2be
support.function#81a2be
support.constant
support.class#de935f
support.variable.dom#de935f
invalid#f8f8f0
invalid.deprecated#f8f8f0
support.variable.object, support.variable.property#de935f
meta.brace.square, punctuation.definition.block, punctuation.definition.template-expression, punctuation.definition.typeparameters, punctuation.definition.string.template, punctuation.section.embedded, punctuation.definition.binding-pattern#f0c674
storage.modifier, storage.type.class.js#f0c674
variable.language.this.js#818181italic
variable.language.super.js#f0c674
punctuation.definition.parameters#b5bd68
meta.type.annotation, meta.return.type, meta.type.parameters#cc6666
string.template variable.other, string.template punctuation.accessor#c5c8c6bb
string.regexp punctuation.definition#f0c674
string.regexp meta.group, string.regexp keyword.other.back-reference#c5c8c6bb
string.regexp meta.assertion, string.regexp keyword.operator#de935f
string.regexp constant.other#81a2be
string.regexp constant.character#99dbff
string.regexp keyword.control.anchor#cc6666
source.properties#de935f
entity.name.section.group-title.properties#81a2be
punctuation.separator.key-value, punctuation.separator.dictionary.key-value#8abeb7
entity.name.tag.yaml#81a2be
meta.attribute-selector, punctuation.section.property-list#f0c674
punctuation.separator.operator#8abeb7
punctuation.terminator.rule, punctuation.terminator.statement#8abeb7
meta.selector#8abeb7
keyword.other.unit#de935f
meta.property-value#818181
keyword.other.important#cc6666
meta.at-rule.media#818181
support.type.property-name.media
meta.tag.sgml.html#cc6666
meta.tag.inline.any.html, meta.tag.structure.any.html, meta.tag.block.any.html, meta.tag.any.html#8abeb7
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.xml#818181
entity.name.section.markdown#b294bb
punctuation.definition.heading.markdown#f0c674
punctuation.definition.heading.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, beginning.punctuation.definition.list.markdown, punctuation.definition.raw.markdown#818181
punctuation.definition.constant.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown#f0c674
fenced_code.block.language#cc6666
markup.italic.markdown#c5c8c6italic
markup.bold.markdown#c5c8c6bold
meta.link.inline.markdown, markup.underline.link.markdown#81a2be
markup.quote.markdown#b5bd6888
markup.list.unnumbered.markdown#b5bd68dd
markup.list.numbered.markdown#b5bd68aa
constant.other.reference.link.markdown#cc6666
meta.tag.preprocessor.xml, meta.tag.xml#8abeb7
punctuation.definition.dictionary#f0c674
punctuation.support.type.property-name, punctuation.definition.string#818181
support.type.property-name.json#81a2be
punctuation.separator.dictionary.pair.json, punctuation.separator.parameter.js, punctuation.separator.comma.js#8abeb7
punctuation.definition.array.begin.json, punctuation.definition.array.end.json#cc6666
source.graphql meta.variables, source.graphql meta.arguments#c5c8c6bb
source.graphql variable.arguments#de935fbb
source.graphql constant#de935f
source.graphql variable.fragment, source.graphql entity.name.fragment#99dbff
source.graphql entity.name.function.directive#b5bd68aa
source.graphql support.type#cc6666
source.graphql punctuation.operation, source.graphql meta.brace.round#f0c674
source.graphql keyword.operator#f0c674
source.graphql punctuation.colon, source.graphql punctuation.comma#8abeb7
source.reason entity.name.class#de935f
source.reason entity.name.tag.inline.any#de935fbb
source.reason markup.inserted constant.language#c5c8c6bb
source.reason support.type string.regexp#cc6666
source.reason keyword.control#8abeb7
source.reason constant.numeric#99dbff
meta.interpolation.cs variable.other.object.cs, meta.interpolation.cs variable.other.object.property.cs, meta.interpolation.cs variable.other.readwrite.cs#c5c8c6
token.info-token#81a2be
token.warn-token#de935f
token.error-token#a54242
token.debug-token#85678f

Shiki preview

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

Loading...

Hybrid Next by Neil Kistner - VS Code Theme