Skip to main content
CodingTheme

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#0d1011
  • editor.background#282c34
  • editorGroupHeader.tabsBackground#0d1011
  • sideBar.background#0d1011
  • statusBar.background#0d1011
  • statusBar.noFolderBackground#0d1011
  • tab.activeBackground#282c34
  • tab.inactiveBackground#445366
  • titleBar.activeBackground#0d1011
  • titleBar.inactiveBackground#0d1011

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#abb2bf
variable.parameter.function#5cff5d
comment, punctuation.definition.comment#00b720italic
comment#00b720italic
comment markup.link#00b720
markup.inserted.diff#98c379ff
markup.deleted.diff#e06c75ff
support.constant.math.js, support.constant.property.math.js#e5c07bff
variable.other.constant.js#c2c8d7
storage.type.annotation.java#e5c07bff
source.java#bbff0b
punctuation.section.block.begin.java, punctuation.section.block.end.java, punctuation.definition.method-parameters.begin.java, punctuation.definition.method-parameters.end.java, meta.method.identifier.java, punctuation.section.method.begin.java, punctuation.section.method.end.java, punctuation.terminator.java, punctuation.section.class.begin.java, punctuation.section.class.end.java, punctuation.section.inner-class.begin.java, punctuation.section.inner-class.end.java, meta.method-call.java, storage.type.generic.java#5cff5d
meta.method.java#6dc2b8
storage.modifier.import.java, storage.type.java#e5c07bff
meta.definition.variable.name.java#c2c8d7
keyword.operator.logical.js#00e8ff
support.constant.property-value.scss, support.constant.property-value.css#d19a66ff
support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-standard-color-name.scss#d19a66ff
support.constant.color.w3c-standard-color-name.css, entity.other.attribute-name.class.css#d19a66ff
support.type.vendored.property-name.css#56b6c2ff
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js#bbff0b
support.module.node.js, support.type.object.module.js, support.module.node.js#e5c07bff
variable.other.readwrite.js, meta.object-literal.key.js, support.variable.property.js#c2c8d7
support.constant.json.js#d19a66ff
keyword.operator.expression.typeof.js#b54cff
support.type.object.console.js#c2c8d7
entity.name.function.js, support.function.console.js#6dc2b8
keyword.operator.js#00e8ff
support.type.object.dom.js#56b6c2ff
support.variable.dom.js, support.variable.property.dom.js#c2c8d7
keyword.operator.arithmetic.js, keyword.operator.comparison.js#b54cff
keyword.operator.sizeof.c#b54cff
meta.function-call.arguments.python#E06C60
meta.function-call.python#E06C60
variable.parameter.function.python#5cff5d
punctuation.definition.comment#5C6370
none#A6B2C0
keyword.operator#00e8ff
keyword#b54cff
variable#c2c8d7
token.variable.parameter.java#5cff5d
import.storage.java#e5c07b
token.package.keyword#b54cff
token.package#00e8ff
entity.name.function, meta.require, support.function.any-method#6dc2b8
entity.name.type.namespace#e5c07b
support.class, entity.name.type.class#e5c07b
entity.name.class.identifier.namespace.type#e5c07b
entity.name.class#61afef
entity.name.type#e5c07b
keyword.control#b54cff
control.elements, keyword.operator.less#d19a66
keyword.other.special-method#6dc2b8
storage#854cff
token.storage.js, token.storage.ts#854cff
source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void#C678DD
token.storage.type.java#e5c07b
support.function#56b6c2
support.type.property-name#abb2bf
support.constant.property-value#abb2bf
support.constant.font-name#d19a66
meta.tag#abb2bf
string, entity.other.inherited-class#e80011
constant.other.symbol#56b6c2
constant.numeric#d19a66
none#d19a66
none#d19a66
constant#d19a66
punctuation.definition.constant#d19a66
entity.name.tag#c2c8d7
entity.other.attribute-name#d19a66
entity.other.attribute-name.id#61afefff
entity.other.attribute-name.class.css#d19a66ff
meta.selector#c678dd
none#D2945D
markup.heading#c2c8d7
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
entity.name.section.markdown#E06C75
punctuation.definition.heading.markdown#E06C75
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#D19A66
markup.inline.raw.markdown#98C379
beginning.punctuation.definition.list.markdown#c2c8d7
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ABB2BF
punctuation.definition.metadata.markdown#C678DD
markup.underline.link.markdown, markup.underline.link.image.markdown#C678DD
string.other.link.title.markdown, string.other.link.description.markdown#61AFEF
string.regexp#57B6C2
constant.character.escape#57B6C2
punctuation.section.embedded, variable.interpolation#BE4F44
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#e80011
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#e80011
source.json meta.structure.dictionary.json > value.json > string.quoted.json, source.json meta.structure.array.json > value.json > string.quoted.json, source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation, source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#e80011
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#56B6C2
support.type.property-name.json#c2c8d7
support.type.property-name.json punctuation#c2c8d7
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-call.php#61afefff
meta.function.decorator.python#61afef
support.token.decorator.python, meta.function.decorator.identifier.python#56B6C2
function.parameter#5cff5d
function.parameter.js, function.parameter.ts#5cff5d
function.brace#abb2bf
function.parameter.ruby, function.parameter.cs#5cff5d
rgb-value#56B6C2
inline-color-decoration rgb-value#d19a66
less rgb-value#d19a66
selector.sass#e06c75
var.this.js, var.this.ts, variable.language.this.js#854cff
block.scope.end, block.scope.begin#abb2bf
string.quoted.single.ts, string.quoted.double.ts#e80011
entity.name.type.class.ts, variable.other.readwrite.alias.ts, entity.name.type.ts#BBFF0B
variable.language.this.ts#854cff
variable.parameter.ts, support.variable.dom.ts#5cff5d
punctuation.definition.comment.ts#00b720
entity.name.tag.block.any.html, entity.name.tag.html#FF5370
comment.block.html, punctuation.definition.comment.html#FFEC00
entity.other.attribute-name.html#FFCB6B
text.html.basic#C3E887
support.type.property-name.json#00B8E8

Shiki preview

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

Loading...

Material Mulder by Muldoser - VS Code Theme