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#889193
  • editor.background#2A3343
  • editor.lineHighlightBackground#0e2236
  • editor.selectionBackground#8349629a
  • editorBracketMatch.background#589ED0
  • editorBracketMatch.border#E49C73
  • editorGroupHeader.tabsBackground#445A63f3
  • editorGutter.background#445A63EC
  • editorLineNumber.foreground#757F81
  • scrollbarSlider.background#889193
  • scrollbarSlider.hoverBackground#757F81
  • sideBar.background#7E888A
  • statusBar.background#6C7577
  • tab.activeBackground#445A63EC
  • tab.activeForeground#F8E2E2f3
  • tab.border#445A63EC
  • tab.inactiveBackground#6C7577
  • tab.inactiveForeground#eae3cdf1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.parameters.begin.js#b385a5—
punctuation.definition.parameters.begin.jsx#b385a5—
punctuation.definition.parameters.begin.ts#b385a5—
punctuation.definition.parameters.begin.tsx#b385a5—
punctuation.definition.parameters.end.js#b385a5—
punctuation.definition.parameters.end.jsx#b385a5—
punctuation.definition.parameters.end.ts#b385a5—
punctuation.definition.parameters.end.tsx#9B6089—
punctuation.definition.parameters.end.js#b385a5—
punctuation.definition.parameters.end.jsx#b385a5—
punctuation.definition.parameters.end.ts#b385a5—
punctuation.definition.parameters.end.tsx#b385a5—
markup.quote#b385a5—
meta.tag.js#AB799C—
meta.tag.jsx#b385a5—
meta.tag.ts#b385a5—
meta.tag.tsx#A36C93—
meta.parameters.js#AB799C—
meta.parameters.jsx#BB91AE—
meta.parameters.ts#b385a5—
meta.parameters.tsx#b385a5—
meta.brace.square.js#A36C93—
meta.brace.square.jsx#C39EB7—
meta.brace.square.ts#BB91AE—
meta.brace.square.tsx#BB91AE—
variable.other.class.js#b385a5—
variable.other.class.jsx#b385a5—
variable.other.class.ts#AB799C—
variable.other.class.tsx#BB91AE—
constant.other.object.key.js#CAAAC1—
constant.other.object.key.jsx#C39EB7—
constant.other.object.key.ts#C39EB7—
constant.other.object.key.tsx#b385a5—
entity.name.function.method#BB91AE—
string.template#b385a5—
support.type.property-name.json#b385a5—
variable.other.property.js#b385a5—
variable.other.property.jsx#BB91AE—
variable.other.property.ts#AB799C—
variable.other.property.tsx#b385a5—
punctuation.separator.key-value.js#F8E2E2CB—
punctuation.separator.key-value.jsx#F8E2E2E9—
punctuation.separator.key-value.ts#F8E2E2E9—
punctuation.separator.key-value.tsx#F8E2E2f3—
storage.modifier.async.js#F8E2E2E9—
storage.modifier.async.jsx#F8E2E2f3—
storage.modifier.async.ts#F8E2E2E9—
storage.modifier.async.tsx#F8E2E2E9—
meta.brace.round.js#F8E2E2f3—
meta.brace.round.jsx#F8E2E2B7—
meta.brace.round.ts#F8E2E2f3—
meta.brace.round.tsx#F8E2E2f3—
entity.other.inherited-class#F8E2E2f3—
support.class.builtin.js#F8E2E2E9—
support.class.builtin.jsx#F8E2E2f3—
support.class.builtin.ts#F8E2E2E9—
support.class.builtin.tsx#F8E2E2E9—
meta.tag.attributes.js#F8E2E2E9—
meta.tag.attributes.jsx#F8E2E2CB—
meta.tag.attributes.ts#F8E2E2E9—
meta.tag.attributes.tsx#F8E2E2E9—
keyword.control.module.js#F8E2E2f3—
keyword.control.module.jsx#F8E2E2f3—
keyword.control.module.ts#F8E2E2E9—
keyword.control.module.tsx#F8E2E2E9—
keyword.operator.accessor#F8E2E2E9—
invalid#F8E2E2E9underline
constant.numeric#F8E2E2f3—
keyword#F8E2E2E9—
meta.var.expr.js#F8E2E2E9—
meta.var.expr.jsx#F8E2E2E9—
meta.var.expr.ts#F8E2E2f3—
meta.var.expr.tsx#F8E2E2E9—
keyword.control.import.js#F8E2E2B7—
keyword.control.import.jsx#F8E2E2E9—
keyword.control.import.ts#F8E2E2E9—
keyword.control.import.tsx#F8E2E2E9—
keyword.control.from.js#F8E2E2E9—
keyword.control.from.jsx#F8E2E2f3—
keyword.control.from.ts#F8E2E2f3—
keyword.control.from.tsx#F8E2E2E9—
keyword.control.export.js#F8E2E2f3—
keyword.control.export.jsx#F8E2E2E9—
keyword.control.export.ts#F8E2E2E9—
keyword.control.export.tsx#F8E2E2E9—
keyword.control.default.js#F8E2E2f3—
keyword.control.default.jsx#F8E2E2CB—
keyword.control.default.ts#F8E2E2E9—
keyword.control.default.tsx#F8E2E2E9—
support.type.object.module.js#F8E2E2A3—
support.type.object.module.jsx#F8E2E2E9—
support.type.object.module.ts#F8E2E2CB—
support.type.object.module.tsx#F8E2E2E9—
entity.name.tag#FCBB08underline
markup.italic#fcc01a—
punctuation.accessor.js#fcc01a—
punctuation.accessor.jsx#FCBB08—
punctuation.accessor.ts#DDA303—
punctuation.accessor.tsx#FCCA3E—
source.js#FCBB08—
source.jsx#fcc01a—
source.ts#FCBB08—
source.tsx#fcc01a—
storage.modifier.js#fcc01a—
storage.modifier.jsx#FCBB08—
storage.modifier.ts#fcc01a—
storage.modifier.tsx#FCBB08—
storage.type#FCC52C—
string.quoted.single.js#fcc01a—
string.quoted.single.jsx#FCC52C—
string.quoted.single.ts#FCBB08—
string.quoted.single.tsx#fcc01a—
support.function.dom.js#FCBB08—
support.function.dom.jsx#fcc01a—
support.function.dom.ts#FDCF50—
support.function.dom.tsx#FCBB08—
support.variable.property.js#fcc01a—
support.variable.property.jsx#fcc01a—
support.variable.property.ts#DDA303—
support.variable.property.tsx#fcc01a—
variable.language.constructor#fcc01aunderline
variable.language.this#fcc01a—
support.constant#a3d4dd—
punctuation.separator.parameter.js#91CBD6—
punctuation.separator.parameter.jsx#6CBAC9—
punctuation.separator.parameter.ts#a3d4dd—
punctuation.separator.parameter.tsx#a3d4dd—
constant.character#a3d4dd—
constant.language#a3d4dd—
constant.other#a3d4dd—
comment#a3d4dd—
markup.italic#a3d4dd—
meta.object-literal.key.js#a3d4dd—
meta.object-literal.key.jsx#91CBD6—
meta.object-literal.key.ts#a3d4dd—
meta.object-literal.key.tsx#a3d4dd—
comment.block.documentation#91CBD6—
comment.line.double-slash#a3d4dd—
punctuation.accessor.js#6CBAC9—
punctuation.accessor.jsx#91CBD6—
punctuation.accessor.ts#a3d4dd—
punctuation.accessor.tsx#6CBAC9—
variable.language#a3d4dd—
variable.other.object.js#C7E5EA—
variable.other.object.jsx#a3d4dd—
variable.other.object.ts#C7E5EA—
variable.other.object.tsx#a3d4dd—
variable.other.readwrite#91CBD6—
variable.other.readwrite.js#a3d4dd—
variable.other.readwrite.jsx#91CBD6—
variable.other.readwrite.ts#a3d4dd—
variable.other.readwrite.tsx#91CBD6—
variable.parameter#ecba9e—
support.function#F0C9B3—
meta.import.js#ecba9e—
meta.import.jsx#F4D8C9—
meta.import.ts#E8AB89—
meta.import.tsx#DF8C5E—
meta.paragraph.markdown#ecba9e—
entity.other.attribute-name.js#F9E8DE—
entity.other.attribute-name.jsx#ecba9e—
entity.other.attribute-name.ts#F0C9B3—
entity.other.attribute-name.tsx#ecba9e—
string.quoted.single.js#DF8C5E—
string.quoted.single.jsx#E8AB89—
string.quoted.single.ts#ecba9e—
string.quoted.single.tsx#E49C73—
string.quoted.single.json#F9E8DE—
support.class.promise.js#ecba9e—
support.class.promise.jsx#F9E8DE—
support.class.promise.ts#E49C73—
support.class.promise.tsx#F0C9B3—
support.type.object.console.js#ecba9e—
support.type.object.console.jsx#F0C9B3—
support.type.object.console.ts#ecba9e—
support.type.object.console.tsx#ecba9e—
support.function.console.js#ecba9e—
support.function.console.jsx#F9E8DE—
support.function.console.ts#DF8C5E—
support.function.console.tsx#F9E8DE—
punctuation.definition.block.js#ecba9e—
punctuation.definition.block.jsx#F9E8DE—
punctuation.definition.block.ts#E49C73—
punctuation.definition.block.tsx#ecba9e—
constant.language.boolean#6AA8D5—
constant.language.null.js#7bb2da—
constant.language.null.jsx#6AA8D5—
constant.language.null.ts#7bb2da—
constant.language.null.tsx#7bb2da—
entity.name.class#7bb2daunderline
entity.name.function#7bb2daunderline
entity.name.type#9EC6E4underline
markup.heading.markdown#AFD0E9—
punctuation.separator.comma.js#7bb2da—
punctuation.separator.comma.jsx#7bb2da—
punctuation.separator.comma.ts#7bb2da—
punctuation.separator.comma.tsx#7bb2da—
support.variable.property.js#4794CB—
support.variable.property.jsx#8CBCDF—
support.variable.property.ts#7bb2da—
support.variable.property.tsx#8CBCDF—
support.type.primitive.js#7bb2da—
support.type.primitive.jsx#7bb2da—
support.type.primitive.ts#4794CB—
support.type.primitive.tsx#7bb2da—
variable#6AA8D5—
BecauseTogether by selfrefactor - VS Code Theme