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#cccdc5f1
  • diffEditor.insertedTextBackground#9c824a55
  • diffEditor.removedTextBackground#64B5F655
  • editor.background#f9f6f1
  • editor.lineHighlightBackground#F2EBE1
  • editor.selectionBackground#94525755
  • editorBracketMatch.background#B1365Bf3
  • editorBracketMatch.border#9F7E6Bf3
  • editorGroupHeader.tabsBackground#F2EBE1
  • editorGutter.background#f9f6f1
  • editorLineNumber.foreground#2a3343a9
  • scrollbarSlider.background#cccdc5f1
  • scrollbarSlider.hoverBackground#cccdc5f3
  • sideBar.background#cccdc5f3
  • statusBar.background#cccdc5f3
  • tab.activeBackground#f9f6f1
  • tab.activeForeground#2a3343e9
  • tab.border#f9f6f1
  • tab.inactiveBackground#859da9e9
  • tab.inactiveForeground#fafafa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language.boolean#B1365B
keyword#A73356
constant.language.null.js#A73356
constant.language.null.jsx#B1365B
constant.language.null.ts#BB3960
constant.language.null.tsx#B1365B
entity.name.class#B1365Bunderline
entity.name.function#B1365Bunderline
entity.name.type#B1365B
markup.heading.markdown#B1365B
punctuation.separator.comma.js#B1365B
punctuation.separator.comma.jsx#BB3960
punctuation.separator.comma.ts#BB3960
punctuation.separator.comma.tsx#BB3960
support.variable.property.js#B1365B
support.variable.property.jsx#B1365B
support.variable.property.ts#B1365B
support.variable.property.tsx#B1365B
support.type.primitive.js#B1365B
support.type.primitive.jsx#B1365B
support.type.primitive.ts#B1365B
support.type.primitive.tsx#BB3960
variable#B1365B
entity.name.tag#5F7E97underline
markup.italic#5F7E97
punctuation.separator.key-value.js#5F7E97
punctuation.separator.key-value.jsx#5F7E97
punctuation.separator.key-value.ts#59778E
punctuation.separator.key-value.tsx#59778E
punctuation.accessor.js#6E8CA4
punctuation.accessor.jsx#66859F
punctuation.accessor.ts#5F7E97
punctuation.accessor.tsx#5F7E97
storage.modifier.js#5F7E97
storage.modifier.jsx#5F7E97
storage.modifier.ts#59778E
storage.modifier.tsx#59778E
storage.type#5F7E97
support.function.dom.js#59778E
support.function.dom.jsx#5F7E97
support.function.dom.ts#66859F
support.function.dom.tsx#7793AA
support.variable.property.js#5F7E97
support.variable.property.jsx#5F7E97
support.variable.property.ts#5F7E97
support.variable.property.tsx#5F7E97
variable.language.constructor#59778Eunderline
variable.language.this#59778E
storage.modifier.async.js#A58674
storage.modifier.async.jsx#A58674
storage.modifier.async.ts#987663
storage.modifier.async.tsx#987663
meta.brace.round.js#A58674
meta.brace.round.jsx#A58674
meta.brace.round.ts#9F7E6B
meta.brace.round.tsx#A58674
variable.parameter#9F7E6B
entity.other.inherited-class#9F7E6B
support.class.builtin.js#987663
support.class.builtin.jsx#856856
support.class.builtin.ts#A58674
support.class.builtin.tsx#9F7E6B
meta.tag.attributes.js#9F7E6B
meta.tag.attributes.jsx#987663
meta.tag.attributes.ts#987663
meta.tag.attributes.tsx#9F7E6B
keyword.control.module.js#AB8E7E
keyword.control.module.jsx#987663
keyword.control.module.ts#987663
keyword.control.module.tsx#987663
keyword.operator.accessor#9F7E6B
invalid#856856underline
constant.numeric#B19687
meta.brace.square.js#8F6F5D
meta.brace.square.jsx#987663
meta.brace.square.ts#AB8E7E
meta.brace.square.tsx#856856
meta.var.expr.js#987663
meta.var.expr.jsx#9F7E6B
meta.var.expr.ts#9F7E6B
meta.var.expr.tsx#9F7E6B
keyword.control.import.js#987663
keyword.control.import.jsx#9F7E6B
keyword.control.import.ts#8F6F5D
keyword.control.import.tsx#987663
keyword.control.from.js#A58674
keyword.control.from.jsx#9F7E6B
keyword.control.from.ts#856856
keyword.control.from.tsx#A58674
keyword.control.export.js#987663
keyword.control.export.jsx#9F7E6B
keyword.control.export.ts#987663
keyword.control.export.tsx#9F7E6B
keyword.control.default.js#9F7E6B
keyword.control.default.jsx#A58674
keyword.control.default.ts#9F7E6B
keyword.control.default.tsx#A58674
support.type.object.module.js#9F7E6B
support.type.object.module.jsx#9F7E6B
support.type.object.module.ts#987663
support.type.object.module.tsx#9F7E6B
support.function#B1365B
source.js#C7486E
source.jsx#A73356
source.ts#B1365B
source.tsx#9C3050
keyword.control.flow.js#BB3960
keyword.control.flow.jsx#B1365B
keyword.control.flow.ts#B1365B
keyword.control.flow.tsx#B1365B
meta.import.js#A73356
meta.import.jsx#A73356
meta.import.ts#B1365B
meta.import.tsx#A73356
meta.paragraph.markdown#B1365B
string.quoted.single.js#B1365B
string.quoted.single.jsx#B1365B
string.quoted.single.ts#B1365B
string.quoted.single.tsx#A73356
string.quoted.single.json#B1365B
support.class.promise.js#BB3960
support.class.promise.jsx#B1365B
support.class.promise.ts#A73356
support.class.promise.tsx#B1365B
support.type.object.console.js#B1365B
support.type.object.console.jsx#BB3960
support.type.object.console.ts#B1365B
support.type.object.console.tsx#9C3050
support.function.console.js#A73356
support.function.console.jsx#B1365B
support.function.console.ts#C7486E
support.function.console.tsx#B1365B
punctuation.definition.block.js#B1365B
punctuation.definition.block.jsx#B1365B
punctuation.definition.block.ts#922D4B
punctuation.definition.block.tsx#C7486E
variable.language#BB3960
meta.tag.js#B1365B
meta.tag.jsx#B1365B
meta.tag.ts#B1365B
meta.tag.tsx#B1365B
punctuation.definition.parameters.begin.js#4E687D
punctuation.definition.parameters.begin.jsx#66859F
punctuation.definition.parameters.begin.ts#546F85
punctuation.definition.parameters.begin.tsx#7793AA
punctuation.definition.parameters.end.js#5F7E97
punctuation.definition.parameters.end.jsx#5F7E97
punctuation.definition.parameters.end.ts#4E687D
punctuation.definition.parameters.end.tsx#7793AA
punctuation.definition.parameters.end.js#5F7E97
punctuation.definition.parameters.end.jsx#4E687D
punctuation.definition.parameters.end.ts#4E687D
punctuation.definition.parameters.end.tsx#66859F
markup.quote#546F85
entity.other.attribute-name.js#5F7E97
entity.other.attribute-name.jsx#5F7E97
entity.other.attribute-name.ts#5F7E97
entity.other.attribute-name.tsx#5F7E97
meta.parameters.js#6E8CA4
meta.parameters.jsx#546F85
meta.parameters.ts#66859F
meta.parameters.tsx#7793AA
variable.other.class.js#546F85
variable.other.class.jsx#59778E
variable.other.class.ts#66859F
variable.other.class.tsx#7793AA
constant.other.object.key.js#5F7E97
constant.other.object.key.jsx#5F7E97
constant.other.object.key.ts#5F7E97
constant.other.object.key.tsx#5F7E97
entity.name.function.method#59778E
string.template#5F7E97
support.constant#5F7E97
string.quoted.single.js#546F85
string.quoted.single.jsx#5F7E97
string.quoted.single.ts#5F7E97
string.quoted.single.tsx#59778E
support.type.property-name.json#66859F
variable.other.property.js#5F7E97
variable.other.property.jsx#59778E
variable.other.property.ts#6E8CA4
variable.other.property.tsx#5F7E97
punctuation.separator.parameter.js#9F7E6B
punctuation.separator.parameter.jsx#856856
punctuation.separator.parameter.ts#9F7E6B
punctuation.separator.parameter.tsx#9F7E6B
constant.character#9F7E6B
constant.language#9F7E6B
constant.other#987663
comment#987663
markup.italic#9F7E6B
meta.object-literal.key.js#A58674
meta.object-literal.key.jsx#9F7E6B
meta.object-literal.key.ts#9F7E6B
meta.object-literal.key.tsx#8F6F5D
comment.block.documentation#9F7E6B
comment.line.double-slash#B19687
punctuation.accessor.js#AB8E7E
punctuation.accessor.jsx#987663
punctuation.accessor.ts#9F7E6B
punctuation.accessor.tsx#9F7E6B
variable.other.object.js#9F7E6B
variable.other.object.jsx#A58674
variable.other.object.ts#856856
variable.other.object.tsx#987663
variable.other.readwrite#8F6F5D
variable.other.readwrite.js#9F7E6B
variable.other.readwrite.jsx#9F7E6B
variable.other.readwrite.ts#AB8E7E
variable.other.readwrite.tsx#9F7E6B

Shiki preview

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

Loading...