Skip to main content
Coding Theme

Color themes

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
constant.character#1D3E69—
constant.language.boolean#1D3E69—
entity.name.tag#1D3E69underline
keyword#1F4473—
markup.italic#1E416E—
entity.name.function.method#1F4473—
string.quoted.single.js#1F4473—
string.quoted.single.jsx#1E416E—
string.quoted.single.ts#1D3E69—
string.quoted.single.tsx#1D3E69—
support.type.property-name.json#1E416E—
punctuation.accessor.js#1E416E—
punctuation.accessor.jsx#214778—
punctuation.accessor.ts#1E416E—
punctuation.accessor.tsx#1A385F—
punctuation.separator.key-value.js#1D3E69—
punctuation.separator.key-value.jsx#1A385F—
punctuation.separator.key-value.ts#1E416E—
punctuation.separator.key-value.tsx#1E416E—
constant.numeric#1E416E—
meta.brace.square.js#1A385F—
meta.brace.square.jsx#1E416E—
meta.brace.square.ts#214778—
meta.brace.square.tsx#1E416E—
meta.var.expr.js#1A385F—
meta.var.expr.jsx#1E416E—
meta.var.expr.ts#1E416E—
meta.var.expr.tsx#1A385F—
storage.modifier.js#1B3B64—
storage.modifier.jsx#1F4473—
storage.modifier.ts#1F4473—
storage.modifier.tsx#224A7D—
storage.type#1A385F—
string.template#1F4473—
support.constant#1D3E69—
support.function.dom.js#1E416E—
support.function.dom.jsx#1E416E—
support.function.dom.ts#1E416E—
support.function.dom.tsx#1E416E—
support.variable.property.js#1E416E—
support.variable.property.jsx#1F4473—
support.variable.property.ts#1E416E—
support.variable.property.tsx#1E416E—
variable.language.constructor#1E416Eunderline
variable.language.this#1E416E—
meta.tag.js#1F4473—
meta.tag.jsx#1D3E69—
meta.tag.ts#1E416E—
meta.tag.tsx#1E416E—
support.type.object.module.js#1E416E—
support.type.object.module.jsx#1E416E—
support.type.object.module.ts#1E416E—
support.type.object.module.tsx#1A385F—
punctuation.definition.parameters.begin.js#1F4473—
punctuation.definition.parameters.begin.jsx#1B3B64—
punctuation.definition.parameters.begin.ts#1F4473—
punctuation.definition.parameters.begin.tsx#1E416E—
punctuation.definition.parameters.end.js#214778—
punctuation.definition.parameters.end.jsx#1E416E—
punctuation.definition.parameters.end.ts#1D3E69—
punctuation.definition.parameters.end.tsx#1E416E—
punctuation.definition.parameters.end.js#1D3E69—
punctuation.definition.parameters.end.jsx#1D3E69—
punctuation.definition.parameters.end.ts#1B3B64—
punctuation.definition.parameters.end.tsx#1E416E—
markup.quote#214778—
entity.other.attribute-name.js#1E416E—
entity.other.attribute-name.jsx#1E416E—
entity.other.attribute-name.ts#1B3B64—
entity.other.attribute-name.tsx#1E416E—
comment#38978D—
constant.language#38978D—
constant.other#38978D—
keyword.control.flow.js#38978D—
keyword.control.flow.jsx#38978D—
keyword.control.flow.ts#30837A—
keyword.control.flow.tsx#38978D—
keyword.control.module.js#30837A—
keyword.control.module.jsx#38978D—
keyword.control.module.ts#38978D—
keyword.control.module.tsx#38978D—
keyword.operator.accessor#338980—
markup.italic#38978D—
meta.import.js#38978D—
meta.import.jsx#359087—
meta.import.ts#38978D—
meta.import.tsx#38978D—
meta.object-literal.key.js#38978D—
meta.object-literal.key.jsx#40ABA0—
meta.object-literal.key.ts#38978D—
meta.object-literal.key.tsx#38978D—
meta.paragraph.markdown#3B9E93—
punctuation.definition.block.js#38978D—
punctuation.definition.block.jsx#3B9E93—
punctuation.definition.block.ts#3B9E93—
punctuation.definition.block.tsx#38978D—
punctuation.separator.parameter.js#38978D—
punctuation.separator.parameter.jsx#38978D—
punctuation.separator.parameter.ts#38978D—
punctuation.separator.parameter.tsx#3B9E93—
string.quoted.single.js#338980—
string.quoted.single.jsx#3B9E93—
string.quoted.single.ts#3DA59A—
string.quoted.single.tsx#359087—
string.quoted.single.json#359087—
support.class.promise.js#38978D—
support.class.promise.jsx#38978D—
support.class.promise.ts#38978D—
support.class.promise.tsx#3B9E93—
support.function#38978D—
keyword.control.import.js#3DA59A—
keyword.control.import.jsx#38978D—
keyword.control.import.ts#338980—
keyword.control.import.tsx#38978D—
keyword.control.from.js#359087—
keyword.control.from.jsx#359087—
keyword.control.from.ts#38978D—
keyword.control.from.tsx#3B9E93—
keyword.control.export.js#38978D—
keyword.control.export.jsx#38978D—
keyword.control.export.ts#38978D—
keyword.control.export.tsx#38978D—
keyword.control.default.js#38978D—
keyword.control.default.jsx#30837A—
keyword.control.default.ts#38978D—
keyword.control.default.tsx#38978D—
entity.name.class#359087underline
support.function.console.js#30837A—
support.function.console.jsx#38978D—
support.function.console.ts#3DA59A—
support.function.console.tsx#3B9E93—
variable.language#38978D—
invalid#338980underline
support.type.object.console.js#38978D—
support.type.object.console.jsx#38978D—
support.type.object.console.ts#3B9E93—
support.type.object.console.tsx#38978D—
variable.parameter#38978D—
comment.block.documentation#C3865C—
comment.line.double-slash#B16F41—
constant.language.null.js#BD7A4B—
constant.language.null.jsx#B97444—
constant.language.null.ts#B97444—
constant.language.null.tsx#B16F41—
entity.name.type#B16F41—
meta.parameters.js#B16F41—
meta.parameters.jsx#B97444—
meta.parameters.ts#B97444—
meta.parameters.tsx#B97444—
variable.other.class.js#B97444—
variable.other.class.jsx#B97444—
variable.other.class.ts#B16F41—
variable.other.class.tsx#B16F41—
constant.other.object.key.js#B97444—
constant.other.object.key.jsx#B97444—
constant.other.object.key.ts#B16F41—
constant.other.object.key.tsx#BD7A4B—
entity.other.inherited-class#BD7A4B—
markup.heading.markdown#C3865C—
meta.brace.round.js#B97444—
meta.brace.round.jsx#BD7A4B—
meta.brace.round.ts#B97444—
meta.brace.round.tsx#A86A3E—
entity.name.function#BD7A4Bunderline
meta.tag.attributes.js#A86A3E—
meta.tag.attributes.jsx#B97444—
meta.tag.attributes.ts#B16F41—
meta.tag.attributes.tsx#B97444—
punctuation.accessor.js#B97444—
punctuation.accessor.jsx#A86A3E—
punctuation.accessor.ts#A86A3E—
punctuation.accessor.tsx#A0643B—
punctuation.separator.comma.js#B16F41—
punctuation.separator.comma.jsx#B97444—
punctuation.separator.comma.ts#B97444—
punctuation.separator.comma.tsx#B97444—
source.js#B16F41—
source.jsx#B97444—
source.ts#A0643B—
source.tsx#A0643B—
variable.other.property.js#B97444—
variable.other.property.jsx#C3865C—
variable.other.property.ts#B97444—
variable.other.property.tsx#B97444—
storage.modifier.async.js#B97444—
storage.modifier.async.jsx#B97444—
storage.modifier.async.ts#B16F41—
storage.modifier.async.tsx#B16F41—
support.class.builtin.js#B97444—
support.class.builtin.jsx#B97444—
support.class.builtin.ts#B16F41—
support.class.builtin.tsx#B97444—
support.type.primitive.js#BD7A4B—
support.type.primitive.jsx#A0643B—
support.type.primitive.ts#B97444—
support.type.primitive.tsx#A86A3E—
support.variable.property.js#B97444—
support.variable.property.jsx#B16F41—
support.variable.property.ts#BD7A4B—
support.variable.property.tsx#B97444—
variable#A86A3E—
variable.other.object.js#A86A3E—
variable.other.object.jsx#B97444—
variable.other.object.ts#B16F41—
variable.other.object.tsx#B97444—
variable.other.readwrite#B16F41—
variable.other.readwrite.js#A86A3E—
variable.other.readwrite.jsx#B97444—
variable.other.readwrite.ts#B97444—
variable.other.readwrite.tsx#B97444—