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
entity.name.tag#5a6598faunderline
markup.italic#5a6598f3
punctuation.accessor.js#5a6598fa
punctuation.accessor.jsx#5a6598fa
punctuation.accessor.ts#5a6598f3
punctuation.accessor.tsx#5a6598fa
source.js#5a6598f3
source.jsx#5a6598fa
source.ts#5a6598f3
source.tsx#5a6598f3
storage.modifier.js#5a6598DC
storage.modifier.jsx#5a6598B4
storage.modifier.ts#5a6598fa
storage.modifier.tsx#5a6598fa
storage.type#5a6598C8
string.quoted.single.js#5a6598f3
string.quoted.single.jsx#5a6598fa
string.quoted.single.ts#5a6598fa
string.quoted.single.tsx#5a6598C8
support.function.dom.js#5a6598f3
support.function.dom.jsx#5a6598fa
support.function.dom.ts#5a6598fa
support.function.dom.tsx#5a6598fa
support.variable.property.js#5a6598f3
support.variable.property.jsx#5a6598fa
support.variable.property.ts#5a6598fa
support.variable.property.tsx#5a6598fa
variable.language.constructor#5a6598f3underline
variable.language.this#5a6598f3
meta.var.expr.js#5a6598B4
meta.var.expr.jsx#5a6598DC
meta.var.expr.ts#5a6598fa
meta.var.expr.tsx#5a6598fa
variable#B45948f3
keyword.control.import.js#B45948f3
keyword.control.import.jsx#B45948f1
keyword.control.import.ts#B45948f3
keyword.control.import.tsx#B45948D3
keyword.control.from.js#B45948AB
keyword.control.from.jsx#B45948f1
keyword.control.from.ts#B45948AB
keyword.control.from.tsx#B45948f1
keyword.control.export.js#B45948f1
keyword.control.export.jsx#B45948f1
keyword.control.export.ts#B45948f1
keyword.control.export.tsx#B45948f3
variable.parameter#B45948f1
support.function#B45948f1
meta.import.js#B45948D3
meta.import.jsx#B45948f1
meta.import.ts#B45948f1
meta.import.tsx#B45948f1
meta.paragraph.markdown#B45948f1
entity.other.attribute-name.js#B45948f1
entity.other.attribute-name.jsx#B45948f3
entity.other.attribute-name.ts#B45948D3
entity.other.attribute-name.tsx#B45948f3
string.quoted.single.js#B45948AB
string.quoted.single.jsx#B45948f1
string.quoted.single.ts#B45948f3
string.quoted.single.tsx#B45948BF
string.quoted.single.json#B45948f1
support.class.promise.js#B45948f3
support.class.promise.jsx#B45948f3
support.class.promise.ts#B45948f1
support.class.promise.tsx#B45948f3
support.type.object.console.js#B45948BF
support.type.object.console.jsx#B45948f1
support.type.object.console.ts#B45948f3
support.type.object.console.tsx#B45948f3
support.function.console.js#B45948f1
support.function.console.jsx#B45948D3
support.function.console.ts#B45948f1
support.function.console.tsx#B45948AB
punctuation.definition.block.js#B45948D3
punctuation.definition.block.jsx#B45948BF
punctuation.definition.block.ts#B45948BF
punctuation.definition.block.tsx#B45948f3
keyword#6E3E53C6
keyword.control.default.js#6E3E53C6
keyword.control.default.jsx#6E3E53C6
keyword.control.default.ts#6E3E5380
keyword.control.default.tsx#6E3E53C6
support.type.object.module.js#6E3E53C6
support.type.object.module.jsx#6E3E53A8
support.type.object.module.ts#6E3E53C6
support.type.object.module.tsx#6E3E53C6
keyword.control.module.js#6E3E53f3
keyword.control.module.jsx#6E3E53C6
keyword.control.module.ts#6E3E53EE
keyword.control.module.tsx#6E3E53A8
keyword.operator.accessor#6E3E53C6
invalid#6E3E53C6underline
constant.numeric#6E3E53C6
constant.language.boolean#6E3E53A8
constant.language.null.js#6E3E53C6
constant.language.null.jsx#6E3E53f3
constant.language.null.ts#6E3E53C6
constant.language.null.tsx#6E3E53EE
entity.name.class#6E3E53C6underline
entity.name.function#6E3E53C6underline
entity.name.type#6E3E5394underline
markup.heading.markdown#6E3E5380
punctuation.separator.comma.js#6E3E53C6
punctuation.separator.comma.jsx#6E3E53C6
punctuation.separator.comma.ts#6E3E53EE
punctuation.separator.comma.tsx#6E3E53f3
support.variable.property.js#6E3E53EE
support.variable.property.jsx#6E3E53C6
support.variable.property.ts#6E3E53f3
support.variable.property.tsx#6E3E53C6
support.type.primitive.js#6E3E53C6
support.type.primitive.jsx#6E3E53f3
support.type.primitive.ts#6E3E53A8
support.type.primitive.tsx#6E3E5394
punctuation.definition.parameters.begin.js#861D4Ff3
punctuation.definition.parameters.begin.jsx#861D4F89
punctuation.definition.parameters.begin.ts#861D4F9D
punctuation.definition.parameters.begin.tsx#861D4FCF
punctuation.definition.parameters.end.js#861D4Ff3
punctuation.definition.parameters.end.jsx#861D4Ff3
punctuation.definition.parameters.end.ts#861D4FCF
punctuation.definition.parameters.end.tsx#861D4FB1
punctuation.definition.parameters.end.js#861D4FB1
punctuation.definition.parameters.end.jsx#861D4Ff3
punctuation.definition.parameters.end.ts#861D4FCF
punctuation.definition.parameters.end.tsx#861D4Ff3
markup.quote#861D4FCF
meta.tag.js#861D4FCF
meta.tag.jsx#861D4FCF
meta.tag.ts#861D4FCF
meta.tag.tsx#861D4Ff3
meta.parameters.js#861D4F9D
meta.parameters.jsx#861D4FCF
meta.parameters.ts#861D4F9D
meta.parameters.tsx#861D4FB1
meta.brace.square.js#861D4FCF
meta.brace.square.jsx#861D4FCF
meta.brace.square.ts#861D4Ff3
meta.brace.square.tsx#861D4Ff3
variable.other.class.js#861D4Ff3
variable.other.class.jsx#861D4FCF
variable.other.class.ts#861D4Ff3
variable.other.class.tsx#861D4Ff3
punctuation.separator.key-value.js#861D4Ff3
punctuation.separator.key-value.jsx#861D4FCF
punctuation.separator.key-value.ts#861D4FCF
punctuation.separator.key-value.tsx#861D4Ff3
storage.modifier.async.js#861D4FB1
storage.modifier.async.jsx#861D4Ff3
storage.modifier.async.ts#861D4Ff3
storage.modifier.async.tsx#861D4Ff3
meta.brace.round.js#861D4FCF
meta.brace.round.jsx#861D4F9D
meta.brace.round.ts#861D4Ff3
meta.brace.round.tsx#861D4Ff3
constant.other.object.key.js#861D4FB1
constant.other.object.key.jsx#861D4FB1
constant.other.object.key.ts#861D4FCF
constant.other.object.key.tsx#861D4Ff3
entity.name.function.method#861D4FCF
string.template#861D4FCF
support.type.property-name.json#861D4Ff3
variable.other.property.js#861D4Ff3
variable.other.property.jsx#861D4Ff3
variable.other.property.ts#861D4FB1
variable.other.property.tsx#861D4FCF
support.constant#4381A8E9
punctuation.separator.parameter.js#4381A8E9
punctuation.separator.parameter.jsx#4381A8B7
punctuation.separator.parameter.ts#4381A8E9
punctuation.separator.parameter.tsx#4381A8E9
constant.character#4381A8f3
constant.language#4381A8E9
constant.other#4381A8E9
comment#4381A8f3
markup.italic#4381A8f3
meta.object-literal.key.js#4381A8E9
meta.object-literal.key.jsx#4381A8E9
meta.object-literal.key.ts#4381A8f3
meta.object-literal.key.tsx#4381A8f3
comment.block.documentation#4381A8f3
comment.line.double-slash#4381A8B7
punctuation.accessor.js#4381A8f3
punctuation.accessor.jsx#4381A8E9
punctuation.accessor.ts#4381A8E9
punctuation.accessor.tsx#4381A8E9
variable.language#4381A8E9
variable.other.object.js#4381A8f3
variable.other.object.jsx#4381A8E9
variable.other.object.ts#4381A8E9
variable.other.object.tsx#4381A8B7
variable.other.readwrite#4381A8f3
variable.other.readwrite.js#4381A8E9
variable.other.readwrite.jsx#4381A8f3
variable.other.readwrite.ts#4381A8E9
variable.other.readwrite.tsx#4381A8E9
entity.other.inherited-class#4381A8A3
support.class.builtin.js#4381A8E9
support.class.builtin.jsx#4381A8A3
support.class.builtin.ts#4381A8E9
support.class.builtin.tsx#4381A8f3
meta.tag.attributes.js#4381A8B7
meta.tag.attributes.jsx#4381A8E9
meta.tag.attributes.ts#4381A8E9
meta.tag.attributes.tsx#4381A8E9
AdvancedCat by selfrefactor - VS Code Theme