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#e2e2e0
  • editor.background#f1f1f1
  • editor.lineHighlightBackground#e2e2e09a
  • editor.selectionBackground#abe5d6
  • editorBracketMatch.background#D85B0C
  • editorBracketMatch.border#3C6534
  • editorGroupHeader.tabsBackground#E0E0E0
  • editorGutter.background#f1f1f1
  • editorLineNumber.foreground#C4C4BF
  • scrollbarSlider.background#e2e2e0
  • scrollbarSlider.hoverBackground#C4C4BF
  • sideBar.background#D3D3D0
  • statusBar.background#B4B4AF
  • tab.activeBackground#f1f1f1
  • tab.activeForeground#954B29
  • tab.border#f1f1f1
  • tab.inactiveBackground#B4B4AF
  • tab.inactiveForeground#B65C32

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant#2b8fb3
entity.name.tag#2E99C0underline
punctuation.accessor.js#2b8fb3
punctuation.accessor.jsx#2b8fb3
punctuation.accessor.ts#2885A6
punctuation.accessor.tsx#2885A6
source.js#2885A6
source.jsx#2885A6
source.ts#2885A6
source.tsx#2E99C0
source.css#2b8fb3
source.scss#2b8fb3
storage.modifier.js#2E99C0
storage.modifier.jsx#31A3CC
storage.modifier.ts#2b8fb3
storage.modifier.tsx#2b8fb3
string.quoted.single.js#2E99C0
string.quoted.single.jsx#2885A6
string.quoted.single.ts#2b8fb3
string.quoted.single.tsx#2b8fb3
variable.other.readwrite.js#2b8fb3
variable.other.readwrite.jsx#257B9A
variable.other.readwrite.ts#2b8fb3
variable.other.readwrite.tsx#2885A6
support.function.dom.js#31A3CC
support.function.dom.jsx#31A3CC
support.function.dom.ts#2b8fb3
support.function.dom.tsx#2b8fb3
support.variable.property.js#257B9A
support.variable.property.jsx#2885A6
support.variable.property.ts#2b8fb3
support.variable.property.tsx#2E99C0
variable.language.constructor#2E99C0underline
variable.language.this#31A3CC
meta.selector.css#a0512c
variable.other.readwrite#AB572F
constant.language.null.js#a0512c
constant.language.null.jsx#a0512c
constant.language.null.ts#a0512c
constant.language.null.tsx#8A4626
entity.name.class#a0512cunderline
entity.name.function#a0512cunderline
markup.heading.markdown#a0512c
punctuation.separator.comma.js#B65C32
punctuation.separator.comma.jsx#a0512c
punctuation.separator.comma.ts#a0512c
punctuation.separator.comma.tsx#a0512c
support.variable.property.js#AB572F
support.variable.property.jsx#AB572F
support.variable.property.ts#a0512c
support.variable.property.tsx#B65C32
support.type.primitive.js#8A4626
support.type.primitive.jsx#a0512c
support.type.primitive.ts#a0512c
support.type.primitive.tsx#a0512c
meta.brace.square.js#AB572F
meta.brace.square.jsx#B65C32
meta.brace.square.ts#a0512c
meta.brace.square.tsx#a0512c
variable.other.class.js#a0512c
variable.other.class.jsx#954B29
variable.other.class.ts#954B29
variable.other.class.tsx#AB572F
constant.other.object.key.js#954B29
constant.other.object.key.jsx#8A4626
constant.other.object.key.ts#B65C32
constant.other.object.key.tsx#a0512c
variable#B65C32
variable.language#d14076
entity.name.type#d14076underline
variable.parameter#BD2E63
support.function#D85F8C
source.json#d14076
meta.object-literal.key.js#D85F8C
meta.object-literal.key.jsx#BD2E63
meta.object-literal.key.ts#d14076
meta.object-literal.key.tsx#d14076
meta.paragraph.markdown#d14076
entity.other.attribute-name.js#d14076
entity.other.attribute-name.jsx#d14076
entity.other.attribute-name.ts#d14076
entity.other.attribute-name.tsx#CD316B
string.quoted.single.json#BD2E63
support.class.promise.js#d14076
support.class.promise.jsx#d14076
support.class.promise.ts#BD2E63
support.class.promise.tsx#d14076
support.type.object.console.js#CD316B
support.type.object.console.jsx#d14076
support.type.object.console.ts#BD2E63
support.type.object.console.tsx#d14076
support.function.console.js#D54F81
support.function.console.jsx#D85F8C
support.function.console.ts#BD2E63
support.function.console.tsx#CD316B
punctuation.definition.block.js#d14076
punctuation.definition.block.jsx#CD316B
punctuation.definition.block.ts#D85F8C
punctuation.definition.block.tsx#D54F81
storage.type#880e4f
variable.other.object.js#880e4f
variable.other.object.jsx#9B105A
variable.other.object.ts#9B105A
variable.other.object.tsx#880e4f
markup.quote#9B105A
meta.import.js#880e4f
meta.import.jsx#880e4f
meta.import.ts#880e4f
meta.import.tsx#880e4f
meta.tag.js#9B105A
meta.tag.jsx#880e4f
meta.tag.ts#920F55
meta.tag.tsx#880e4f
meta.parameters.js#880e4f
meta.parameters.jsx#7E0D49
meta.parameters.ts#880e4f
meta.parameters.tsx#880e4f
string.quoted.single.js#920F55
string.quoted.single.jsx#7E0D49
string.quoted.single.ts#880e4f
string.quoted.single.tsx#880e4f
meta.object-literal.key.js#880e4f
meta.object-literal.key.jsx#9B105A
meta.object-literal.key.ts#880e4f
meta.object-literal.key.tsx#750C44
string.template#9B105A
entity.name.function.method#880e4f
support.type.property-name.json#880e4f
variable.other.property.js#750C44
variable.other.property.jsx#880e4f
variable.other.property.ts#880e4f
variable.other.property.tsx#880e4f
markup.italic#46753d
punctuation.separator.parameter.js#46753d
punctuation.separator.parameter.jsx#508546
punctuation.separator.parameter.ts#46753d
punctuation.separator.parameter.tsx#3C6534
constant.character#3C6534
constant.other#416D39
comment#46753d
markup.italic#416D39
comment.block.documentation#46753d
comment.line.double-slash#3C6534
punctuation.accessor.js#4B7D41
punctuation.accessor.jsx#46753d
punctuation.accessor.ts#46753d
punctuation.accessor.tsx#4B7D41
constant.language#E9630D
constant.language.boolean#f26c17
punctuation.separator.key-value.js#E9630D
punctuation.separator.key-value.jsx#f26c17
punctuation.separator.key-value.ts#D85B0C
punctuation.separator.key-value.tsx#f26c17
storage.modifier.async.js#f26c17
storage.modifier.async.jsx#f26c17
storage.modifier.async.ts#f26c17
storage.modifier.async.tsx#F4823A
meta.brace.round.js#F37729
meta.brace.round.jsx#f26c17
meta.brace.round.ts#D85B0C
meta.brace.round.tsx#F37729
entity.other.inherited-class#D85B0C
support.class.builtin.js#F4823A
support.class.builtin.jsx#F37729
support.class.builtin.ts#f26c17
support.class.builtin.tsx#E9630D
meta.tag.attributes.js#D85B0C
meta.tag.attributes.jsx#D85B0C
meta.tag.attributes.ts#f26c17
meta.tag.attributes.tsx#f26c17
keyword.control.module.js#D85B0C
keyword.control.module.jsx#f26c17
keyword.control.module.ts#f26c17
keyword.control.module.tsx#F37729
keyword.operator.accessor#F4823A
invalid#E9630Dunderline
constant.numeric#F37729
keyword#f26c17
meta.var.expr.js#f26c17
meta.var.expr.jsx#F37729
meta.var.expr.ts#f26c17
meta.var.expr.tsx#F37729
keyword.control.import.js#F4823A
keyword.control.import.jsx#f26c17
keyword.control.import.ts#f26c17
keyword.control.import.tsx#f26c17
keyword.control.from.js#F4823A
keyword.control.from.jsx#f26c17
keyword.control.from.ts#f26c17
keyword.control.from.tsx#f26c17
keyword.control.export.js#E9630D
keyword.control.export.jsx#E9630D
keyword.control.export.ts#D85B0C
keyword.control.export.tsx#D85B0C
keyword.control.default.js#D85B0C
keyword.control.default.jsx#f26c17
keyword.control.default.ts#f26c17
keyword.control.default.tsx#f26c17
support.type.object.module.js#f26c17
support.type.object.module.jsx#E9630D
support.type.object.module.ts#D85B0C
support.type.object.module.tsx#E9630D

Shiki preview

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

Loading...

Niketa Theme Light Legacy by selfrefactor - VS Code Theme