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#d2d4bf
  • editor.background#f5f4e8
  • editor.lineHighlightBackground#F3F4EE
  • editor.selectionBackground#b0e4d5
  • editorBracketMatch.background#B7333D
  • editorBracketMatch.border#2179B7
  • editorGroupHeader.tabsBackground#ECEAD2
  • editorGutter.background#f5f4e8
  • editorLineNumber.foreground#BCBFA0
  • scrollbarSlider.background#d2d4bf
  • scrollbarSlider.hoverBackground#BCBFA0
  • sideBar.background#C7C9AF
  • statusBar.background#B1B490
  • tab.activeBackground#f5f4e8
  • tab.activeForeground#49594D
  • tab.border#f5f4e8
  • tab.inactiveBackground#B1B490
  • tab.inactiveForeground#f5f4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.separator.key-value.js#4e5f52
punctuation.separator.key-value.jsx#4e5f52
punctuation.separator.key-value.ts#4e5f52
punctuation.separator.key-value.tsx#4e5f52
storage.modifier.async.js#4e5f52
storage.modifier.async.jsx#4e5f52
storage.modifier.async.ts#4e5f52
storage.modifier.async.tsx#4e5f52
meta.brace.round.js#49594D
meta.brace.round.jsx#4e5f52
meta.brace.round.ts#4e5f52
meta.brace.round.tsx#4e5f52
entity.other.inherited-class#4e5f52
support.class.builtin.js#49594D
support.class.builtin.jsx#4e5f52
support.class.builtin.ts#4e5f52
support.class.builtin.tsx#4e5f52
meta.tag.attributes.js#4e5f52
meta.tag.attributes.jsx#49594D
meta.tag.attributes.ts#4e5f52
meta.tag.attributes.tsx#3F4C42
keyword.control.module.js#49594D
keyword.control.module.jsx#4e5f52
keyword.control.module.ts#4e5f52
keyword.control.module.tsx#536557
keyword.operator.accessor#586B5D
invalid#5D7262underline
constant.numeric#49594D
keyword#586B5D
meta.var.expr.js#4e5f52
meta.var.expr.jsx#4e5f52
meta.var.expr.ts#4e5f52
meta.var.expr.tsx#4e5f52
keyword.control.import.js#445347
keyword.control.import.jsx#4e5f52
keyword.control.import.ts#3F4C42
keyword.control.import.tsx#4e5f52
keyword.control.from.js#4e5f52
keyword.control.from.jsx#586B5D
keyword.control.from.ts#5D7262
keyword.control.from.tsx#49594D
keyword.control.export.js#536557
keyword.control.export.jsx#4e5f52
keyword.control.export.ts#536557
keyword.control.export.tsx#4e5f52
keyword.control.default.js#49594D
keyword.control.default.jsx#445347
keyword.control.default.ts#4e5f52
keyword.control.default.tsx#4e5f52
support.type.object.module.js#49594D
support.type.object.module.jsx#4e5f52
support.type.object.module.ts#4e5f52
support.type.object.module.tsx#49594D
variable.parameter#4e5f52
support.function#3F4C42
meta.import.js#4e5f52
meta.import.jsx#4e5f52
meta.import.ts#4e5f52
meta.import.tsx#4e5f52
meta.paragraph.markdown#4e5f52
entity.other.attribute-name.js#5D7262
entity.other.attribute-name.jsx#4e5f52
entity.other.attribute-name.ts#5D7262
entity.other.attribute-name.tsx#5D7262
string.quoted.single.js#4e5f52
string.quoted.single.jsx#49594D
string.quoted.single.ts#49594D
string.quoted.single.tsx#5D7262
string.quoted.single.json#586B5D
support.class.promise.js#4e5f52
support.class.promise.jsx#4e5f52
support.class.promise.ts#4e5f52
support.class.promise.tsx#536557
support.type.object.console.js#4e5f52
support.type.object.console.jsx#49594D
support.type.object.console.ts#586B5D
support.type.object.console.tsx#586B5D
support.function.console.js#4e5f52
support.function.console.jsx#4e5f52
support.function.console.ts#4e5f52
support.function.console.tsx#4e5f52
punctuation.definition.block.js#49594D
punctuation.definition.block.jsx#4e5f52
punctuation.definition.block.ts#4e5f52
punctuation.definition.block.tsx#4e5f52
support.constant#268bd2
punctuation.separator.parameter.js#2F93D9
punctuation.separator.parameter.jsx#2179B7
punctuation.separator.parameter.ts#268bd2
punctuation.separator.parameter.tsx#268bd2
constant.character#2482C4
constant.language#268bd2
constant.other#268bd2
comment#2482C4
markup.italic#2482C4
meta.object-literal.key.js#2482C4
meta.object-literal.key.jsx#268bd2
meta.object-literal.key.ts#2179B7
meta.object-literal.key.tsx#268bd2
comment.block.documentation#2482C4
comment.line.double-slash#268bd2
punctuation.accessor.js#268bd2
punctuation.accessor.jsx#268bd2
punctuation.accessor.ts#2482C4
punctuation.accessor.tsx#268bd2
variable.language#2F93D9
variable.other.object.js#1F70A9
variable.other.object.jsx#268bd2
variable.other.object.ts#268bd2
variable.other.object.tsx#1F70A9
variable.other.readwrite#268bd2
variable.other.readwrite.js#4AA1DE
variable.other.readwrite.jsx#3C9ADC
variable.other.readwrite.ts#268bd2
variable.other.readwrite.tsx#2179B7
constant.language.boolean#974545
constant.language.null.js#833C3C
constant.language.null.jsx#8D4141
constant.language.null.ts#AB4E4E
constant.language.null.tsx#833C3C
entity.name.class#974545underline
entity.name.function#974545underline
entity.name.type#8D4141underline
markup.heading.markdown#974545
punctuation.separator.comma.js#974545
punctuation.separator.comma.jsx#B25555
punctuation.separator.comma.ts#974545
punctuation.separator.comma.tsx#974545
support.variable.property.js#8D4141
support.variable.property.jsx#833C3C
support.variable.property.ts#8D4141
support.variable.property.tsx#974545
support.type.primitive.js#974545
support.type.primitive.jsx#A14949
support.type.primitive.ts#974545
support.type.primitive.tsx#B25555
variable#974545
entity.name.tag#2F93D9underline
markup.italic#268bd2
punctuation.accessor.js#2F93D9
punctuation.accessor.jsx#268bd2
punctuation.accessor.ts#2F93D9
punctuation.accessor.tsx#2179B7
source.js#268bd2
source.jsx#268bd2
source.ts#2F93D9
source.tsx#268bd2
storage.modifier.js#2482C4
storage.modifier.jsx#268bd2
storage.modifier.ts#2F93D9
storage.modifier.tsx#268bd2
storage.type#2179B7
string.quoted.single.js#2179B7
string.quoted.single.jsx#268bd2
string.quoted.single.ts#268bd2
string.quoted.single.tsx#268bd2
support.function.dom.js#2482C4
support.function.dom.jsx#1F70A9
support.function.dom.ts#4AA1DE
support.function.dom.tsx#268bd2
support.variable.property.js#1F70A9
support.variable.property.jsx#268bd2
support.variable.property.ts#2F93D9
support.variable.property.tsx#268bd2
variable.language.constructor#268bd2underline
variable.language.this#2482C4
punctuation.definition.parameters.begin.js#ca434d
punctuation.definition.parameters.begin.jsx#D66C74
punctuation.definition.parameters.begin.ts#D66C74
punctuation.definition.parameters.begin.tsx#D66C74
punctuation.definition.parameters.end.js#C43742
punctuation.definition.parameters.end.jsx#CE515A
punctuation.definition.parameters.end.ts#ca434d
punctuation.definition.parameters.end.tsx#ca434d
punctuation.definition.parameters.end.js#ca434d
punctuation.definition.parameters.end.jsx#ca434d
punctuation.definition.parameters.end.ts#ca434d
punctuation.definition.parameters.end.tsx#ca434d
markup.quote#C43742
meta.tag.js#ca434d
meta.tag.jsx#C43742
meta.tag.ts#ca434d
meta.tag.tsx#D66C74
meta.parameters.js#B7333D
meta.parameters.jsx#ca434d
meta.parameters.ts#ca434d
meta.parameters.tsx#C43742
meta.brace.square.js#ca434d
meta.brace.square.jsx#ca434d
meta.brace.square.ts#ca434d
meta.brace.square.tsx#ca434d
variable.other.class.js#C43742
variable.other.class.jsx#ca434d
variable.other.class.ts#ca434d
variable.other.class.tsx#CE515A
constant.other.object.key.js#C43742
constant.other.object.key.jsx#ca434d
constant.other.object.key.ts#ca434d
constant.other.object.key.tsx#B7333D
entity.name.function.method#ca434d
string.template#D66C74
support.type.property-name.json#ca434d
variable.other.property.js#C43742
variable.other.property.jsx#ca434d
variable.other.property.ts#ca434d
variable.other.property.tsx#ca434d

Shiki preview

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

Loading...

Niketa Theme Light Legacy by selfrefactor - VS Code Theme