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.

  • activityBar.background#C4BE9D
  • diffEditor.insertedTextBackground#9c824a55
  • diffEditor.removedTextBackground#64B5F655
  • editor.background#ede8e1
  • editor.lineHighlightBackground#b7bcbf25
  • editor.selectionBackground#b7bcbf55
  • editorBracketMatch.background#B1365Bf3
  • editorBracketMatch.border#9F7E6Bf3
  • editorGroupHeader.tabsBackground#b7bcbf
  • editorLineNumber.foreground#2a3343a9
  • scrollbarSlider.background#b7bcbf
  • scrollbarSlider.hoverBackground#C4BE9D
  • sideBar.background#b7bcbf
  • statusBar.background#b7bcbf
  • tab.activeBackground#ede8e1
  • tab.activeForeground#35495f
  • tab.inactiveBackground#b7bcbf
  • tab.inactiveForeground#fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.character#A93457—
constant.language.boolean#A93457—
entity.name.tag#A93457underline
keyword#B9385F—
markup.italic#B1365B—
entity.name.function.method#B9385F—
string.quoted.single.js#B9385F—
string.quoted.single.jsx#B1365B—
string.quoted.single.ts#A93457—
string.quoted.single.tsx#A93457—
support.type.property-name.json#B1365B—
punctuation.accessor.js#B1365B—
punctuation.accessor.jsx#C13B63—
punctuation.accessor.ts#B1365B—
punctuation.accessor.tsx#992F4F—
punctuation.separator.key-value.js#A93457—
punctuation.separator.key-value.jsx#992F4F—
punctuation.separator.key-value.ts#B1365B—
punctuation.separator.key-value.tsx#B1365B—
constant.numeric#B1365B—
meta.brace.square.js#992F4F—
meta.brace.square.jsx#B1365B—
meta.brace.square.ts#C13B63—
meta.brace.square.tsx#B1365B—
meta.var.expr.js#992F4F—
meta.var.expr.jsx#B1365B—
meta.var.expr.ts#B1365B—
meta.var.expr.tsx#992F4F—
storage.modifier.js#A13153—
storage.modifier.jsx#B9385F—
storage.modifier.ts#B9385F—
storage.modifier.tsx#C54169—
storage.type#992F4F—
string.template#B9385F—
support.constant#A93457—
support.function.dom.js#B1365B—
support.function.dom.jsx#B1365B—
support.function.dom.ts#B1365B—
support.function.dom.tsx#B1365B—
support.variable.property.js#B1365B—
support.variable.property.jsx#B9385F—
support.variable.property.ts#B1365B—
support.variable.property.tsx#B1365B—
variable.language.constructor#B1365Bunderline
variable.language.this#B1365B—
meta.tag.js#B9385F—
meta.tag.jsx#A93457—
meta.tag.ts#B1365B—
meta.tag.tsx#B1365B—
support.type.object.module.js#B1365B—
support.type.object.module.jsx#B1365B—
support.type.object.module.ts#B1365B—
support.type.object.module.tsx#992F4F—
punctuation.definition.parameters.begin.js#B9385F—
punctuation.definition.parameters.begin.jsx#A13153—
punctuation.definition.parameters.begin.ts#B9385F—
punctuation.definition.parameters.begin.tsx#B1365B—
punctuation.definition.parameters.end.js#C13B63—
punctuation.definition.parameters.end.jsx#B1365B—
punctuation.definition.parameters.end.ts#A93457—
punctuation.definition.parameters.end.tsx#B1365B—
punctuation.definition.parameters.end.js#A93457—
punctuation.definition.parameters.end.jsx#A93457—
punctuation.definition.parameters.end.ts#A13153—
punctuation.definition.parameters.end.tsx#B1365B—
markup.quote#C13B63—
entity.other.attribute-name.js#B1365B—
entity.other.attribute-name.jsx#B1365B—
entity.other.attribute-name.ts#A13153—
entity.other.attribute-name.tsx#B1365B—
comment#5F7E97—
constant.language#5F7E97—
constant.other#5F7E97—
keyword.control.flow.js#5F7E97—
keyword.control.flow.jsx#5F7E97—
keyword.control.flow.ts#526D83—
keyword.control.flow.tsx#5F7E97—
keyword.control.module.js#526D83—
keyword.control.module.jsx#5F7E97—
keyword.control.module.ts#5F7E97—
keyword.control.module.tsx#5F7E97—
keyword.operator.accessor#567389—
markup.italic#5F7E97—
meta.import.js#5F7E97—
meta.import.jsx#5B7890—
meta.import.ts#5F7E97—
meta.import.tsx#5F7E97—
meta.object-literal.key.js#5F7E97—
meta.object-literal.key.jsx#718EA6—
meta.object-literal.key.ts#5F7E97—
meta.object-literal.key.tsx#5F7E97—
meta.paragraph.markdown#64849D—
punctuation.definition.block.js#5F7E97—
punctuation.definition.block.jsx#64849D—
punctuation.definition.block.ts#64849D—
punctuation.definition.block.tsx#5F7E97—
punctuation.separator.parameter.js#5F7E97—
punctuation.separator.parameter.jsx#5F7E97—
punctuation.separator.parameter.ts#5F7E97—
punctuation.separator.parameter.tsx#64849D—
string.quoted.single.js#567389—
string.quoted.single.jsx#64849D—
string.quoted.single.ts#6B89A2—
string.quoted.single.tsx#5B7890—
string.quoted.single.json#5B7890—
support.class.promise.js#5F7E97—
support.class.promise.jsx#5F7E97—
support.class.promise.ts#5F7E97—
support.class.promise.tsx#64849D—
support.function#5F7E97—
keyword.control.import.js#6B89A2—
keyword.control.import.jsx#5F7E97—
keyword.control.import.ts#567389—
keyword.control.import.tsx#5F7E97—
keyword.control.from.js#5B7890—
keyword.control.from.jsx#5B7890—
keyword.control.from.ts#5F7E97—
keyword.control.from.tsx#64849D—
keyword.control.export.js#5F7E97—
keyword.control.export.jsx#5F7E97—
keyword.control.export.ts#5F7E97—
keyword.control.export.tsx#5F7E97—
keyword.control.default.js#5F7E97—
keyword.control.default.jsx#526D83—
keyword.control.default.ts#5F7E97—
keyword.control.default.tsx#5F7E97—
entity.name.class#5B7890underline
support.function.console.js#526D83—
support.function.console.jsx#5F7E97—
support.function.console.ts#6B89A2—
support.function.console.tsx#64849D—
variable.language#5F7E97—
invalid#567389underline
support.type.object.console.js#5F7E97—
support.type.object.console.jsx#5F7E97—
support.type.object.console.ts#64849D—
support.type.object.console.tsx#5F7E97—
variable.parameter#5F7E97—
comment.block.documentation#AD9181—
comment.line.double-slash#9A7864—
constant.language.null.js#A48472—
constant.language.null.jsx#9F7E6B—
constant.language.null.ts#9F7E6B—
constant.language.null.tsx#9A7864—
entity.name.type#9A7864—
meta.parameters.js#9A7864—
meta.parameters.jsx#9F7E6B—
meta.parameters.ts#9F7E6B—
meta.parameters.tsx#9F7E6B—
variable.other.class.js#9F7E6B—
variable.other.class.jsx#9F7E6B—
variable.other.class.ts#9A7864—
variable.other.class.tsx#9A7864—
constant.other.object.key.js#9F7E6B—
constant.other.object.key.jsx#9F7E6B—
constant.other.object.key.ts#9A7864—
constant.other.object.key.tsx#A48472—
entity.other.inherited-class#A48472—
markup.heading.markdown#AD9181—
meta.brace.round.js#9F7E6B—
meta.brace.round.jsx#A48472—
meta.brace.round.ts#9F7E6B—
meta.brace.round.tsx#93725F—
entity.name.function#A48472underline
meta.tag.attributes.js#93725F—
meta.tag.attributes.jsx#9F7E6B—
meta.tag.attributes.ts#9A7864—
meta.tag.attributes.tsx#9F7E6B—
punctuation.accessor.js#9F7E6B—
punctuation.accessor.jsx#93725F—
punctuation.accessor.ts#93725F—
punctuation.accessor.tsx#8C6C5B—
punctuation.separator.comma.js#9A7864—
punctuation.separator.comma.jsx#9F7E6B—
punctuation.separator.comma.ts#9F7E6B—
punctuation.separator.comma.tsx#9F7E6B—
source.js#9A7864—
source.jsx#9F7E6B—
source.ts#8C6C5B—
source.tsx#8C6C5B—
variable.other.property.js#9F7E6B—
variable.other.property.jsx#AD9181—
variable.other.property.ts#9F7E6B—
variable.other.property.tsx#9F7E6B—
storage.modifier.async.js#9F7E6B—
storage.modifier.async.jsx#9F7E6B—
storage.modifier.async.ts#9A7864—
storage.modifier.async.tsx#9A7864—
support.class.builtin.js#9F7E6B—
support.class.builtin.jsx#9F7E6B—
support.class.builtin.ts#9A7864—
support.class.builtin.tsx#9F7E6B—
support.type.primitive.js#A48472—
support.type.primitive.jsx#8C6C5B—
support.type.primitive.ts#9F7E6B—
support.type.primitive.tsx#93725F—
support.variable.property.js#9F7E6B—
support.variable.property.jsx#9A7864—
support.variable.property.ts#A48472—
support.variable.property.tsx#9F7E6B—
variable#93725F—
variable.other.object.js#93725F—
variable.other.object.jsx#9F7E6B—
variable.other.object.ts#9A7864—
variable.other.object.tsx#9F7E6B—
variable.other.readwrite#9A7864—
variable.other.readwrite.js#93725F—
variable.other.readwrite.jsx#9F7E6B—
variable.other.readwrite.ts#9F7E6B—
variable.other.readwrite.tsx#9F7E6B—
CircusBrother by selfrefactor - VS Code Theme