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#d4d0b8
  • editor.background#f3f3e2
  • editor.lineHighlightBackground#d4d0b887
  • editor.selectionBackground#edc5bc
  • editorBracketMatch.background#224D14
  • editorBracketMatch.border#A2315F
  • editorGroupHeader.tabsBackground#EBEBD0
  • editorGutter.background#f3f3e2
  • editorLineNumber.foreground#C4BE9D
  • scrollbarSlider.background#d4d0b8
  • scrollbarSlider.hoverBackground#C4BE9D
  • sideBar.background#CCC7AA
  • statusBar.background#BBB58F
  • tab.activeBackground#f3f3e2
  • tab.activeForeground#94668A
  • tab.border#f3f3e2
  • tab.inactiveBackground#BBB58F
  • tab.inactiveForeground#A77F9E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant#255665
punctuation.definition.template-expression.begin.js#23515F
punctuation.definition.template-expression.begin.jsx#275b6b
punctuation.definition.template-expression.begin.ts#2B6577
punctuation.definition.template-expression.begin.tsx#275b6b
punctuation.definition.template-expression.end.js#275b6b
punctuation.definition.template-expression.end.jsx#255665
punctuation.definition.template-expression.end.ts#275b6b
punctuation.definition.template-expression.end.tsx#296071
entity.name.tag#23515Funderline
punctuation.accessor.js#255665
punctuation.accessor.jsx#275b6b
punctuation.accessor.ts#275b6b
punctuation.accessor.tsx#296071
source.js#C03A71
source.jsx#C64178
source.ts#A2315F
source.tsx#A2315F
source.css#275b6b
source.scss#265616
storage.modifier.js#b6376b
storage.modifier.jsx#C64178
storage.modifier.ts#b6376b
storage.modifier.tsx#AC3465
string.quoted.single.js#296071
string.quoted.single.jsx#275b6b
string.quoted.single.ts#2B6577
string.quoted.single.tsx#2B6577
support.function.dom.js#2B6577
support.function.dom.jsx#2B6577
support.function.dom.ts#275b6b
support.function.dom.tsx#275b6b
support.variable.property.js#b6376b
support.variable.property.jsx#AC3465
support.variable.property.ts#b6376b
support.variable.property.tsx#b6376b
variable.language.constructor#b6376bunderline
variable.language.this#236999
meta.selector.css#8C6082
constant.language.null.js#A17798
constant.language.null.jsx#94668A
constant.language.null.ts#9b6e91
constant.language.null.tsx#9b6e91
entity.name.class#245115underline
entity.name.function#A17798underline
markup.heading.markdown#9b6e91
punctuation.separator.comma.js#A17798
punctuation.separator.comma.jsx#9b6e91
punctuation.separator.comma.ts#A77F9E
punctuation.separator.comma.tsx#94668A
support.variable.property.js#275b6b
support.variable.property.jsx#275b6b
support.variable.property.ts#255665
support.variable.property.tsx#275b6b
support.type.primitive.js#275b6b
support.type.primitive.jsx#275b6b
support.type.primitive.ts#275b6b
support.type.primitive.tsx#275b6b
meta.brace.square.js#265616
meta.brace.square.jsx#265616
meta.brace.square.ts#265616
meta.brace.square.tsx#245115
variable.other.class.js#b6376b
variable.other.class.jsx#A2315F
variable.other.class.ts#b6376b
variable.other.class.tsx#A2315F
constant.other.object.key.js#245115
constant.other.object.key.jsx#265616
constant.other.object.key.ts#265616
constant.other.object.key.tsx#285B17
variable.language#256FA1
constant.language#b6376b
entity.name.type#255665underline
variable.parameter#23515F
support.function#9b6e91
source.json#C03A71
meta.object-literal.key.js#265616
meta.object-literal.key.jsx#2A5F18
meta.object-literal.key.ts#2A5F18
meta.object-literal.key.tsx#265616
variable.other.constant.js#275b6b
variable.other.constant.jsx#2B6577
variable.other.constant.ts#255665
variable.other.constant.tsx#255665
meta.paragraph.markdown#275b6b
entity.other.attribute-name.js#23515F
entity.other.attribute-name.jsx#296071
entity.other.attribute-name.ts#275b6b
entity.other.attribute-name.tsx#23515F
string.quoted.single.json#9b6e91
support.class.promise.js#216391
support.class.promise.jsx#236999
support.class.promise.ts#236999
support.class.promise.tsx#2775AA
support.type.object.console.js#8C6082
support.type.object.console.jsx#94668A
support.type.object.console.ts#9b6e91
support.type.object.console.tsx#9b6e91
support.function.console.js#b6376b
support.function.console.jsx#C64178
support.function.console.ts#AC3465
support.function.console.tsx#A2315F
punctuation.definition.block.js#255665
punctuation.definition.block.jsx#275b6b
punctuation.definition.block.ts#2B6577
punctuation.definition.block.tsx#296071
storage.type#9b6e91
constant.other#b6376b
variable.other.object.js#C03A71
variable.other.object.jsx#b6376b
variable.other.object.ts#b6376b
variable.other.object.tsx#b6376b
markup.quote#AC3465
meta.import.js#b6376b
meta.import.jsx#b6376b
meta.import.ts#b6376b
meta.import.tsx#A2315F
meta.tag.js#C03A71
meta.tag.jsx#b6376b
meta.tag.ts#b6376b
meta.tag.tsx#b6376b
string.quoted.single.js#9b6e91
string.quoted.single.jsx#A17798
string.quoted.single.ts#9b6e91
string.quoted.single.tsx#8C6082
meta.object-literal.key.js#224D14
meta.object-literal.key.jsx#285B17
meta.object-literal.key.ts#265616
meta.object-literal.key.tsx#224D14
string.template#275b6b
entity.name.function.method#A77F9E
support.type.property-name.json#236999
variable.other.property.js#265616
variable.other.property.jsx#265616
variable.other.property.ts#2A5F18
variable.other.property.tsx#245115
markup.italic#2775AA
meta.template.expression.js#296071
meta.template.expression.jsx#275b6b
meta.template.expression.ts#275b6b
meta.template.expression.tsx#296071
punctuation.separator.parameter.js#255665
punctuation.separator.parameter.jsx#23515F
punctuation.separator.parameter.ts#275b6b
punctuation.separator.parameter.tsx#275b6b
meta.parameters.js#245115
meta.parameters.jsx#285B17
meta.parameters.ts#265616
meta.parameters.tsx#245115
constant.character#b6376b
comment#A2315F
keyword#2A5F18
markup.italic#8C6082
comment.block.documentation#275b6b
comment.line.double-slash#275b6b
punctuation.accessor.js#94668A
punctuation.accessor.jsx#A77F9E
punctuation.accessor.ts#94668A
punctuation.accessor.tsx#A17798
punctuation.definition.parameters.begin.js#A17798
punctuation.definition.parameters.begin.jsx#9b6e91
punctuation.definition.parameters.begin.ts#9b6e91
punctuation.definition.parameters.begin.tsx#9b6e91
punctuation.definition.parameters.end.js#9b6e91
punctuation.definition.parameters.end.jsx#8C6082
punctuation.definition.parameters.end.ts#A77F9E
punctuation.definition.parameters.end.tsx#9b6e91
constant.language.boolean#9b6e91
punctuation.separator.key-value.js#2775AA
punctuation.separator.key-value.jsx#1F5D88
punctuation.separator.key-value.ts#1F5D88
punctuation.separator.key-value.tsx#236999
storage.modifier.async.js#9b6e91
storage.modifier.async.jsx#9b6e91
storage.modifier.async.ts#9b6e91
storage.modifier.async.tsx#94668A
meta.brace.round.js#255665
meta.brace.round.jsx#275b6b
meta.brace.round.ts#23515F
meta.brace.round.tsx#275b6b
entity.other.inherited-class#1F5D88
support.class.builtin.js#275b6b
support.class.builtin.jsx#2B6577
support.class.builtin.ts#2B6577
support.class.builtin.tsx#275b6b
meta.tag.attributes.js#2775AA
meta.tag.attributes.jsx#2775AA
meta.tag.attributes.ts#236999
meta.tag.attributes.tsx#256FA1
keyword.control.module.js#9b6e91
keyword.control.module.jsx#9b6e91
keyword.control.module.ts#9b6e91
keyword.control.module.tsx#94668A
keyword.operator.accessor#275b6b
invalid#245115underline
constant.numeric#275b6b
meta.var.expr.js#255665
meta.var.expr.jsx#255665
meta.var.expr.ts#275b6b
meta.var.expr.tsx#275b6b
keyword.control.import.js#275b6b
keyword.control.import.jsx#275b6b
keyword.control.import.ts#2B6577
keyword.control.import.tsx#275b6b
keyword.control.from.js#2775AA
keyword.control.from.jsx#236999
keyword.control.from.ts#216391
keyword.control.from.tsx#236999
keyword.control.export.js#256FA1
keyword.control.export.jsx#236999
keyword.control.export.ts#236999
keyword.control.export.tsx#236999
keyword.control.default.js#2A5F18
keyword.control.default.jsx#265616
keyword.control.default.ts#265616
keyword.control.default.tsx#265616
support.type.object.module.js#275b6b
support.type.object.module.jsx#275b6b
support.type.object.module.ts#275b6b
support.type.object.module.tsx#275b6b

Shiki preview

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

Loading...

Niketa Theme Light Legacy by selfrefactor - VS Code Theme