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.

  • activityBar.background#e7e7e7
  • activityBar.foreground#999999
  • background#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#86baff80
  • editor.findMatchHighlightBackground#fccbdf80
  • editor.findRangeHighlightBackground#fccbdf80
  • editor.foreground#000000
  • editor.hoverHighlightBackground#24a0ff50
  • editor.inactiveSelectionBackground#86baff80
  • editor.lineHighlightBackground#cccccc40
  • editor.rangeHighlightBackground#cccccc40
  • editor.selectionBackground#86baff80
  • editor.wordHighlightBackground#99999980
  • editor.wordHighlightStrongBackground#99999980
  • editorBracketHighlight.foreground1#952577
  • editorBracketHighlight.foreground2#bb5700
  • editorBracketHighlight.foreground3#86a000
  • editorBracketHighlight.foreground4#bb0000
  • editorBracketHighlight.foreground5#009ba5
  • editorBracketHighlight.foreground6#b58a00
  • editorBracketHighlight.unexpectedBracket.foreground#d7372d
  • editorHint.border#d7372d
  • editorHint.foreground#00000000
  • editorIndentGuide.background#cccccc80
  • editorLineNumber.foreground#999999
  • editorLink.activeForeground#1685ff
  • editorMarkerNavigationError.background#d7372d
  • editorMarkerNavigationWarning.background#e2951d
  • foreground#000000
  • list.dropBackground#cccccc
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0f57a0
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#1685ff
  • terminal.ansiBrightCyan#37bfc2
  • terminal.ansiBrightGreen#86a000
  • terminal.ansiBrightMagenta#bf56a6
  • terminal.ansiBrightRed#d7372d
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#b58a00
  • terminal.ansiCyan#009ba5
  • terminal.ansiGreen#099009
  • terminal.ansiMagenta#952577
  • terminal.ansiRed#bb0000
  • terminal.ansiWhite#777777
  • terminal.ansiYellow#bb5700

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#009ba5
comment#099009
constant#86a000
constant.character.escape.line-continuation#999999
meta.tag.sgml.doctype.html#952577
entity.name.tag#009ba5
entity.other.attribute-name#b58a00
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.class.mixin, entity.other.attribute-name.attribute, meta.property-name.css#bb5700
entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#bb0000
keyword.other.unit#952577
keyword.other.unit.hexadecimal#708600
keyword.other.important#952577
invalid#cd2424bold
markup.underlineunderline
markup.bold#bb5700bold
markup.heading#009ba5bold
markup.italic#bb5700italic
markup.inserted#1685ff
markup.deleted#d7372d
markup.changed#e2951d
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, fenced_code.block.language.markdown, meta.link.reference.markdown, punctuation.definition.markdown, punctuation.definition.bold.markdown, punctuation.definition.constant.markdown, punctuation.definition.heading.markdown, punctuation.definition.italic.markdown, punctuation.definition.link.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.separator.key-value.markdown#555555
markup.raw.block.markdown#555555
markup.quote.markdown#099009
string.other.link.title.markdown, string.other.link.description.markdown#b58a00
constant.other.reference.link.markdown#009ba5
markup.underline.link.markdown, markup.underline.link.image.markdown#bb0000normal
markup.inline.raw#86a000
meta.selector#b58a00
punctuation.definition.tag#555555
meta.preprocessor#b58a00
meta.preprocessor.macro, entity.name.function.preprocessor#bb5700
meta.preprocessor.string#bb0000
meta.preprocessor.numeric#86a000
meta.structure.dictionary.key.python#009ba5
meta.diff.header#555555
storage#b58a00
storage.type#009ba5
string#bb0000
punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts#009ba5
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less#b58a00
keyword#b58a00
punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php#009ba5
storage.modifier.import.java, storage.modifier.package.java#952577
variable.language#b58a00
entity.name.function, support.function, support.constant.handlebars, meta.function-call.generic#009ba5
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#009ba5
meta.return.type, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#009ba5
keyword.control#b58a00
variable, meta.definition.variable.name, support.variable#bb5700
meta.object-literal.key, meta.object-literal.key entity.name.function#bb5700
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#bb5700
punctuation.definition.comment.line.shebang.shell#099009
string.interpolated.backtick.shell, comment.line.shebang.shell#86a000
support.function.builtin.shell#952577
punctuation.definition.variable.shell#b58a00
storage.type.class.jsdoc, entity.name.type.instance.jsdoc#005e00
variable.other.jsdoc#86a000

Shiki preview

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

Loading...