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#9e958f
  • editor.background#283041
  • editor.lineHighlightBackground#394852
  • editor.selectionBackground#F8E2E2E6
  • editorBracketMatch.background#EC6DCDf3
  • editorBracketMatch.border#129C97
  • editorGroupHeader.tabsBackground#2D3841
  • editorGutter.background#303c45
  • editorLineNumber.foreground#8C817A
  • scrollbarSlider.background#9e958f
  • scrollbarSlider.hoverBackground#8C817A
  • sideBar.background#958B85
  • statusBar.background#827770
  • tab.activeBackground#303c45
  • tab.activeForeground#E3E278
  • tab.border#303c45
  • tab.inactiveBackground#827770
  • tab.inactiveForeground#303c45

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.parameters.begin.js#21B9C7—
punctuation.definition.parameters.begin.jsx#1da4b0—
punctuation.definition.parameters.begin.ts#1B99A5—
punctuation.definition.parameters.begin.tsx#1FAFBB—
punctuation.definition.parameters.end.js#1da4b0—
punctuation.definition.parameters.end.jsx#1B99A5—
punctuation.definition.parameters.end.ts#1da4b0—
punctuation.definition.parameters.end.tsx#1B99A5—
punctuation.definition.parameters.end.js#17848E—
punctuation.definition.parameters.end.jsx#21B9C7—
punctuation.definition.parameters.end.ts#1B99A5—
punctuation.definition.parameters.end.tsx#1B99A5—
markup.quote#1da4b0—
meta.tag.js#198F99—
meta.tag.jsx#1da4b0—
meta.tag.ts#1B99A5—
meta.tag.tsx#1da4b0—
meta.parameters.js#1da4b0—
meta.parameters.jsx#1FAFBB—
meta.parameters.ts#1B99A5—
meta.parameters.tsx#198F99—
meta.brace.square.js#1B99A5—
meta.brace.square.jsx#17848E—
meta.brace.square.ts#198F99—
meta.brace.square.tsx#1B99A5—
variable.other.class.js#1da4b0—
variable.other.class.jsx#1B99A5—
variable.other.class.ts#1B99A5—
variable.other.class.tsx#1FAFBB—
constant.other.object.key.js#21B9C7—
constant.other.object.key.jsx#1B99A5—
constant.other.object.key.ts#1da4b0—
constant.other.object.key.tsx#1da4b0—
entity.name.function.method#21B9C7—
string.template#1da4b0—
support.type.property-name.json#1B99A5—
variable.other.property.js#17848E—
variable.other.property.jsx#1da4b0—
variable.other.property.ts#1da4b0—
variable.other.property.tsx#1da4b0—
punctuation.separator.key-value.js#EFEFB4—
punctuation.separator.key-value.jsx#E3E278—
punctuation.separator.key-value.ts#e7e68c—
punctuation.separator.key-value.tsx#e7e68c—
storage.modifier.async.js#E3E278—
storage.modifier.async.jsx#E3E278—
storage.modifier.async.ts#e7e68c—
storage.modifier.async.tsx#e7e68c—
meta.brace.round.js#e7e68c—
meta.brace.round.jsx#E3E278—
meta.brace.round.ts#e7e68c—
meta.brace.round.tsx#DFDD64—
entity.other.inherited-class#F3F3C8—
support.class.builtin.js#E3E278—
support.class.builtin.jsx#e7e68c—
support.class.builtin.ts#e7e68c—
support.class.builtin.tsx#e7e68c—
meta.tag.attributes.js#E3E278—
meta.tag.attributes.jsx#e7e68c—
meta.tag.attributes.ts#EBEAA0—
meta.tag.attributes.tsx#DBD950—
keyword.control.module.js#DBD950—
keyword.control.module.jsx#e7e68c—
keyword.control.module.ts#e7e68c—
keyword.control.module.tsx#e7e68c—
keyword.operator.accessor#E3E278—
invalid#DBD950underline
constant.numeric#E3E278—
keyword#e7e68c—
meta.var.expr.js#e7e68c—
meta.var.expr.jsx#EBEAA0—
meta.var.expr.ts#e7e68c—
meta.var.expr.tsx#EBEAA0—
keyword.control.import.js#e7e68c—
keyword.control.import.jsx#EFEFB4—
keyword.control.import.ts#e7e68c—
keyword.control.import.tsx#e7e68c—
keyword.control.from.js#e7e68c—
keyword.control.from.jsx#e7e68c—
keyword.control.from.ts#E3E278—
keyword.control.from.tsx#e7e68c—
keyword.control.export.js#EBEAA0—
keyword.control.export.jsx#E3E278—
keyword.control.export.ts#E3E278—
keyword.control.export.tsx#E3E278—
keyword.control.default.js#e7e68c—
keyword.control.default.jsx#DBD950—
keyword.control.default.ts#E3E278—
keyword.control.default.tsx#e7e68c—
support.type.object.module.js#DFDD64—
support.type.object.module.jsx#F3F3C8—
support.type.object.module.ts#F3F3C8—
support.type.object.module.tsx#e7e68c—
constant.language.boolean#F47D4FB3—
constant.language.null.js#F47D4FF9—
constant.language.null.jsx#F47D4FF9—
constant.language.null.ts#F47D4Ff3—
constant.language.null.tsx#F47D4FF9—
entity.name.class#F47D4FF9underline
entity.name.function#F47D4Ff3underline
entity.name.type#F47D4FDBunderline
markup.heading.markdown#F47D4Ff3—
punctuation.separator.comma.js#F47D4Ff3—
punctuation.separator.comma.jsx#F47D4Ff3—
punctuation.separator.comma.ts#F47D4FB3—
punctuation.separator.comma.tsx#F47D4FF9—
support.variable.property.js#F47D4FF9—
support.variable.property.jsx#F47D4Ff3—
support.variable.property.ts#F47D4Ff3—
support.variable.property.tsx#F47D4FF9—
support.type.primitive.js#F47D4FDB—
support.type.primitive.jsx#F47D4FF9—
support.type.primitive.ts#F47D4Ff3—
support.type.primitive.tsx#F47D4FF9—
variable#F47D4FF9—
variable.parameter#e5aa83—
support.function#e5aa83—
meta.import.js#e5aa83—
meta.import.jsx#E9B796—
meta.import.ts#e5aa83—
meta.import.tsx#e5aa83—
meta.paragraph.markdown#D98249—
entity.other.attribute-name.js#e5aa83—
entity.other.attribute-name.jsx#e5aa83—
entity.other.attribute-name.ts#E19D70—
entity.other.attribute-name.tsx#E19D70—
string.quoted.single.js#e5aa83—
string.quoted.single.jsx#e5aa83—
string.quoted.single.ts#e5aa83—
string.quoted.single.tsx#F1D2BD—
string.quoted.single.json#e5aa83—
support.class.promise.js#e5aa83—
support.class.promise.jsx#e5aa83—
support.class.promise.ts#e5aa83—
support.class.promise.tsx#E19D70—
support.type.object.console.js#e5aa83—
support.type.object.console.jsx#E19D70—
support.type.object.console.ts#e5aa83—
support.type.object.console.tsx#e5aa83—
support.function.console.js#e5aa83—
support.function.console.jsx#E9B796—
support.function.console.ts#e5aa83—
support.function.console.tsx#e5aa83—
punctuation.definition.block.js#e5aa83—
punctuation.definition.block.jsx#DD8F5C—
punctuation.definition.block.ts#e5aa83—
punctuation.definition.block.tsx#F1D2BD—
entity.name.tag#15b3aeunderline
markup.italic#11908C—
punctuation.accessor.js#15b3ae—
punctuation.accessor.jsx#14A7A3—
punctuation.accessor.ts#15b3ae—
punctuation.accessor.tsx#15b3ae—
source.js#15b3ae—
source.jsx#15b3ae—
source.ts#16BFB9—
source.tsx#15b3ae—
storage.modifier.js#15b3ae—
storage.modifier.jsx#15b3ae—
storage.modifier.ts#14A7A3—
storage.modifier.tsx#14A7A3—
storage.type#14A7A3—
string.quoted.single.js#14A7A3—
string.quoted.single.jsx#18CAC5—
string.quoted.single.ts#15b3ae—
string.quoted.single.tsx#15b3ae—
support.function.dom.js#19D6D0—
support.function.dom.jsx#11908C—
support.function.dom.ts#11908C—
support.function.dom.tsx#129C97—
support.variable.property.js#19D6D0—
support.variable.property.jsx#15b3ae—
support.variable.property.ts#14A7A3—
support.variable.property.tsx#11908C—
variable.language.constructor#16BFB9underline
variable.language.this#15b3ae—
support.constant#EC6DCDf3—
punctuation.separator.parameter.js#EC6DCDf3—
punctuation.separator.parameter.jsx#EC6DCDCE—
punctuation.separator.parameter.ts#EC6DCDEC—
punctuation.separator.parameter.tsx#EC6DCDA6—
constant.character#EC6DCDEC—
constant.language#EC6DCDEC—
constant.other#EC6DCDEC—
comment#EC6DCDf3—
markup.italic#EC6DCDEC—
meta.object-literal.key.js#EC6DCDEC—
meta.object-literal.key.jsx#EC6DCDBA—
meta.object-literal.key.ts#EC6DCDCE—
meta.object-literal.key.tsx#EC6DCDCE—
comment.block.documentation#EC6DCDEC—
comment.line.double-slash#EC6DCDA6—
punctuation.accessor.js#EC6DCDf3—
punctuation.accessor.jsx#EC6DCDf3—
punctuation.accessor.ts#EC6DCDf3—
punctuation.accessor.tsx#EC6DCDCE—
variable.language#EC6DCDf3—
variable.other.object.js#EC6DCDEC—
variable.other.object.jsx#EC6DCDf3—
variable.other.object.ts#EC6DCDEC—
variable.other.object.tsx#EC6DCDf3—
variable.other.readwrite#EC6DCDEC—
variable.other.readwrite.js#EC6DCDf3—
variable.other.readwrite.jsx#EC6DCDEC—
variable.other.readwrite.ts#EC6DCDEC—
variable.other.readwrite.tsx#EC6DCDEC—
BecauseNever by selfrefactor - VS Code Theme