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.

  • background#222222
  • editor.background#222222
  • editor.findMatchBackground#3160a680
  • editor.findMatchHighlightBackground#5e314480
  • editor.findRangeHighlightBackground#5e314480
  • editor.foreground#dcdcd0
  • editor.hoverHighlightBackground#1c8dff50
  • editor.inactiveSelectionBackground#3160a680
  • editor.lineHighlightBackground#3c3c3c80
  • editor.rangeHighlightBackground#3c3c3c80
  • editor.selectionBackground#3160a680
  • editor.wordHighlightBackground#58585880
  • editor.wordHighlightStrongBackground#58585880
  • editorBracketHighlight.foreground1#bf86a5
  • editorBracketHighlight.foreground2#dfaf8f
  • editorBracketHighlight.foreground3#c5d47f
  • editorBracketHighlight.foreground4#cc9393
  • editorBracketHighlight.foreground5#8cd0d3
  • editorBracketHighlight.foreground6#f0dfaf
  • editorBracketHighlight.unexpectedBracket.foreground#dc7363
  • editorHint.border#dc7363
  • editorHint.foreground#00000000
  • editorIndentGuide.background#3c3c3c80
  • editorLineNumber.foreground#585858
  • editorLink.activeForeground#5fa7ef
  • editorMarkerNavigationError.background#dc7363
  • editorMarkerNavigationWarning.background#e7ad58
  • foreground#dcdcd0
  • list.dropBackground#383b3d
  • terminal.ansiBlack#222222
  • terminal.ansiBlue#6092bf
  • terminal.ansiBrightBlack#878780
  • terminal.ansiBrightBlue#7cb1e0
  • terminal.ansiBrightCyan#8cd0d3
  • terminal.ansiBrightGreen#c5d47f
  • terminal.ansiBrightMagenta#bf86a5
  • terminal.ansiBrightRed#cc8a8a
  • terminal.ansiBrightWhite#dcdcd0
  • terminal.ansiBrightYellow#f0dca5
  • terminal.ansiCyan#72aeb0
  • terminal.ansiGreen#7f9f7f
  • terminal.ansiMagenta#a87390
  • terminal.ansiRed#b76f6a
  • terminal.ansiWhite#babab0
  • terminal.ansiYellow#dfaf8f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#8cd0d3
comment#7f9f7f
constant#c5d47f
constant.character.escape.line-continuation#878780
meta.tag.sgml.doctype.html#bf86a5
entity.name.tag#8cd0d3
entity.other.attribute-name#f0dca5
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#dfaf8f
entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#cc8a8a
keyword.other.unit#bf86a5
keyword.other.unit.hexadecimal#c5d47f
keyword.other.important#bf86a5
invalid#b76f6abold
markup.underlineunderline
markup.bold#dfaf8fbold
markup.heading#8cd0d3bold
markup.italic#dfaf8fitalic
markup.inserted#5fa7ef
markup.deleted#dc7363
markup.changed#e7ad58
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#878780
markup.raw.block.markdown#878780
markup.quote.markdown#7f9f7f
string.other.link.title.markdown, string.other.link.description.markdown#f0dca5
constant.other.reference.link.markdown#8cd0d3
markup.underline.link.markdown, markup.underline.link.image.markdown#cc8a8anormal
markup.inline.raw#c5d47f
meta.selector#f0dca5
punctuation.definition.tag#878780
meta.preprocessor#f0dca5
meta.preprocessor.macro, entity.name.function.preprocessor#dfaf8f
meta.preprocessor.string#cc8a8a
meta.preprocessor.numeric#c5d47f
meta.structure.dictionary.key.python#8cd0d3
meta.diff.header#878780
storage#f0dca5
storage.type#8cd0d3
string#cc8a8a
punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts#8cd0d3
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less#f0dca5
keyword#f0dca5
punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php#8cd0d3
storage.modifier.import.java, storage.modifier.package.java#bf86a5
variable.language#f0dca5
entity.name.function, support.function, support.constant.handlebars, meta.function-call.generic#8cd0d3
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#8cd0d3
meta.return.type, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#8cd0d3
keyword.control#f0dca5
variable, meta.definition.variable.name, support.variable#dfaf8f
meta.object-literal.key, meta.object-literal.key entity.name.function#dfaf8f
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#dfaf8f
punctuation.definition.comment.line.shebang.shell#7f9f7f
string.interpolated.backtick.shell, comment.line.shebang.shell#c5d47f
support.function.builtin.shell#bf86a5
punctuation.definition.variable.shell#f0dca5
storage.type.class.jsdoc, entity.name.type.instance.jsdoc#afd8af
variable.other.jsdoc#c5d47f

Shiki preview

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

Loading...

Nightshade Theme by rbolsius - VS Code Theme