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#87775780
  • editor.background#FAF8F3
  • editor.lineHighlightBackground#87775722
  • editor.selectionBackground#F8E2E2CC
  • editorBracketMatch.background#4381A8f3
  • editorBracketMatch.border#861D4FE3
  • editorGroupHeader.tabsBackground#FAF8F3f3
  • editorGutter.background#FAF8F3D6
  • editorLineNumber.foreground#877757BC
  • scrollbarSlider.background#87775780
  • scrollbarSlider.hoverBackground#877757BC
  • sideBar.background#bdc3c7
  • statusBar.background#877757DA
  • tab.activeBackground#FAF8F3D6
  • tab.activeForeground#B45948f3
  • tab.border#FAF8F3D6
  • tab.inactiveBackground#877757DA
  • tab.inactiveForeground#FAF8F3D6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.parameters.begin.js#5a6598
punctuation.definition.parameters.begin.jsx#5a6598
punctuation.definition.parameters.begin.ts#5a6598
punctuation.definition.parameters.begin.tsx#5a6598
punctuation.definition.parameters.end.js#5a6598
punctuation.definition.parameters.end.jsx#5a6598
punctuation.definition.parameters.end.ts#5a6598
punctuation.definition.parameters.end.tsx#48517A
punctuation.definition.parameters.end.js#5a6598
punctuation.definition.parameters.end.jsx#5a6598
punctuation.definition.parameters.end.ts#5a6598
punctuation.definition.parameters.end.tsx#5a6598
markup.quote#5a6598
meta.tag.js#545E8E
meta.tag.jsx#5a6598
meta.tag.ts#5a6598
meta.tag.tsx#4E5884
meta.parameters.js#545E8E
meta.parameters.jsx#616CA1
meta.parameters.ts#5a6598
meta.parameters.tsx#5a6598
meta.brace.square.js#4E5884
meta.brace.square.jsx#6A75A7
meta.brace.square.ts#616CA1
meta.brace.square.tsx#616CA1
variable.other.class.js#5a6598
variable.other.class.jsx#5a6598
variable.other.class.ts#545E8E
variable.other.class.tsx#616CA1
constant.other.object.key.js#747EAD
constant.other.object.key.jsx#6A75A7
constant.other.object.key.ts#6A75A7
constant.other.object.key.tsx#5a6598
entity.name.function.method#616CA1
string.template#5a6598
support.type.property-name.json#5a6598
variable.other.property.js#5a6598
variable.other.property.jsx#616CA1
variable.other.property.ts#545E8E
variable.other.property.tsx#5a6598
punctuation.separator.key-value.js#B45948D3
punctuation.separator.key-value.jsx#B45948F1
punctuation.separator.key-value.ts#B45948F1
punctuation.separator.key-value.tsx#B45948f3
storage.modifier.async.js#B45948F1
storage.modifier.async.jsx#B45948f3
storage.modifier.async.ts#B45948F1
storage.modifier.async.tsx#B45948F1
meta.brace.round.js#B45948f3
meta.brace.round.jsx#B45948BF
meta.brace.round.ts#B45948f3
meta.brace.round.tsx#B45948f3
entity.other.inherited-class#B45948f3
support.class.builtin.js#B45948F1
support.class.builtin.jsx#B45948f3
support.class.builtin.ts#B45948F1
support.class.builtin.tsx#B45948F1
meta.tag.attributes.js#B45948F1
meta.tag.attributes.jsx#B45948D3
meta.tag.attributes.ts#B45948F1
meta.tag.attributes.tsx#B45948F1
keyword.control.module.js#B45948f3
keyword.control.module.jsx#B45948f3
keyword.control.module.ts#B45948F1
keyword.control.module.tsx#B45948F1
keyword.operator.accessor#B45948F1
invalid#B45948F1underline
constant.numeric#B45948f3
keyword#B45948F1
meta.var.expr.js#B45948F1
meta.var.expr.jsx#B45948F1
meta.var.expr.ts#B45948f3
meta.var.expr.tsx#B45948F1
keyword.control.import.js#B45948BF
keyword.control.import.jsx#B45948F1
keyword.control.import.ts#B45948F1
keyword.control.import.tsx#B45948F1
keyword.control.from.js#B45948F1
keyword.control.from.jsx#B45948f3
keyword.control.from.ts#B45948f3
keyword.control.from.tsx#B45948F1
keyword.control.export.js#B45948f3
keyword.control.export.jsx#B45948F1
keyword.control.export.ts#B45948F1
keyword.control.export.tsx#B45948F1
keyword.control.default.js#B45948f3
keyword.control.default.jsx#B45948D3
keyword.control.default.ts#B45948F1
keyword.control.default.tsx#B45948F1
support.type.object.module.js#B45948AB
support.type.object.module.jsx#B45948F1
support.type.object.module.ts#B45948D3
support.type.object.module.tsx#B45948F1
entity.name.tag#6E3E53f3underline
markup.italic#6E3E53E4
punctuation.accessor.js#6E3E53E4
punctuation.accessor.jsx#6E3E53f3
punctuation.accessor.ts#6E3E53f3
punctuation.accessor.tsx#6E3E53B2
source.js#6E3E53f3
source.jsx#6E3E53E4
source.ts#6E3E53f3
source.tsx#6E3E53E4
storage.modifier.js#6E3E53E4
storage.modifier.jsx#6E3E53f3
storage.modifier.ts#6E3E53E4
storage.modifier.tsx#6E3E53f3
storage.type#6E3E53C6
string.quoted.single.js#6E3E53E4
string.quoted.single.jsx#6E3E53C6
string.quoted.single.ts#6E3E53f3
string.quoted.single.tsx#6E3E53E4
support.function.dom.js#6E3E53f3
support.function.dom.jsx#6E3E53E4
support.function.dom.ts#6E3E539E
support.function.dom.tsx#6E3E53f3
support.variable.property.js#6E3E53E4
support.variable.property.jsx#6E3E53E4
support.variable.property.ts#6E3E53f3
support.variable.property.tsx#6E3E53E4
variable.language.constructor#6E3E53E4underline
variable.language.this#6E3E53E4
support.constant#6aa68d
punctuation.separator.parameter.js#5F9F85
punctuation.separator.parameter.jsx#528972
punctuation.separator.parameter.ts#6aa68d
punctuation.separator.parameter.tsx#6aa68d
constant.character#6aa68d
constant.language#6aa68d
constant.other#6aa68d
comment#6aa68d
markup.italic#6aa68d
meta.object-literal.key.js#6aa68d
meta.object-literal.key.jsx#5F9F85
meta.object-literal.key.ts#6aa68d
meta.object-literal.key.tsx#6aa68d
comment.block.documentation#5F9F85
comment.line.double-slash#6aa68d
punctuation.accessor.js#528972
punctuation.accessor.jsx#5F9F85
punctuation.accessor.ts#6aa68d
punctuation.accessor.tsx#528972
variable.language#6aa68d
variable.other.object.js#80B39E
variable.other.object.jsx#6aa68d
variable.other.object.ts#80B39E
variable.other.object.tsx#6aa68d
variable.other.readwrite#5F9F85
variable.other.readwrite.js#6aa68d
variable.other.readwrite.jsx#5F9F85
variable.other.readwrite.ts#6aa68d
variable.other.readwrite.tsx#5F9F85
variable.parameter#861D4FA7
support.function#861D4F89
meta.import.js#861D4FA7
meta.import.jsx#861D4F75
meta.import.ts#861D4FCF
meta.import.tsx#861D4Ff3
meta.paragraph.markdown#861D4FA7
entity.other.attribute-name.js#861D4F61
entity.other.attribute-name.jsx#861D4FA7
entity.other.attribute-name.ts#861D4F89
entity.other.attribute-name.tsx#861D4FA7
string.quoted.single.js#861D4Ff3
string.quoted.single.jsx#861D4FCF
string.quoted.single.ts#861D4FA7
string.quoted.single.tsx#861D4FE3
string.quoted.single.json#861D4F61
support.class.promise.js#861D4FA7
support.class.promise.jsx#861D4F61
support.class.promise.ts#861D4FE3
support.class.promise.tsx#861D4F89
support.type.object.console.js#861D4FA7
support.type.object.console.jsx#861D4F89
support.type.object.console.ts#861D4FA7
support.type.object.console.tsx#861D4FA7
support.function.console.js#861D4FA7
support.function.console.jsx#861D4F61
support.function.console.ts#861D4Ff3
support.function.console.tsx#861D4F61
punctuation.definition.block.js#861D4FA7
punctuation.definition.block.jsx#861D4F61
punctuation.definition.block.ts#861D4FE3
punctuation.definition.block.tsx#861D4FA7
constant.language.boolean#4381A8f3
constant.language.null.js#4381A8E9
constant.language.null.jsx#4381A8f3
constant.language.null.ts#4381A8E9
constant.language.null.tsx#4381A8E9
entity.name.class#4381A8E9underline
entity.name.function#4381A8E9underline
entity.name.type#4381A8B7underline
markup.heading.markdown#4381A8A3
punctuation.separator.comma.js#4381A8E9
punctuation.separator.comma.jsx#4381A8E9
punctuation.separator.comma.ts#4381A8E9
punctuation.separator.comma.tsx#4381A8E9
support.variable.property.js#4381A8f3
support.variable.property.jsx#4381A8CB
support.variable.property.ts#4381A8E9
support.variable.property.tsx#4381A8CB
support.type.primitive.js#4381A8E9
support.type.primitive.jsx#4381A8E9
support.type.primitive.ts#4381A8f3
support.type.primitive.tsx#4381A8E9
variable#4381A8f3

Shiki preview

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

Loading...

Niketa Theme Light Legacy by selfrefactor - VS Code Theme