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#FAF8F3
  • editor.lineHighlightBackground#bdc3c725
  • editor.selectionBackground#bdc3c755
  • editorBracketMatch.background#B1365Bf3
  • editorBracketMatch.border#9F7E6Bf3
  • editorGroupHeader.tabsBackground#bdc3c7
  • editorLineNumber.foreground#2a3343a9
  • scrollbarSlider.background#bdc3c7
  • scrollbarSlider.hoverBackground#C4BE9D
  • sideBar.background#bdc3c7
  • statusBar.background#bdc3c7
  • tab.activeBackground#FAF8F3
  • tab.activeForeground#35495f
  • tab.inactiveBackground#bdc3c7
  • tab.inactiveForeground#fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#af3564fa
constant.language#af3564fa
constant.other#af3564f3
keyword.control.flow.js#af3564f3
keyword.control.flow.jsx#af3564fa
keyword.control.flow.ts#af3564DC
keyword.control.flow.tsx#af3564fa
keyword.control.module.js#af3564fa
keyword.control.module.jsx#af3564f3
keyword.control.module.ts#af3564C8
keyword.control.module.tsx#af3564B4
keyword.operator.accessor#af3564fa
markup.italic#af3564B4
meta.import.js#af3564fa
meta.import.jsx#af3564DC
meta.import.ts#af3564fa
meta.import.tsx#af3564fa
meta.object-literal.key.js#af3564C8
meta.object-literal.key.jsx#af3564f3
meta.object-literal.key.ts#af3564fa
meta.object-literal.key.tsx#af3564fa
meta.paragraph.markdown#af3564f3
punctuation.definition.block.js#af3564DC
punctuation.definition.block.jsx#af3564C8
punctuation.definition.block.ts#af3564B4
punctuation.definition.block.tsx#af3564fa
punctuation.separator.parameter.js#af3564fa
punctuation.separator.parameter.jsx#af3564fa
punctuation.separator.parameter.ts#af3564f3
punctuation.separator.parameter.tsx#af3564f3
string.quoted.single.js#af3564f3
string.quoted.single.jsx#af3564fa
string.quoted.single.ts#af3564f3
string.quoted.single.tsx#af3564fa
string.quoted.single.json#af3564f3
support.class.promise.js#af3564DC
support.class.promise.jsx#af3564fa
support.class.promise.ts#af3564fa
support.class.promise.tsx#af3564fa
support.function#af3564fa
support.function.console.js#af3564C8
support.function.console.jsx#af3564fa
support.function.console.ts#af3564fa
support.function.console.tsx#af3564fa
support.type.object.console.js#af3564fa
support.type.object.console.jsx#af3564f3
support.type.object.console.ts#af3564fa
support.type.object.console.tsx#af3564fa
variable.parameter#af3564f3
meta.tag.js#C26F63B4
meta.tag.jsx#C26F63fa
meta.tag.ts#C26F63f3
meta.tag.tsx#C26F63f3
variable.language#C26F63f3
invalid#C26F63faunderline
constant.numeric#C26F63fa
meta.brace.square.js#C26F63f3
meta.brace.square.jsx#C26F63f3
meta.brace.square.ts#C26F63fa
meta.brace.square.tsx#C26F63DC
meta.var.expr.js#C26F63fa
meta.var.expr.jsx#C26F63fa
meta.var.expr.ts#C26F63f3
meta.var.expr.tsx#C26F63fa
keyword.control.import.js#C26F63f3
keyword.control.import.jsx#C26F63B4
keyword.control.import.ts#C26F63f3
keyword.control.import.tsx#C26F63fa
keyword.control.from.js#C26F63B4
keyword.control.from.jsx#C26F63f3
keyword.control.from.ts#C26F63DC
keyword.control.from.tsx#C26F63fa
keyword.control.export.js#C26F63f3
keyword.control.export.jsx#C26F63C8
keyword.control.export.ts#C26F63f3
keyword.control.export.tsx#C26F63fa
keyword.control.default.js#C26F63f3
keyword.control.default.jsx#C26F63fa
keyword.control.default.ts#C26F63fa
keyword.control.default.tsx#C26F63B4
support.type.object.module.js#C26F63DC
support.type.object.module.jsx#C26F63DC
support.type.object.module.ts#C26F63f3
support.type.object.module.tsx#C26F63fa
punctuation.definition.parameters.begin.js#C26F63fa
punctuation.definition.parameters.begin.jsx#C26F63f3
punctuation.definition.parameters.begin.ts#C26F63fa
punctuation.definition.parameters.begin.tsx#C26F63fa
punctuation.definition.parameters.end.js#C26F63fa
punctuation.definition.parameters.end.jsx#C26F63C8
punctuation.definition.parameters.end.ts#C26F63B4
punctuation.definition.parameters.end.tsx#C26F63C8
punctuation.definition.parameters.end.js#C26F63f3
punctuation.definition.parameters.end.jsx#C26F63fa
punctuation.definition.parameters.end.ts#C26F63B4
punctuation.definition.parameters.end.tsx#C26F63fa
markup.quote#C26F63fa
entity.other.attribute-name.js#C26F63C8
entity.other.attribute-name.jsx#C26F63fa
entity.other.attribute-name.ts#C26F63f3
entity.other.attribute-name.tsx#C26F63fa
meta.parameters.js#C26F63f3
meta.parameters.jsx#C26F63fa
meta.parameters.ts#C26F63C8
meta.parameters.tsx#C26F63fa
variable.other.class.js#C26F63fa
variable.other.class.jsx#C26F63fa
variable.other.class.ts#C26F63fa
variable.other.class.tsx#C26F63fa
constant.other.object.key.js#C26F63f3
constant.other.object.key.jsx#C26F63f3
constant.other.object.key.ts#C26F63C8
constant.other.object.key.tsx#C26F63f3
entity.name.function.method#C26F63fa
string.quoted.single.js#C26F63fa
string.quoted.single.jsx#C26F63DC
string.quoted.single.ts#C26F63fa
string.quoted.single.tsx#C26F63fa
support.type.property-name.json#C26F63f3
variable.other.property.js#C26F63fa
variable.other.property.jsx#C26F63B4
variable.other.property.ts#C26F63f3
variable.other.property.tsx#C26F63f3
entity.name.class#C26F63faunderline
comment.block.documentation#533963BF
comment.line.double-slash#533963f1
constant.language.null.js#533963f1
constant.language.null.jsx#533963AB
constant.language.null.ts#533963f1
constant.language.null.tsx#533963f3
entity.name.type#533963BF
entity.other.inherited-class#533963f3
markup.heading.markdown#533963D3
meta.brace.round.js#533963f3
meta.brace.round.jsx#533963f3
meta.brace.round.ts#533963f1
meta.brace.round.tsx#533963f3
entity.name.function#533963f1underline
meta.tag.attributes.js#533963D3
meta.tag.attributes.jsx#533963f1
meta.tag.attributes.ts#533963f3
meta.tag.attributes.tsx#533963f1
punctuation.accessor.js#533963f1
punctuation.accessor.jsx#533963BF
punctuation.accessor.ts#533963f1
punctuation.accessor.tsx#533963f1
punctuation.separator.comma.js#533963f1
punctuation.separator.comma.jsx#533963f3
punctuation.separator.comma.ts#533963f1
punctuation.separator.comma.tsx#533963f1
source.js#533963f3
source.jsx#533963f1
source.ts#533963f3
source.tsx#533963f3
storage.modifier.async.js#533963f3
storage.modifier.async.jsx#533963f1
storage.modifier.async.ts#533963f1
storage.modifier.async.tsx#533963f3
support.class.builtin.js#533963f3
support.class.builtin.jsx#533963f1
support.class.builtin.ts#533963f1
support.class.builtin.tsx#533963f1
support.type.primitive.js#533963D3
support.type.primitive.jsx#533963D3
support.type.primitive.ts#533963f3
support.type.primitive.tsx#533963BF
support.variable.property.js#533963f3
support.variable.property.jsx#533963f3
support.variable.property.ts#533963f1
support.variable.property.tsx#533963D3
variable#533963f1
variable.other.object.js#533963f1
variable.other.object.jsx#533963f3
variable.other.object.ts#533963f1
variable.other.object.tsx#533963f1
variable.other.readwrite#533963f3
variable.other.readwrite.js#533963D3
variable.other.readwrite.jsx#533963f1
variable.other.readwrite.ts#533963f3
variable.other.readwrite.tsx#533963f1
constant.character#7F8E52f1
constant.language.boolean#7F8E52f1
entity.name.tag#7F8E52f3underline
keyword#7F8E52f3
markup.italic#7F8E52f1
punctuation.accessor.js#7F8E52f3
punctuation.accessor.jsx#7F8E52f1
punctuation.accessor.ts#7F8E52f1
punctuation.accessor.tsx#7F8E52D3
punctuation.separator.key-value.js#7F8E52f1
punctuation.separator.key-value.jsx#7F8E52BF
punctuation.separator.key-value.ts#7F8E52D3
punctuation.separator.key-value.tsx#7F8E52f1
storage.modifier.js#7F8E52BF
storage.modifier.jsx#7F8E52f1
storage.modifier.ts#7F8E52BF
storage.modifier.tsx#7F8E52D3
storage.type#7F8E52f1
string.template#7F8E52D3
support.constant#7F8E52f1
support.function.dom.js#7F8E52f3
support.function.dom.jsx#7F8E52f1
support.function.dom.ts#7F8E52D3
support.function.dom.tsx#7F8E52f1
support.variable.property.js#7F8E52f1
support.variable.property.jsx#7F8E52f1
support.variable.property.ts#7F8E52f1
support.variable.property.tsx#7F8E52f3
variable.language.constructor#7F8E52f1underline
variable.language.this#7F8E52f3
AdvancedDog by selfrefactor - VS Code Theme