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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#C66534
constant.language#C66534
constant.other#BD6032
keyword.control.flow.js#AB572D
keyword.control.flow.jsx#C66534
keyword.control.flow.ts#CB6B3A
keyword.control.flow.tsx#C66534
keyword.control.module.js#C66534
keyword.control.module.jsx#BD6032
keyword.control.module.ts#CE7143
keyword.control.module.tsx#D0784C
keyword.operator.accessor#C66534
markup.italic#D0784C
meta.import.js#C66534
meta.import.jsx#CB6B3A
meta.import.ts#C66534
meta.import.tsx#C66534
meta.object-literal.key.js#CE7143
meta.object-literal.key.jsx#BD6032
meta.object-literal.key.ts#C66534
meta.object-literal.key.tsx#C66534
meta.paragraph.markdown#BD6032
punctuation.definition.block.js#CB6B3A
punctuation.definition.block.jsx#CE7143
punctuation.definition.block.ts#D0784C
punctuation.definition.block.tsx#C66534
punctuation.separator.parameter.js#C66534
punctuation.separator.parameter.jsx#C66534
punctuation.separator.parameter.ts#BD6032
punctuation.separator.parameter.tsx#B45C2F
string.quoted.single.js#BD6032
string.quoted.single.jsx#C66534
string.quoted.single.ts#BD6032
string.quoted.single.tsx#C66534
string.quoted.single.json#B45C2F
support.class.promise.js#CB6B3A
support.class.promise.jsx#C66534
support.class.promise.ts#C66534
support.class.promise.tsx#C66534
support.function#C66534
support.function.console.js#CE7143
support.function.console.jsx#C66534
support.function.console.ts#C66534
support.function.console.tsx#C66534
support.type.object.console.js#C66534
support.type.object.console.jsx#BD6032
support.type.object.console.ts#C66534
support.type.object.console.tsx#C66534
variable.parameter#AB572D
meta.tag.js#447D67
meta.tag.jsx#3c6e5b
meta.tag.ts#345F4F
meta.tag.tsx#396957
variable.language#396957
invalid#3c6e5bunderline
constant.numeric#3c6e5b
meta.brace.square.js#396957
meta.brace.square.jsx#345F4F
meta.brace.square.ts#3c6e5b
meta.brace.square.tsx#3F735F
meta.var.expr.js#3c6e5b
meta.var.expr.jsx#3c6e5b
meta.var.expr.ts#376453
meta.var.expr.tsx#3c6e5b
keyword.control.import.js#396957
keyword.control.import.jsx#447D67
keyword.control.import.ts#396957
keyword.control.import.tsx#3c6e5b
keyword.control.from.js#447D67
keyword.control.from.jsx#376453
keyword.control.from.ts#3F735F
keyword.control.from.tsx#3c6e5b
keyword.control.export.js#376453
keyword.control.export.jsx#417863
keyword.control.export.ts#396957
keyword.control.export.tsx#3c6e5b
keyword.control.default.js#396957
keyword.control.default.jsx#3c6e5b
keyword.control.default.ts#3c6e5b
keyword.control.default.tsx#447D67
support.type.object.module.js#3F735F
support.type.object.module.jsx#3F735F
support.type.object.module.ts#376453
support.type.object.module.tsx#3c6e5b
punctuation.definition.parameters.begin.js#3c6e5b
punctuation.definition.parameters.begin.jsx#345F4F
punctuation.definition.parameters.begin.ts#3c6e5b
punctuation.definition.parameters.begin.tsx#3c6e5b
punctuation.definition.parameters.end.js#3c6e5b
punctuation.definition.parameters.end.jsx#417863
punctuation.definition.parameters.end.ts#447D67
punctuation.definition.parameters.end.tsx#417863
punctuation.definition.parameters.end.js#396957
punctuation.definition.parameters.end.jsx#3c6e5b
punctuation.definition.parameters.end.ts#447D67
punctuation.definition.parameters.end.tsx#3c6e5b
markup.quote#3c6e5b
entity.other.attribute-name.js#417863
entity.other.attribute-name.jsx#3c6e5b
entity.other.attribute-name.ts#396957
entity.other.attribute-name.tsx#3c6e5b
meta.parameters.js#396957
meta.parameters.jsx#3c6e5b
meta.parameters.ts#417863
meta.parameters.tsx#3c6e5b
variable.other.class.js#3c6e5b
variable.other.class.jsx#3c6e5b
variable.other.class.ts#3c6e5b
variable.other.class.tsx#3c6e5b
constant.other.object.key.js#376453
constant.other.object.key.jsx#376453
constant.other.object.key.ts#417863
constant.other.object.key.tsx#396957
entity.name.function.method#3c6e5b
string.quoted.single.js#3c6e5b
string.quoted.single.jsx#3F735F
string.quoted.single.ts#3c6e5b
string.quoted.single.tsx#3c6e5b
support.type.property-name.json#345F4F
variable.other.property.js#3c6e5b
variable.other.property.jsx#447D67
variable.other.property.ts#396957
variable.other.property.tsx#396957
entity.name.class#3c6e5bunderline
comment.block.documentation#5A235A
comment.line.double-slash#532053
constant.language.null.js#532053
constant.language.null.jsx#5E245E
constant.language.null.ts#532053
constant.language.null.tsx#4F1F4F
entity.name.type#5A235A
entity.other.inherited-class#4F1F4F
markup.heading.markdown#572157
meta.brace.round.js#4F1F4F
meta.brace.round.jsx#4F1F4F
meta.brace.round.ts#532053
meta.brace.round.tsx#4F1F4F
entity.name.function#532053underline
meta.tag.attributes.js#572157
meta.tag.attributes.jsx#532053
meta.tag.attributes.ts#4F1F4F
meta.tag.attributes.tsx#532053
punctuation.accessor.js#532053
punctuation.accessor.jsx#5A235A
punctuation.accessor.ts#532053
punctuation.accessor.tsx#532053
punctuation.separator.comma.js#532053
punctuation.separator.comma.jsx#4C1D4C
punctuation.separator.comma.ts#532053
punctuation.separator.comma.tsx#532053
source.js#4F1F4F
source.jsx#532053
source.ts#4F1F4F
source.tsx#4F1F4F
storage.modifier.async.js#4F1F4F
storage.modifier.async.jsx#532053
storage.modifier.async.ts#532053
storage.modifier.async.tsx#4F1F4F
support.class.builtin.js#4C1D4C
support.class.builtin.jsx#532053
support.class.builtin.ts#532053
support.class.builtin.tsx#532053
support.type.primitive.js#572157
support.type.primitive.jsx#572157
support.type.primitive.ts#4F1F4F
support.type.primitive.tsx#5A235A
support.variable.property.js#4F1F4F
support.variable.property.jsx#4F1F4F
support.variable.property.ts#532053
support.variable.property.tsx#572157
variable#532053
variable.other.object.js#532053
variable.other.object.jsx#4F1F4F
variable.other.object.ts#532053
variable.other.object.tsx#532053
variable.other.readwrite#4F1F4F
variable.other.readwrite.js#572157
variable.other.readwrite.jsx#532053
variable.other.readwrite.ts#4C1D4C
variable.other.readwrite.tsx#532053
constant.character#9e386a
constant.language.boolean#9e386a
entity.name.tag#973565underline
keyword#973565
markup.italic#9e386a
punctuation.accessor.js#973565
punctuation.accessor.jsx#9e386a
punctuation.accessor.ts#9e386a
punctuation.accessor.tsx#A53B6F
punctuation.separator.key-value.js#9e386a
punctuation.separator.key-value.jsx#AC3D74
punctuation.separator.key-value.ts#A53B6F
punctuation.separator.key-value.tsx#9e386a
storage.modifier.js#AC3D74
storage.modifier.jsx#9e386a
storage.modifier.ts#AC3D74
storage.modifier.tsx#A53B6F
storage.type#9e386a
string.template#A53B6F
support.constant#9e386a
support.function.dom.js#903360
support.function.dom.jsx#9e386a
support.function.dom.ts#A53B6F
support.function.dom.tsx#9e386a
support.variable.property.js#9e386a
support.variable.property.jsx#9e386a
support.variable.property.ts#9e386a
support.variable.property.tsx#973565
variable.language.constructor#9e386aunderline
variable.language.this#973565