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#eae3d1
  • editor.background#f9f6f2
  • editor.lineHighlightBackground#eae3d1a1
  • editor.selectionBackground#cde3d1
  • editorBracketMatch.background#412D4D
  • editorBracketMatch.border#46213E
  • editorGroupHeader.tabsBackground#F0E8DE
  • editorGutter.background#f9f6f2
  • editorLineNumber.foreground#D9CDAD
  • scrollbarSlider.background#eae3d1
  • scrollbarSlider.hoverBackground#D9CDAD
  • sideBar.background#E2D8BF
  • statusBar.background#D1C29A
  • tab.activeBackground#f9f6f2
  • tab.activeForeground#A5325E
  • tab.border#f9f6f2
  • tab.inactiveBackground#D1C29A
  • tab.inactiveForeground#C43C70

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#78864dunderline
markup.italic#9A2F58
punctuation.accessor.js#78864d
punctuation.accessor.jsx#869656
punctuation.accessor.ts#6A7644
punctuation.accessor.tsx#78864d
source.js#4A2443
source.jsx#4f2647
source.ts#4f2647
source.tsx#4f2647
storage.modifier.js#B05345
storage.modifier.jsx#B05345
storage.modifier.ts#A54D41
storage.modifier.tsx#C26F63
storage.type#463053
string.quoted.single.js#b95a4c
string.quoted.single.jsx#C26F63
string.quoted.single.ts#B05345
string.quoted.single.tsx#A54D41
support.function.dom.js#4f2647
support.function.dom.jsx#4A2443
support.function.dom.ts#582B50
support.function.dom.tsx#46213E
support.variable.property.js#af3564
support.variable.property.jsx#af3564
support.variable.property.ts#BA386A
support.variable.property.tsx#C43C70
variable.language.constructor#6A7644underline
variable.language.this#463053
constant.language.boolean#4f2647
constant.language.null.js#af3564
constant.language.null.jsx#af3564
constant.language.null.ts#A5325E
constant.language.null.tsx#af3564
entity.name.class#C26F63underline
entity.name.function#4a3358underline
entity.name.type#4f2647underline
markup.heading.markdown#4a3358
meta.parameters.js#78864d
meta.parameters.jsx#78864d
meta.parameters.ts#6A7644
meta.parameters.tsx#869656
punctuation.separator.comma.js#78864d
punctuation.separator.comma.jsx#7F8E52
punctuation.separator.comma.ts#78864d
punctuation.separator.comma.tsx#869656
support.variable.property.js#af3564
support.variable.property.jsx#af3564
support.variable.property.ts#af3564
support.variable.property.tsx#BA386A
variable#af3564
variable.parameter#BA386A
support.function#412D4D
meta.import.js#B05345
meta.import.jsx#B05345
meta.import.ts#B05345
meta.import.tsx#B05345
meta.object-literal.key.js#b95a4c
meta.object-literal.key.jsx#b95a4c
meta.object-literal.key.ts#b95a4c
meta.object-literal.key.tsx#b95a4c
meta.paragraph.markdown#78864d
entity.other.attribute-name.js#78864d
entity.other.attribute-name.jsx#78864d
entity.other.attribute-name.ts#869656
entity.other.attribute-name.tsx#78864d
string.quoted.single.js#af3564
string.quoted.single.jsx#BA386A
string.quoted.single.ts#af3564
string.quoted.single.tsx#9A2F58
string.quoted.single.json#4f2647
support.class.promise.js#B05345
support.class.promise.jsx#A54D41
support.class.promise.ts#b95a4c
support.class.promise.tsx#b95a4c
support.type.object.console.js#4f2647
support.type.object.console.jsx#582B50
support.type.object.console.ts#4f2647
support.type.object.console.tsx#582B50
support.function.console.js#6A7644
support.function.console.jsx#869656
support.function.console.ts#6A7644
support.function.console.tsx#78864d
punctuation.definition.block.js#C43C70
punctuation.definition.block.jsx#A5325E
punctuation.definition.block.ts#C43C70
punctuation.definition.block.tsx#af3564
markup.quote#af3564
meta.tag.js#4a3358
meta.tag.jsx#412D4D
meta.tag.ts#533963
meta.tag.tsx#4a3358
punctuation.definition.parameters.begin.js#B05345
punctuation.definition.parameters.begin.jsx#b95a4c
punctuation.definition.parameters.begin.ts#b95a4c
punctuation.definition.parameters.begin.tsx#b95a4c
punctuation.definition.parameters.end.js#B05345
punctuation.definition.parameters.end.jsx#B05345
punctuation.definition.parameters.end.ts#B05345
punctuation.definition.parameters.end.tsx#B05345
meta.brace.square.js#b95a4c
meta.brace.square.jsx#BD6457
meta.brace.square.ts#C26F63
meta.brace.square.tsx#b95a4c
variable.other.class.js#b95a4c
variable.other.class.jsx#B05345
variable.other.class.ts#b95a4c
variable.other.class.tsx#A54D41
constant.other.object.key.js#C43C70
constant.other.object.key.jsx#C43C70
constant.other.object.key.ts#BA386A
constant.other.object.key.tsx#af3564
entity.name.function.method#4f2647
meta.object-literal.key.js#717E48
meta.object-literal.key.jsx#78864d
meta.object-literal.key.ts#78864d
meta.object-literal.key.tsx#717E48
string.template#4E365D
support.type.primitive.js#4a3358
support.type.primitive.jsx#4E365D
support.type.primitive.ts#533963
support.type.primitive.tsx#4a3358
support.type.property-name.json#af3564
variable.other.property.js#533963
variable.other.property.jsx#533963
variable.other.property.ts#463053
variable.other.property.tsx#463053
support.constant#869656
punctuation.separator.parameter.js#412D4D
punctuation.separator.parameter.jsx#463053
punctuation.separator.parameter.ts#533963
punctuation.separator.parameter.tsx#463053
constant.character#78864d
constant.language#463053
constant.other#b95a4c
comment#4A2443
markup.italic#4f2647
comment.block.documentation#54284B
comment.line.double-slash#533963
punctuation.accessor.js#4f2647
punctuation.accessor.jsx#4A2443
punctuation.accessor.ts#4f2647
punctuation.accessor.tsx#54284B
variable.language#b95a4c
variable.other.object.js#4f2647
variable.other.object.jsx#4f2647
variable.other.object.ts#46213E
variable.other.object.tsx#4f2647
variable.other.readwrite#b95a4c
variable.other.readwrite.js#b95a4c
variable.other.readwrite.jsx#b95a4c
variable.other.readwrite.ts#b95a4c
variable.other.readwrite.tsx#b95a4c
punctuation.separator.key-value.js#af3564
punctuation.separator.key-value.jsx#af3564
punctuation.separator.key-value.ts#af3564
punctuation.separator.key-value.tsx#9A2F58
storage.modifier.async.js#af3564
storage.modifier.async.jsx#af3564
storage.modifier.async.ts#af3564
storage.modifier.async.tsx#BA386A
meta.brace.round.js#b95a4c
meta.brace.round.jsx#b95a4c
meta.brace.round.ts#BD6457
meta.brace.round.tsx#C26F63
entity.other.inherited-class#533963
support.class.builtin.js#C26F63
support.class.builtin.jsx#b95a4c
support.class.builtin.ts#b95a4c
support.class.builtin.tsx#BD6457
meta.tag.attributes.js#46213E
meta.tag.attributes.jsx#4f2647
meta.tag.attributes.ts#4f2647
meta.tag.attributes.tsx#46213E
keyword.control.module.js#b95a4c
keyword.control.module.jsx#B05345
keyword.control.module.ts#A54D41
keyword.control.module.tsx#b95a4c
keyword.operator.accessor#9A2F58
invalid#4f2647underline
constant.numeric#B05345
keyword#412D4D
meta.var.expr.js#C43C70
meta.var.expr.jsx#C43C70
meta.var.expr.ts#9A2F58
meta.var.expr.tsx#BA386A
keyword.control.import.js#4E365D
keyword.control.import.jsx#533963
keyword.control.import.ts#4a3358
keyword.control.import.tsx#4a3358
keyword.control.from.js#B05345
keyword.control.from.jsx#b95a4c
keyword.control.from.ts#b95a4c
keyword.control.from.tsx#b95a4c
keyword.control.export.js#78864d
keyword.control.export.jsx#869656
keyword.control.export.ts#78864d
keyword.control.export.tsx#7F8E52
keyword.control.default.js#7F8E52
keyword.control.default.jsx#6A7644
keyword.control.default.ts#78864d
keyword.control.default.tsx#78864d
support.type.object.module.js#78864d
support.type.object.module.jsx#717E48
support.type.object.module.ts#7F8E52
support.type.object.module.tsx#6A7644

Shiki preview

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

Loading...