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#cacacc
  • editor.background#f6f4e8
  • editor.lineHighlightBackground#F2F2F3
  • editor.selectionBackground#eec2bb
  • editorBracketMatch.background#913D3F
  • editorBracketMatch.border#4C597C
  • editorGroupHeader.tabsBackground#EDE9D2
  • editorGutter.background#f6f4e8
  • editorLineNumber.foreground#AFAFB2
  • scrollbarSlider.background#cacacc
  • scrollbarSlider.hoverBackground#AFAFB2
  • sideBar.background#BDBDBF
  • statusBar.background#A2A2A5
  • tab.activeBackground#f6f4e8
  • tab.activeForeground#515F86
  • tab.border#f6f4e8
  • tab.inactiveBackground#A2A2A5
  • tab.inactiveForeground#f6f4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#8B3440underline
markup.italic#A23C4A
punctuation.accessor.js#ad404f
punctuation.accessor.jsx#BE4E5E
punctuation.accessor.ts#C25968
punctuation.accessor.tsx#A23C4A
source.js#ad404f
source.jsx#ad404f
source.ts#B84454
source.tsx#A23C4A
storage.modifier.js#C25968
storage.modifier.jsx#ad404f
storage.modifier.ts#ad404f
storage.modifier.tsx#A23C4A
storage.type#ad404f
string.quoted.single.js#BE4E5E
string.quoted.single.jsx#BE4E5E
string.quoted.single.ts#BE4E5E
string.quoted.single.tsx#A23C4A
support.function.dom.js#C25968
support.function.dom.jsx#ad404f
support.function.dom.ts#ad404f
support.function.dom.tsx#C25968
support.variable.property.js#ad404f
support.variable.property.jsx#BE4E5E
support.variable.property.ts#8B3440
support.variable.property.tsx#ad404f
variable.language.constructor#B84454underline
variable.language.this#A23C4A
constant.language.boolean#57668f
constant.language.null.js#515F86
constant.language.null.jsx#515F86
constant.language.null.ts#57668f
constant.language.null.tsx#57668f
entity.name.class#57668funderline
entity.name.function#57668funderline
entity.name.type#515F86underline
markup.heading.markdown#5D6D98
punctuation.separator.comma.js#57668f
punctuation.separator.comma.jsx#57668f
punctuation.separator.comma.ts#57668f
punctuation.separator.comma.tsx#57668f
support.variable.property.js#57668f
support.variable.property.jsx#57668f
support.variable.property.ts#515F86
support.variable.property.tsx#5D6D98
support.type.primitive.js#57668f
support.type.primitive.jsx#57668f
support.type.primitive.ts#6474A0
support.type.primitive.tsx#515F86
variable#6D7CA6
variable.parameter#B39E26
support.function#B39E26
meta.import.js#AA9524
meta.import.jsx#968420
meta.import.ts#968420
meta.import.tsx#8C7B1E
meta.paragraph.markdown#968420
entity.other.attribute-name.js#968420
entity.other.attribute-name.jsx#8C7B1E
entity.other.attribute-name.ts#968420
entity.other.attribute-name.tsx#B39E26
string.quoted.single.js#968420
string.quoted.single.jsx#968420
string.quoted.single.ts#968420
string.quoted.single.tsx#968420
string.quoted.single.json#8C7B1E
support.class.promise.js#968420
support.class.promise.jsx#968420
support.class.promise.ts#968420
support.class.promise.tsx#AA9524
support.type.object.console.js#83731C
support.type.object.console.jsx#968420
support.type.object.console.ts#A08D22
support.type.object.console.tsx#968420
support.function.console.js#B39E26
support.function.console.jsx#8C7B1E
support.function.console.ts#8C7B1E
support.function.console.tsx#8C7B1E
punctuation.definition.block.js#968420
punctuation.definition.block.jsx#968420
punctuation.definition.block.ts#968420
punctuation.definition.block.tsx#968420
punctuation.definition.parameters.begin.js#8C7B1E
punctuation.definition.parameters.begin.jsx#968420
punctuation.definition.parameters.begin.ts#8C7B1E
punctuation.definition.parameters.begin.tsx#A08D22
punctuation.definition.parameters.end.js#8C7B1E
punctuation.definition.parameters.end.jsx#A08D22
punctuation.definition.parameters.end.ts#968420
punctuation.definition.parameters.end.tsx#968420
punctuation.definition.parameters.end.js#8C7B1E
punctuation.definition.parameters.end.jsx#83731C
punctuation.definition.parameters.end.ts#B39E26
punctuation.definition.parameters.end.tsx#A08D22
markup.quote#968420
meta.tag.js#A08D22
meta.tag.jsx#8C7B1E
meta.tag.ts#968420
meta.tag.tsx#968420
meta.parameters.js#83731C
meta.parameters.jsx#968420
meta.parameters.ts#968420
meta.parameters.tsx#968420
meta.brace.square.js#8C7B1E
meta.brace.square.jsx#968420
meta.brace.square.ts#B39E26
meta.brace.square.tsx#968420
variable.other.class.js#968420
variable.other.class.jsx#796A1A
variable.other.class.ts#A08D22
variable.other.class.tsx#A08D22
constant.other.object.key.js#968420
constant.other.object.key.jsx#968420
constant.other.object.key.ts#968420
constant.other.object.key.tsx#A08D22
entity.name.function.method#796A1A
string.template#968420
support.type.property-name.json#968420
variable.other.property.js#83731C
variable.other.property.jsx#796A1A
variable.other.property.ts#968420
variable.other.property.tsx#968420
support.constant#6D7CA6
punctuation.separator.parameter.js#6474A0
punctuation.separator.parameter.jsx#57668f
punctuation.separator.parameter.ts#6D7CA6
punctuation.separator.parameter.tsx#57668f
constant.character#57668f
constant.language#515F86
constant.other#515F86
comment#515F86
markup.italic#465273
meta.object-literal.key.js#57668f
meta.object-literal.key.jsx#5D6D98
meta.object-literal.key.ts#515F86
meta.object-literal.key.tsx#57668f
comment.block.documentation#4C597C
comment.line.double-slash#57668f
punctuation.accessor.js#6D7CA6
punctuation.accessor.jsx#5D6D98
punctuation.accessor.ts#6474A0
punctuation.accessor.tsx#6D7CA6
variable.language#515F86
variable.other.object.js#515F86
variable.other.object.jsx#57668f
variable.other.object.ts#57668f
variable.other.object.tsx#57668f
variable.other.readwrite#57668f
variable.other.readwrite.js#57668f
variable.other.readwrite.jsx#5D6D98
variable.other.readwrite.ts#57668f
variable.other.readwrite.tsx#515F86
punctuation.separator.key-value.js#86383A
punctuation.separator.key-value.jsx#a74648
punctuation.separator.key-value.ts#B75456
punctuation.separator.key-value.tsx#a74648
storage.modifier.async.js#9C4143
storage.modifier.async.jsx#a74648
storage.modifier.async.ts#a74648
storage.modifier.async.tsx#B75456
meta.brace.round.js#86383A
meta.brace.round.jsx#B75456
meta.brace.round.ts#BC5F61
meta.brace.round.tsx#86383A
entity.other.inherited-class#B24B4D
support.class.builtin.js#913D3F
support.class.builtin.jsx#B24B4D
support.class.builtin.ts#a74648
support.class.builtin.tsx#B24B4D
meta.tag.attributes.js#86383A
meta.tag.attributes.jsx#a74648
meta.tag.attributes.ts#a74648
meta.tag.attributes.tsx#B75456
keyword.control.module.js#a74648
keyword.control.module.jsx#9C4143
keyword.control.module.ts#913D3F
keyword.control.module.tsx#a74648
keyword.operator.accessor#9C4143
invalid#a74648underline
constant.numeric#9C4143
keyword#9C4143
meta.var.expr.js#a74648
meta.var.expr.jsx#a74648
meta.var.expr.ts#913D3F
meta.var.expr.tsx#B24B4D
keyword.control.import.js#a74648
keyword.control.import.jsx#B24B4D
keyword.control.import.ts#86383A
keyword.control.import.tsx#a74648
keyword.control.from.js#B24B4D
keyword.control.from.jsx#9C4143
keyword.control.from.ts#86383A
keyword.control.from.tsx#BC5F61
keyword.control.export.js#a74648
keyword.control.export.jsx#a74648
keyword.control.export.ts#a74648
keyword.control.export.tsx#9C4143
keyword.control.default.js#a74648
keyword.control.default.jsx#a74648
keyword.control.default.ts#B75456
keyword.control.default.tsx#BC5F61
support.type.object.module.js#a74648
support.type.object.module.jsx#9C4143
support.type.object.module.ts#a74648
support.type.object.module.tsx#a74648

Shiki preview

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

Loading...

Niketa Theme Light Legacy by selfrefactor - VS Code Theme