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