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#c9c9c1
  • editor.background#f1f1f1
  • editor.lineHighlightBackground#EDEDEA
  • editor.selectionBackground#b2e4d6
  • editorBracketMatch.background#770B44
  • editorBracketMatch.border#770B44
  • editorGroupHeader.tabsBackground#E1E1E1
  • editorGutter.background#f1f1f1
  • editorLineNumber.foreground#B1B1A6
  • scrollbarSlider.background#c9c9c1
  • scrollbarSlider.hoverBackground#B1B1A6
  • sideBar.background#BDBDB3
  • statusBar.background#A5A598
  • tab.activeBackground#f1f1f1
  • tab.activeForeground#D26249
  • tab.border#f1f1f1
  • tab.inactiveBackground#A5A598
  • tab.inactiveForeground#f1f1f1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter#2D5D7A
support.function#316483
meta.import.js#2D5D7A
meta.import.jsx#387397
meta.import.ts#387397
meta.import.tsx#346C8D
meta.paragraph.markdown#346C8D
entity.other.attribute-name.js#346C8D
entity.other.attribute-name.jsx#387397
entity.other.attribute-name.ts#346C8D
entity.other.attribute-name.tsx#346C8D
string.quoted.single.js#3C7AA1
string.quoted.single.jsx#346C8D
string.quoted.single.ts#346C8D
string.quoted.single.tsx#387397
string.quoted.single.json#3C7AA1
support.class.promise.js#387397
support.class.promise.jsx#346C8D
support.class.promise.ts#387397
support.class.promise.tsx#387397
support.type.object.console.js#387397
support.type.object.console.jsx#3C7AA1
support.type.object.console.ts#387397
support.type.object.console.tsx#387397
support.function.console.js#346C8D
support.function.console.jsx#387397
support.function.console.ts#387397
support.function.console.tsx#387397
punctuation.definition.block.js#387397
punctuation.definition.block.jsx#387397
punctuation.definition.block.ts#387397
punctuation.definition.block.tsx#3C7AA1
entity.name.tag#D26249underline
markup.italic#C44B30
punctuation.accessor.js#d67059
punctuation.accessor.jsx#d67059
punctuation.accessor.ts#C44B30
punctuation.accessor.tsx#d67059
source.js#D26249
source.jsx#d67059
source.ts#C44B30
source.tsx#d67059
storage.modifier.js#D26249
storage.modifier.jsx#d67059
storage.modifier.ts#d67059
storage.modifier.tsx#C44B30
storage.type#d67059
string.quoted.single.js#d67059
string.quoted.single.jsx#d67059
string.quoted.single.ts#d67059
string.quoted.single.tsx#d67059
support.function.dom.js#d67059
support.function.dom.jsx#D26249
support.function.dom.ts#d67059
support.function.dom.tsx#d67059
support.variable.property.js#d67059
support.variable.property.jsx#d67059
support.variable.property.ts#CE5539
support.variable.property.tsx#d67059
variable.language.constructor#d67059underline
variable.language.this#d67059
constant.language.boolean#4288b1
constant.language.null.js#5497BF
constant.language.null.jsx#3E7FA5
constant.language.null.ts#4288b1
constant.language.null.tsx#4890BB
entity.name.class#4288b1underline
entity.name.function#4288b1underline
entity.name.type#3E7FA5underline
markup.heading.markdown#4288b1
punctuation.separator.comma.js#4288b1
punctuation.separator.comma.jsx#4288b1
punctuation.separator.comma.ts#3E7FA5
punctuation.separator.comma.tsx#5F9EC3
support.variable.property.js#4890BB
support.variable.property.jsx#4288b1
support.variable.property.ts#5F9EC3
support.variable.property.tsx#4288b1
support.type.primitive.js#3E7FA5
support.type.primitive.jsx#4288b1
support.type.primitive.ts#4890BB
support.type.primitive.tsx#3E7FA5
variable#4288b1
punctuation.separator.key-value.js#598132
punctuation.separator.key-value.jsx#53792F
punctuation.separator.key-value.ts#598132
punctuation.separator.key-value.tsx#598132
storage.modifier.async.js#598132
storage.modifier.async.jsx#598132
storage.modifier.async.ts#598132
storage.modifier.async.tsx#5F8935
meta.brace.round.js#5F8935
meta.brace.round.jsx#598132
meta.brace.round.ts#5F8935
meta.brace.round.tsx#598132
entity.other.inherited-class#598132
support.class.builtin.js#659239
support.class.builtin.jsx#659239
support.class.builtin.ts#598132
support.class.builtin.tsx#598132
meta.tag.attributes.js#598132
meta.tag.attributes.jsx#53792F
meta.tag.attributes.ts#598132
meta.tag.attributes.tsx#598132
keyword.control.module.js#53792F
keyword.control.module.jsx#598132
keyword.control.module.ts#598132
keyword.control.module.tsx#659239
keyword.operator.accessor#598132
invalid#598132underline
constant.numeric#5F8935
keyword#659239
meta.var.expr.js#598132
meta.var.expr.jsx#598132
meta.var.expr.ts#53792F
meta.var.expr.tsx#53792F
keyword.control.import.js#53792F
keyword.control.import.jsx#598132
keyword.control.import.ts#53792F
keyword.control.import.tsx#598132
keyword.control.from.js#659239
keyword.control.from.jsx#598132
keyword.control.from.ts#6A9A3C
keyword.control.from.tsx#53792F
keyword.control.export.js#659239
keyword.control.export.jsx#6A9A3C
keyword.control.export.ts#598132
keyword.control.export.tsx#659239
keyword.control.default.js#598132
keyword.control.default.jsx#598132
keyword.control.default.ts#598132
keyword.control.default.tsx#598132
support.type.object.module.js#598132
support.type.object.module.jsx#598132
support.type.object.module.ts#5F8935
support.type.object.module.tsx#598132
punctuation.definition.parameters.begin.js#800C49
punctuation.definition.parameters.begin.jsx#890d4e
punctuation.definition.parameters.begin.ts#920E53
punctuation.definition.parameters.begin.tsx#890d4e
punctuation.definition.parameters.end.js#6E0A3F
punctuation.definition.parameters.end.jsx#770B44
punctuation.definition.parameters.end.ts#890d4e
punctuation.definition.parameters.end.tsx#890d4e
punctuation.definition.parameters.end.js#800C49
punctuation.definition.parameters.end.jsx#890d4e
punctuation.definition.parameters.end.ts#890d4e
punctuation.definition.parameters.end.tsx#890d4e
markup.quote#6E0A3F
meta.tag.js#6E0A3F
meta.tag.jsx#A4105D
meta.tag.ts#890d4e
meta.tag.tsx#890d4e
meta.parameters.js#800C49
meta.parameters.jsx#890d4e
meta.parameters.ts#770B44
meta.parameters.tsx#890d4e
meta.brace.square.js#890d4e
meta.brace.square.jsx#890d4e
meta.brace.square.ts#800C49
meta.brace.square.tsx#6E0A3F
variable.other.class.js#890d4e
variable.other.class.jsx#800C49
variable.other.class.ts#890d4e
variable.other.class.tsx#890d4e
constant.other.object.key.js#890d4e
constant.other.object.key.jsx#920E53
constant.other.object.key.ts#800C49
constant.other.object.key.tsx#800C49
entity.name.function.method#800C49
string.template#800C49
support.type.property-name.json#A4105D
variable.other.property.js#770B44
variable.other.property.jsx#890d4e
variable.other.property.ts#800C49
variable.other.property.tsx#890d4e
support.constant#890d4e
punctuation.separator.parameter.js#890d4e
punctuation.separator.parameter.jsx#890d4e
punctuation.separator.parameter.ts#800C49
punctuation.separator.parameter.tsx#890d4e
constant.character#920E53
constant.language#9B0F58
constant.other#890d4e
comment#A4105D
markup.italic#890d4e
meta.object-literal.key.js#770B44
meta.object-literal.key.jsx#800C49
meta.object-literal.key.ts#890d4e
meta.object-literal.key.tsx#770B44
comment.block.documentation#890d4e
comment.line.double-slash#9B0F58
punctuation.accessor.js#890d4e
punctuation.accessor.jsx#890d4e
punctuation.accessor.ts#890d4e
punctuation.accessor.tsx#890d4e
variable.language#890d4e
variable.other.object.js#890d4e
variable.other.object.jsx#890d4e
variable.other.object.ts#890d4e
variable.other.object.tsx#890d4e
variable.other.readwrite#890d4e
variable.other.readwrite.js#890d4e
variable.other.readwrite.jsx#6E0A3F
variable.other.readwrite.ts#890d4e
variable.other.readwrite.tsx#920E53

Shiki preview

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

Loading...