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#828d83e9
  • editor.background#2A3343
  • editor.lineHighlightBackground#0e2236
  • editor.selectionBackground#F8E2E2D2
  • editorBracketMatch.background#E1DDD9f3
  • editorBracketMatch.border#9AD6E3
  • editorGroupHeader.tabsBackground#445A63f3
  • editorGutter.background#445A63F4
  • editorLineNumber.foreground#828d83e9
  • scrollbarSlider.background#828d83e9
  • scrollbarSlider.hoverBackground#828d83e9
  • sideBar.background#828d83e9
  • statusBar.background#828d83e9
  • tab.activeBackground#445A63F4
  • tab.activeForeground#E48D78
  • tab.border#445A63F4
  • tab.inactiveBackground#828d83e9
  • tab.inactiveForeground#F0C0B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language.boolean#FDFDD8—
constant.language.null.js#F6F658—
constant.language.null.jsx#FBFBBF—
constant.language.null.ts#FBFBBF—
constant.language.null.tsx#fafaa5—
entity.name.class#fafaa5underline
entity.name.function#FBFBBFunderline
entity.name.type#FEFEF2underline
markup.heading.markdown#F9F98B—
punctuation.separator.comma.js#fafaa5—
punctuation.separator.comma.jsx#fafaa5—
punctuation.separator.comma.ts#F9F98B—
punctuation.separator.comma.tsx#FDFDD8—
support.variable.property.js#fafaa5—
support.variable.property.jsx#fafaa5—
support.variable.property.ts#fafaa5—
support.variable.property.tsx#fafaa5—
support.type.primitive.js#fafaa5—
support.type.primitive.jsx#F9F98B—
support.type.primitive.ts#F9F98B—
support.type.primitive.tsx#F9F98B—
variable#fafaa5—
punctuation.separator.key-value.js#E48D78—
punctuation.separator.key-value.jsx#E07C64—
punctuation.separator.key-value.ts#E07C64—
punctuation.separator.key-value.tsx#e89e8c—
storage.modifier.async.js#e89e8c—
storage.modifier.async.jsx#ECAFA0—
storage.modifier.async.ts#e89e8c—
storage.modifier.async.tsx#E48D78—
meta.brace.round.js#DC6B50—
meta.brace.round.jsx#F0C0B4—
meta.brace.round.ts#E48D78—
meta.brace.round.tsx#e89e8c—
entity.other.inherited-class#e89e8c—
support.class.builtin.js#e89e8c—
support.class.builtin.jsx#E07C64—
support.class.builtin.ts#e89e8c—
support.class.builtin.tsx#F0C0B4—
meta.tag.attributes.js#e89e8c—
meta.tag.attributes.jsx#e89e8c—
meta.tag.attributes.ts#F0C0B4—
meta.tag.attributes.tsx#F4D1C8—
keyword.control.module.js#e89e8c—
keyword.control.module.jsx#e89e8c—
keyword.control.module.ts#E48D78—
keyword.control.module.tsx#ECAFA0—
keyword.operator.accessor#E48D78—
invalid#e89e8cunderline
constant.numeric#e89e8c—
keyword#e89e8c—
meta.var.expr.js#e89e8c—
meta.var.expr.jsx#F0C0B4—
meta.var.expr.ts#DC6B50—
meta.var.expr.tsx#e89e8c—
keyword.control.import.js#e89e8c—
keyword.control.import.jsx#E48D78—
keyword.control.import.ts#e89e8c—
keyword.control.import.tsx#e89e8c—
keyword.control.from.js#e89e8c—
keyword.control.from.jsx#e89e8c—
keyword.control.from.ts#E07C64—
keyword.control.from.tsx#e89e8c—
keyword.control.export.js#e89e8c—
keyword.control.export.jsx#ECAFA0—
keyword.control.export.ts#e89e8c—
keyword.control.export.tsx#e89e8c—
keyword.control.default.js#E07C64—
keyword.control.default.jsx#e89e8c—
keyword.control.default.ts#ECAFA0—
keyword.control.default.tsx#ECAFA0—
support.type.object.module.js#E07C64—
support.type.object.module.jsx#E07C64—
support.type.object.module.ts#e89e8c—
support.type.object.module.tsx#F4D1C8—
punctuation.definition.parameters.begin.js#FB9700—
punctuation.definition.parameters.begin.jsx#BE7200—
punctuation.definition.parameters.begin.ts#DD8500—
punctuation.definition.parameters.begin.tsx#BE7200—
punctuation.definition.parameters.end.js#FB9700—
punctuation.definition.parameters.end.jsx#BE7200—
punctuation.definition.parameters.end.ts#ec8e00—
punctuation.definition.parameters.end.tsx#ec8e00—
punctuation.definition.parameters.end.js#FFA41B—
punctuation.definition.parameters.end.jsx#ec8e00—
punctuation.definition.parameters.end.ts#ec8e00—
punctuation.definition.parameters.end.tsx#DD8500—
markup.quote#ec8e00—
meta.tag.js#DD8500—
meta.tag.jsx#ec8e00—
meta.tag.ts#FB9700—
meta.tag.tsx#CD7C00—
meta.parameters.js#ec8e00—
meta.parameters.jsx#ec8e00—
meta.parameters.ts#ec8e00—
meta.parameters.tsx#ec8e00—
meta.brace.square.js#ec8e00—
meta.brace.square.jsx#DD8500—
meta.brace.square.ts#DD8500—
meta.brace.square.tsx#FF9E0C—
variable.other.class.js#CD7C00—
variable.other.class.jsx#ec8e00—
variable.other.class.ts#FFA41B—
variable.other.class.tsx#FF9E0C—
constant.other.object.key.js#FF9E0C—
constant.other.object.key.jsx#FF9E0C—
constant.other.object.key.ts#ec8e00—
constant.other.object.key.tsx#FFA41B—
entity.name.function.method#CD7C00—
string.template#FF9E0C—
support.type.property-name.json#ec8e00—
variable.other.property.js#DD8500—
variable.other.property.jsx#ec8e00—
variable.other.property.ts#ec8e00—
variable.other.property.tsx#FB9700—
variable.parameter#7FC4D0—
support.function#B5DDE4—
meta.import.js#7FC4D0—
meta.import.jsx#a3d5dd—
meta.import.ts#B5DDE4—
meta.import.tsx#a3d5dd—
meta.paragraph.markdown#B5DDE4—
entity.other.attribute-name.js#a3d5dd—
entity.other.attribute-name.jsx#a3d5dd—
entity.other.attribute-name.ts#DAEEF1—
entity.other.attribute-name.tsx#91CDD6—
string.quoted.single.js#C7E6EA—
string.quoted.single.jsx#6CBCC9—
string.quoted.single.ts#a3d5dd—
string.quoted.single.tsx#a3d5dd—
string.quoted.single.json#a3d5dd—
support.class.promise.js#a3d5dd—
support.class.promise.jsx#91CDD6—
support.class.promise.ts#a3d5dd—
support.class.promise.tsx#a3d5dd—
support.type.object.console.js#a3d5dd—
support.type.object.console.jsx#a3d5dd—
support.type.object.console.ts#a3d5dd—
support.type.object.console.tsx#91CDD6—
support.function.console.js#B5DDE4—
support.function.console.jsx#6CBCC9—
support.function.console.ts#a3d5dd—
support.function.console.tsx#a3d5dd—
punctuation.definition.block.js#91CDD6—
punctuation.definition.block.jsx#7FC4D0—
punctuation.definition.block.ts#B5DDE4—
punctuation.definition.block.tsx#a3d5dd—
support.constant#B0DFE9—
punctuation.separator.parameter.js#c6e8ef—
punctuation.separator.parameter.jsx#c6e8ef—
punctuation.separator.parameter.ts#B0DFE9—
punctuation.separator.parameter.tsx#DCF1F5—
constant.character#FFFFFF—
constant.language#FFFFFF—
constant.other#c6e8ef—
comment#DCF1F5—
markup.italic#c6e8ef—
meta.object-literal.key.js#83CDDC—
meta.object-literal.key.jsx#c6e8ef—
meta.object-literal.key.ts#DCF1F5—
meta.object-literal.key.tsx#c6e8ef—
comment.block.documentation#c6e8ef—
comment.line.double-slash#c6e8ef—
punctuation.accessor.js#c6e8ef—
punctuation.accessor.jsx#B0DFE9—
punctuation.accessor.ts#9AD6E3—
punctuation.accessor.tsx#c6e8ef—
variable.language#FFFFFF—
variable.other.object.js#B0DFE9—
variable.other.object.jsx#B0DFE9—
variable.other.object.ts#c6e8ef—
variable.other.object.tsx#c6e8ef—
variable.other.readwrite#B0DFE9—
variable.other.readwrite.js#DCF1F5—
variable.other.readwrite.jsx#c6e8ef—
variable.other.readwrite.ts#83CDDC—
variable.other.readwrite.tsx#B0DFE9—
entity.name.tag#E1DDD9C0underline
markup.italic#E1DDD9f3—
punctuation.accessor.js#E1DDD9E8—
punctuation.accessor.jsx#E1DDD9C0—
punctuation.accessor.ts#E1DDD9C0—
punctuation.accessor.tsx#E1DDD97A—
source.js#E1DDD9E8—
source.jsx#E1DDD9C0—
source.ts#E1DDD9E8—
source.tsx#E1DDD9A2—
storage.modifier.js#E1DDD9A2—
storage.modifier.jsx#E1DDD9C0—
storage.modifier.ts#E1DDD9C0—
storage.modifier.tsx#E1DDD9C0—
storage.type#E1DDD9E8—
string.quoted.single.js#E1DDD9C0—
string.quoted.single.jsx#E1DDD9C0—
string.quoted.single.ts#E1DDD9A2—
string.quoted.single.tsx#E1DDD9C0—
support.function.dom.js#E1DDD9E8—
support.function.dom.jsx#E1DDD9C0—
support.function.dom.ts#E1DDD98E—
support.function.dom.tsx#E1DDD9C0—
support.variable.property.js#E1DDD9C0—
support.variable.property.jsx#E1DDD9E8—
support.variable.property.ts#E1DDD9C0—
support.variable.property.tsx#E1DDD9C0—
variable.language.constructor#E1DDD9C0underline
variable.language.this#E1DDD9E8—
BecauseAsk by selfrefactor - VS Code Theme