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#E1DDD9D6
  • editor.background#FAF8F3
  • editor.lineHighlightBackground#E1DDD976
  • editor.selectionBackground#F8E2E2E9
  • editorBracketMatch.background#CF6F4Bf3
  • editorBracketMatch.border#6E3E53f3
  • editorGroupHeader.tabsBackground#FAF8F3f3
  • editorGutter.background#FAF8F3D6
  • editorLineNumber.foreground#E1DDD9f3
  • scrollbarSlider.background#E1DDD9D6
  • scrollbarSlider.hoverBackground#E1DDD9f3
  • sideBar.background#E1DDD9f3
  • statusBar.background#E1DDD9f3
  • tab.activeBackground#FAF8F3D6
  • tab.activeForeground#742146f3
  • tab.border#FAF8F3D6
  • tab.inactiveBackground#E1DDD9f3
  • tab.inactiveForeground#742146B7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#B06775f3underline
markup.italic#B06775f3
punctuation.accessor.js#B06775E9
punctuation.accessor.jsx#B06775B7
punctuation.accessor.ts#B06775CBEST
punctuation.accessor.tsx#B06775f3
source.js#B06775E9
source.jsx#B06775E9
source.ts#B06775CB
source.tsx#B06775f3
storage.modifier.js#B06775CBEST
storage.modifier.jsx#B06775E9
storage.modifier.ts#B06775E9
storage.modifier.tsx#B06775f3
storage.type#B06775E9
string.quoted.single.js#B06775B7
string.quoted.single.jsx#B06775B7
string.quoted.single.ts#B06775B7
string.quoted.single.tsx#B06775f3
support.function.dom.js#B06775CBEST
support.function.dom.jsx#B06775E9
support.function.dom.ts#B06775E9
support.function.dom.tsx#B06775CBEST
support.variable.property.js#B06775E9
support.variable.property.jsx#B06775B7
support.variable.property.ts#B06775f3
support.variable.property.tsx#B06775E9
variable.language.constructor#B06775CBunderline
variable.language.this#B06775f3
constant.language.boolean#742146E9
constant.language.null.js#742146f3
constant.language.null.jsx#742146f3
constant.language.null.ts#742146E9
constant.language.null.tsx#742146E9
entity.name.class#742146E9underline
entity.name.function#742146E9underline
entity.name.type#742146f3underline
markup.heading.markdown#742146CB
punctuation.separator.comma.js#742146E9
punctuation.separator.comma.jsx#742146E9
punctuation.separator.comma.ts#742146E9
punctuation.separator.comma.tsx#742146E9
support.variable.property.js#742146E9
support.variable.property.jsx#742146E9
support.variable.property.ts#742146f3
support.variable.property.tsx#742146CB
support.type.primitive.js#742146E9
support.type.primitive.jsx#742146E9
support.type.primitive.ts#742146B7
support.type.primitive.tsx#742146f3
variable#742146CBEST
variable.parameter#54ABB5CBEST
support.function#54ABB5CBEST
meta.import.js#54ABB5B7
meta.import.jsx#54ABB5E9
meta.import.ts#54ABB5E9
meta.import.tsx#54ABB5f3
meta.paragraph.markdown#54ABB5E9
entity.other.attribute-name.js#54ABB5E9
entity.other.attribute-name.jsx#54ABB5f3
entity.other.attribute-name.ts#54ABB5E9
entity.other.attribute-name.tsx#54ABB5CBEST
string.quoted.single.js#54ABB5E9
string.quoted.single.jsx#54ABB5E9
string.quoted.single.ts#54ABB5E9
string.quoted.single.tsx#54ABB5E9
string.quoted.single.json#54ABB5f3
support.class.promise.js#54ABB5E9
support.class.promise.jsx#54ABB5E9
support.class.promise.ts#54ABB5E9
support.class.promise.tsx#54ABB5B7
support.type.object.console.js#54ABB5f3
support.type.object.console.jsx#54ABB5E9
support.type.object.console.ts#54ABB5CB
support.type.object.console.tsx#54ABB5E9
support.function.console.js#54ABB5CBEST
support.function.console.jsx#54ABB5f3
support.function.console.ts#54ABB5f3
support.function.console.tsx#54ABB5f3
punctuation.definition.block.js#54ABB5E9
punctuation.definition.block.jsx#54ABB5E9
punctuation.definition.block.ts#54ABB5E9
punctuation.definition.block.tsx#54ABB5E9
punctuation.definition.parameters.begin.js#8F1C3Df3
punctuation.definition.parameters.begin.jsx#8F1C3DE9
punctuation.definition.parameters.begin.ts#8F1C3Df3
punctuation.definition.parameters.begin.tsx#8F1C3DCB
punctuation.definition.parameters.end.js#8F1C3Df3
punctuation.definition.parameters.end.jsx#8F1C3DCB
punctuation.definition.parameters.end.ts#8F1C3DE9
punctuation.definition.parameters.end.tsx#8F1C3DE9
punctuation.definition.parameters.end.js#8F1C3Df3
punctuation.definition.parameters.end.jsx#8F1C3Df3
punctuation.definition.parameters.end.ts#8F1C3DCBEST
punctuation.definition.parameters.end.tsx#8F1C3DCB
markup.quote#8F1C3DE9
meta.tag.js#8F1C3DCB
meta.tag.jsx#8F1C3Df3
meta.tag.ts#8F1C3DE9
meta.tag.tsx#8F1C3DE9
meta.parameters.js#8F1C3Df3
meta.parameters.jsx#8F1C3DE9
meta.parameters.ts#8F1C3DE9
meta.parameters.tsx#8F1C3DE9
meta.brace.square.js#8F1C3Df3
meta.brace.square.jsx#8F1C3DE9
meta.brace.square.ts#8F1C3DCBEST
meta.brace.square.tsx#8F1C3DE9
variable.other.class.js#8F1C3DE9
variable.other.class.jsx#8F1C3Df3
variable.other.class.ts#8F1C3DCB
variable.other.class.tsx#8F1C3DCB
constant.other.object.key.js#8F1C3DE9
constant.other.object.key.jsx#8F1C3DE9
constant.other.object.key.ts#8F1C3DE9
constant.other.object.key.tsx#8F1C3DCB
entity.name.function.method#8F1C3Df3
string.template#8F1C3DE9
support.type.property-name.json#8F1C3DE9
variable.other.property.js#8F1C3Df3
variable.other.property.jsx#8F1C3Df3
variable.other.property.ts#8F1C3DE9
variable.other.property.tsx#8F1C3DE9
support.constant#6E3E53B8EST
punctuation.separator.parameter.js#6E3E53A4
punctuation.separator.parameter.jsx#6E3E53D6
punctuation.separator.parameter.ts#6E3E53B8EST
punctuation.separator.parameter.tsx#6E3E53D6
constant.character#6E3E53D6
constant.language#6E3E53f3
constant.other#6E3E53f3
comment#6E3E53f3
markup.italic#6E3E53f3
meta.object-literal.key.js#6E3E53D6
meta.object-literal.key.jsx#6E3E53B8
meta.object-literal.key.ts#6E3E53f3
meta.object-literal.key.tsx#6E3E53D6
comment.block.documentation#6E3E53f3
comment.line.double-slash#6E3E53D6
punctuation.accessor.js#6E3E53B8EST
punctuation.accessor.jsx#6E3E53B8
punctuation.accessor.ts#6E3E53A4
punctuation.accessor.tsx#6E3E53B8EST
variable.language#6E3E53f3
variable.other.object.js#6E3E53f3
variable.other.object.jsx#6E3E53D6
variable.other.object.ts#6E3E53D6
variable.other.object.tsx#6E3E53D6
variable.other.readwrite#6E3E53D6
variable.other.readwrite.js#6E3E53D6
variable.other.readwrite.jsx#6E3E53B8
variable.other.readwrite.ts#6E3E53D6
variable.other.readwrite.tsx#6E3E53f3
punctuation.separator.key-value.js#CF6F4Bf3
punctuation.separator.key-value.jsx#CF6F4BF1
punctuation.separator.key-value.ts#CF6F4BBF
punctuation.separator.key-value.tsx#CF6F4BF1
storage.modifier.async.js#CF6F4Bf3
storage.modifier.async.jsx#CF6F4BF1
storage.modifier.async.ts#CF6F4BF1
storage.modifier.async.tsx#CF6F4BBF
meta.brace.round.js#CF6F4Bf3
meta.brace.round.jsx#CF6F4BBF
meta.brace.round.ts#CF6F4BD3EST
meta.brace.round.tsx#CF6F4Bf3
entity.other.inherited-class#CF6F4BD3
support.class.builtin.js#CF6F4Bf3
support.class.builtin.jsx#CF6F4BD3
support.class.builtin.ts#CF6F4BF1
support.class.builtin.tsx#CF6F4BD3
meta.tag.attributes.js#CF6F4Bf3
meta.tag.attributes.jsx#CF6F4BF1
meta.tag.attributes.ts#CF6F4BF1
meta.tag.attributes.tsx#CF6F4BBF
keyword.control.module.js#CF6F4BF1
keyword.control.module.jsx#CF6F4Bf3
keyword.control.module.ts#CF6F4Bf3
keyword.control.module.tsx#CF6F4BF1
keyword.operator.accessor#CF6F4Bf3
invalid#CF6F4BF1underline
constant.numeric#CF6F4Bf3
keyword#CF6F4Bf3
meta.var.expr.js#CF6F4BF1
meta.var.expr.jsx#CF6F4BF1
meta.var.expr.ts#CF6F4Bf3
meta.var.expr.tsx#CF6F4BD3
keyword.control.import.js#CF6F4BF1
keyword.control.import.jsx#CF6F4BD3
keyword.control.import.ts#CF6F4Bf3
keyword.control.import.tsx#CF6F4BF1
keyword.control.from.js#CF6F4BD3
keyword.control.from.jsx#CF6F4Bf3
keyword.control.from.ts#CF6F4Bf3
keyword.control.from.tsx#CF6F4BD3EST
keyword.control.export.js#CF6F4BF1
keyword.control.export.jsx#CF6F4BF1
keyword.control.export.ts#CF6F4BF1
keyword.control.export.tsx#CF6F4Bf3
keyword.control.default.js#CF6F4BF1
keyword.control.default.jsx#CF6F4BF1
keyword.control.default.ts#CF6F4BBF
keyword.control.default.tsx#CF6F4BD3EST
support.type.object.module.js#CF6F4BF1
support.type.object.module.jsx#CF6F4Bf3
support.type.object.module.ts#CF6F4BF1
support.type.object.module.tsx#CF6F4BF1

Shiki preview

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

Loading...

Niketa Theme Light Legacy by selfrefactor - VS Code Theme