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.

  • editor.background#1b2b34
  • editor.foreground#cdd3de
  • editor.lineHighlightBackground#00000030
  • editor.selectionBackground#4f5b66
  • editorCursor.foreground#ffcc00
  • editorGroupHeader.tabsBorder#e74c3c
  • editorWhitespace.foreground#2d4858
  • scrollbarSlider.activeBackground#e74c3c
  • scrollbarSlider.background#4d1e0f
  • scrollbarSlider.hoverBackground#e74c3c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter.function#5FB3B3—
comment, punctuation.definition.comment#65737ebold
comment#65737ebold
none#A6B2C0—
keyword.operator#c792ea—
keyword#c792ea—
variable#5FB3B3—
token.variable.parameter.java#5FB3B3—
import.storage.java#e5c07b—
token.package.keyword#c792ea—
token.package#c792ea—
entity.name.function, meta.require, support.function.any-method#82AAFF—
entity.name.type.namespace, js.function.block.support.class.console#ffcb6b—
support.class, entity.name.type.class, #ffcb6b—
entity.name.class.identifier.namespace.type#B2CCD6—
entity.name.class#82AAFF—
entity.name.type#89DDFF—
keyword.control#c7F7766992ea—
control.elements, keyword.operator.less#FFEB95—
keyword.other.special-method#82B1FF—
storage#c792eaff—
token.storage.js,token.storage.ts#c792eaff—
token.storage.type.java#c792eaff—
support.type.property-name#eeffff—
support.constant.property-value#FFEB95—
support.constant.font-name#d19a66—
string, entity.other.inherited-class#98c379—
other.variable.definition.string.quoted.string-contents.double, other.variable.string.quoted.string-contents.double#5FB3B3—
constant.other.symbol#56b6c2—
constant.numeric#d19a66—
none#d19a66—
none#d19a66—
constant#d19a66—
punctuation.definition.constant#d19a66—
entity.name.tag#e06c75—
entity.other.attribute-name#BB80B3—
entity.other.attribute-name.id#61afef—
punctuation.definition.entity#d19a66—
meta.selector#c678dd—
none#D2945D—
markup.heading#e06c75
markup.heading punctuation.definition.heading, entity.name.section#61afef—
keyword.other.unit#d19a66—
markup.bold#d19a66—
punctuation.definition.bold#e5c07b—
markup.italic, punctuation.definition.italic#c678dd—
emphasis md#c678dd—
strong md#d19a66—
variable md#98c379—
keyword md#ffcb6bbold
markup.raw.inline#f1e655—
string.other.link, punctuation.definition.string.end.markdown#99C794—
meta.link#F77669—
markup.list#ff5370ff—
markup.quote#F77669—
meta.separator#d9f5ddff—
markup.inserted#F1E655—
markup.deleted#ff5370ff—
markup.changed#c792eaff—
constant.other.color#FFEB95—
string.regexp#57B6C2—
constant.character.escape#57B6C2—
punctuation.section.embedded, variable.interpolation#BE4F44—
invalid.illegal#ffffffff—
invalid.broken#020e14ff—
invalid.deprecated#ffffffff—
invalid.unimplemented#ffffffff—
source.json meta.structure.dictionary.json string.quoted.double.json#DF6A73—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#90C378—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.quoted.double.json#DF6A73—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#90C378—
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#C679DD—
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#C679DD—
meta.function.decorator.python#61afef—
support.token.decorator.python#56B6C2—
function.parameter#d19a66—
function.parameter.js,function.parameter.ts#abb2bf—
control.js#c792ea—
js.meta.brace.paren#82AAFF—
js.meta.new.expr.type.name#C594C5—
js.meta.brace.paren,keyword.js.others#5FB3B3—
function.brace#abb2bf—
function.parameter.ruby, function.parameter.cs#abb2bf—
rgb-value#56B6C2—
inline-color-decoration rgb-value#d19a66—
less rgb-value#d19a66—
selector.sass#e06c75—
var.this.js,var.this.ts#DF6A73—
token.detected-link#99C794bold italic
meta.tag.xml.string.quoted.double.detected-link,meta.tag.preprocessor.xml.string.quoted.double,meta.tag.xml.string.quoted.double#99C794—
token.meta.js.punctuation.definition.begin.block.class.method.declaration.tag.without-attributes#5FB3B3—
token.meta.js.block.class.method.declaration.tag.without-attributes.jsx.children.tsx#CDD3DE—
token.meta.js.function.var.expr.support.dom#CDD3DEitalic
token.meta.js.variable.var.expr.support.dom.property#CDD3DE—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
TruBoo by TruBoo - VS Code Theme