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#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—
NiketaBear by selfrefactor - VS Code Theme