Skip to main content
CodingTheme

Color themes

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#cacacc
  • editor.background#ede8e1
  • editor.lineHighlightBackground#cacacc8a
  • editor.selectionBackground#d1c2e0
  • editorBracketMatch.background#965B5F
  • editorBracketMatch.border#317B7B
  • editorGroupHeader.tabsBackground#E0D8CC
  • editorGutter.background#ede8e1
  • editorLineNumber.foreground#ACACAF
  • scrollbarSlider.background#cacacc
  • scrollbarSlider.hoverBackground#ACACAF
  • sideBar.background#BBBBBD
  • statusBar.background#9D9DA0
  • tab.activeBackground#ede8e1
  • tab.activeForeground#55466F
  • tab.border#ede8e1
  • tab.inactiveBackground#9D9DA0
  • tab.inactiveForeground#69578A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant#d8576a
punctuation.definition.template-expression.begin.js#3E73A5
punctuation.definition.template-expression.begin.jsx#427BB0
punctuation.definition.template-expression.begin.ts#3a6b9a
punctuation.definition.template-expression.begin.tsx#3a6b9a
punctuation.definition.template-expression.end.js#3a6b9a
punctuation.definition.template-expression.end.jsx#3a6b9a
punctuation.definition.template-expression.end.ts#36638F
punctuation.definition.template-expression.end.tsx#3a6b9a
entity.name.tag#d8576aunderline
punctuation.accessor.js#5c4c78
punctuation.accessor.jsx#5c4c78
punctuation.accessor.ts#55466F
punctuation.accessor.tsx#4F4166
source.js#a97175
source.jsx#a97175
source.ts#B98B8E
source.tsx#a97175
source.css#965B5F
source.scss#399090
storage.modifier.js#B17E81
storage.modifier.jsx#a97175
storage.modifier.ts#a97175
storage.modifier.tsx#a97175
string.quoted.single.js#DC697A
string.quoted.single.jsx#D0334A
string.quoted.single.ts#D0334A
string.quoted.single.tsx#D4455A
support.function.dom.js#3a6b9a
support.function.dom.jsx#3E73A5
support.function.dom.ts#3a6b9a
support.function.dom.tsx#36638F
support.variable.property.js#635281
support.variable.property.jsx#55466F
support.variable.property.ts#5c4c78
support.variable.property.tsx#4F4166
variable.language.constructor#a97175underline
variable.language.this#36638F
meta.selector.css#DC697A
constant.language.null.js#5c4c78
constant.language.null.jsx#5c4c78
constant.language.null.ts#55466F
constant.language.null.tsx#55466F
entity.name.class#B17E81underline
entity.name.function#d8576aunderline
markup.heading.markdown#D4455A
punctuation.separator.comma.js#D4455A
punctuation.separator.comma.jsx#d8576a
punctuation.separator.comma.ts#E07B8A
punctuation.separator.comma.tsx#D4455A
support.variable.property.js#D0334A
support.variable.property.jsx#d8576a
support.variable.property.ts#d8576a
support.variable.property.tsx#d8576a
support.type.primitive.js#5c4c78
support.type.primitive.jsx#69578A
support.type.primitive.ts#5c4c78
support.type.primitive.tsx#4F4166
meta.brace.square.js#4F4166
meta.brace.square.jsx#5c4c78
meta.brace.square.ts#635281
meta.brace.square.tsx#4F4166
variable.other.class.js#a97175
variable.other.class.jsx#B17E81
variable.other.class.ts#965B5F
variable.other.class.tsx#a97175
constant.other.object.key.js#5c4c78
constant.other.object.key.jsx#5c4c78
constant.other.object.key.ts#5c4c78
constant.other.object.key.tsx#5c4c78
variable.language#427BB0
entity.name.type#5c4c78underline
variable.parameter#635281
support.function#635281
source.json#E07B8A
meta.object-literal.key.js#55466F
meta.object-literal.key.jsx#4F4166
meta.object-literal.key.ts#5c4c78
meta.object-literal.key.tsx#5c4c78
variable.other.constant.js#d8576a
variable.other.constant.jsx#E07B8A
variable.other.constant.ts#E07B8A
variable.other.constant.tsx#d8576a
meta.paragraph.markdown#69578A
entity.other.attribute-name.js#B17E81
entity.other.attribute-name.jsx#965B5F
entity.other.attribute-name.ts#B98B8E
entity.other.attribute-name.tsx#a97175
string.quoted.single.json#69578A
support.class.promise.js#358585
support.class.promise.jsx#399090
support.class.promise.ts#317B7B
support.class.promise.tsx#399090
support.type.object.console.js#41A5A5
support.type.object.console.jsx#399090
support.type.object.console.ts#41A5A5
support.type.object.console.tsx#399090
support.function.console.js#358585
support.function.console.jsx#3D9B9B
support.function.console.ts#358585
support.function.console.tsx#399090
punctuation.definition.block.js#a97175
punctuation.definition.block.jsx#a97175
punctuation.definition.block.ts#a97175
punctuation.definition.block.tsx#a97175
storage.type#3E73A5
variable.other.object.js#965B5F
variable.other.object.jsx#A16469
variable.other.object.ts#a97175
variable.other.object.tsx#B17E81
markup.quote#3a6b9a
meta.import.js#5c4c78
meta.import.jsx#4F4166
meta.import.ts#5c4c78
meta.import.tsx#5c4c78
meta.tag.js#a97175
meta.tag.jsx#a97175
meta.tag.ts#a97175
meta.tag.tsx#965B5F
meta.parameters.js#d8576a
meta.parameters.jsx#d8576a
meta.parameters.ts#D4455A
meta.parameters.tsx#D0334A
string.quoted.single.js#69578A
string.quoted.single.jsx#55466F
string.quoted.single.ts#5c4c78
string.quoted.single.tsx#635281
meta.object-literal.key.js#3a6b9a
meta.object-literal.key.jsx#3E73A5
meta.object-literal.key.ts#3a6b9a
meta.object-literal.key.tsx#3a6b9a
string.template#D4455A
entity.name.function.method#a97175
support.type.property-name.json#3D9B9B
variable.other.property.js#55466F
variable.other.property.jsx#55466F
variable.other.property.ts#69578A
variable.other.property.tsx#55466F
markup.italic#3E73A5
meta.template.expression.js#5c4c78
meta.template.expression.jsx#5c4c78
meta.template.expression.ts#5c4c78
meta.template.expression.tsx#635281
punctuation.separator.parameter.js#325B84
punctuation.separator.parameter.jsx#427BB0
punctuation.separator.parameter.ts#427BB0
punctuation.separator.parameter.tsx#427BB0
constant.character#5c4c78
constant.other#965B5F
comment#a97175
markup.italic#41A5A5
comment.block.documentation#d8576a
comment.line.double-slash#3D9B9B
punctuation.accessor.js#5c4c78
punctuation.accessor.jsx#4F4166
punctuation.accessor.ts#5c4c78
punctuation.accessor.tsx#55466F
punctuation.definition.parameters.begin.js#3a6b9a
punctuation.definition.parameters.begin.jsx#427BB0
punctuation.definition.parameters.begin.ts#427BB0
punctuation.definition.parameters.begin.tsx#3a6b9a
punctuation.definition.parameters.end.js#3a6b9a
punctuation.definition.parameters.end.jsx#36638F
punctuation.definition.parameters.end.ts#3E73A5
punctuation.definition.parameters.end.tsx#3E73A5
constant.language#635281
constant.language.boolean#3D9B9B
punctuation.separator.key-value.js#36638F
punctuation.separator.key-value.jsx#3a6b9a
punctuation.separator.key-value.ts#3a6b9a
punctuation.separator.key-value.tsx#427BB0
storage.modifier.async.js#3D9B9B
storage.modifier.async.jsx#399090
storage.modifier.async.ts#399090
storage.modifier.async.tsx#399090
meta.brace.round.js#3a6b9a
meta.brace.round.jsx#3a6b9a
meta.brace.round.ts#3a6b9a
meta.brace.round.tsx#36638F
entity.other.inherited-class#a97175
support.class.builtin.js#B98B8E
support.class.builtin.jsx#a97175
support.class.builtin.ts#a97175
support.class.builtin.tsx#A16469
meta.tag.attributes.js#3a6b9a
meta.tag.attributes.jsx#325B84
meta.tag.attributes.ts#3E73A5
meta.tag.attributes.tsx#3a6b9a
keyword.control.module.js#5c4c78
keyword.control.module.jsx#5c4c78
keyword.control.module.ts#55466F
keyword.control.module.tsx#5c4c78
keyword.operator.accessor#5c4c78
invalid#3a6b9aunderline
constant.numeric#A16469
keyword#4F4166
meta.var.expr.js#a97175
meta.var.expr.jsx#B17E81
meta.var.expr.ts#B98B8E
meta.var.expr.tsx#a97175
keyword.control.import.js#5c4c78
keyword.control.import.jsx#5c4c78
keyword.control.import.ts#5c4c78
keyword.control.import.tsx#5c4c78
keyword.control.from.js#E07B8A
keyword.control.from.jsx#E07B8A
keyword.control.from.ts#d8576a
keyword.control.from.tsx#E07B8A
keyword.control.export.js#d8576a
keyword.control.export.jsx#d8576a
keyword.control.export.ts#D0334A
keyword.control.export.tsx#d8576a
keyword.control.default.js#D4455A
keyword.control.default.jsx#d8576a
keyword.control.default.ts#E07B8A
keyword.control.default.tsx#d8576a
support.type.object.module.js#3E73A5
support.type.object.module.jsx#3E73A5
support.type.object.module.ts#427BB0
support.type.object.module.tsx#3a6b9a

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...