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#a5a9a1
  • editor.background#dcdcd3
  • editor.lineHighlightBackground#C5C8C3
  • editor.selectionBackground#eec2bb
  • editorBracketMatch.background#294D61
  • editorBracketMatch.border#CD4720
  • editorGroupHeader.tabsBackground#D0D0C3
  • editorGutter.background#dcdcd3
  • editorLineNumber.foreground#90958B
  • scrollbarSlider.background#a5a9a1
  • scrollbarSlider.hoverBackground#90958B
  • sideBar.background#9A9F96
  • statusBar.background#858A7F
  • tab.activeBackground#dcdcd3
  • tab.activeForeground#836E42
  • tab.border#dcdcd3
  • tab.inactiveBackground#858A7F
  • tab.inactiveForeground#dcdcd3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#2f586funderline
markup.italic#2f586f
punctuation.accessor.js#2f586f
punctuation.accessor.jsx#2C5268
punctuation.accessor.ts#2f586f
punctuation.accessor.tsx#325E76
source.js#2f586f
source.jsx#2f586f
source.ts#2f586f
source.tsx#2C5268
storage.modifier.js#2f586f
storage.modifier.jsx#2C5268
storage.modifier.ts#2f586f
storage.modifier.tsx#2C5268
storage.type#2f586f
string.quoted.single.js#2C5268
string.quoted.single.jsx#2C5268
string.quoted.single.ts#386985
string.quoted.single.tsx#325E76
support.function.dom.js#35637D
support.function.dom.jsx#2f586f
support.function.dom.ts#294D61
support.function.dom.tsx#2f586f
support.variable.property.js#2f586f
support.variable.property.jsx#35637D
support.variable.property.ts#325E76
support.variable.property.tsx#325E76
variable.language.constructor#2C5268underline
variable.language.this#294D61
constant.language.boolean#8c7647
constant.language.null.js#8c7647
constant.language.null.jsx#8c7647
constant.language.null.ts#8c7647
constant.language.null.tsx#8c7647
entity.name.class#8c7647underline
entity.name.function#957E4Cunderline
entity.name.type#7A673Eunderline
markup.heading.markdown#9E8550
punctuation.separator.comma.js#8c7647
punctuation.separator.comma.jsx#957E4C
punctuation.separator.comma.ts#8c7647
punctuation.separator.comma.tsx#8c7647
support.variable.property.js#A78D55
support.variable.property.jsx#8c7647
support.variable.property.ts#8c7647
support.variable.property.tsx#7A673E
support.type.primitive.js#8c7647
support.type.primitive.jsx#957E4C
support.type.primitive.ts#836E42
support.type.primitive.tsx#9E8550
variable#8c7647
punctuation.definition.parameters.begin.js#df5831
punctuation.definition.parameters.begin.jsx#E47150
punctuation.definition.parameters.begin.ts#CD4720
punctuation.definition.parameters.begin.tsx#df5831
punctuation.definition.parameters.end.js#E67D5F
punctuation.definition.parameters.end.jsx#df5831
punctuation.definition.parameters.end.ts#df5831
punctuation.definition.parameters.end.tsx#DC4C22
punctuation.definition.parameters.end.js#df5831
punctuation.definition.parameters.end.jsx#CD4720
punctuation.definition.parameters.end.ts#E67D5F
punctuation.definition.parameters.end.tsx#DC4C22
markup.quote#DC4C22
meta.tag.js#df5831
meta.tag.jsx#df5831
meta.tag.ts#DC4C22
meta.tag.tsx#E47150
meta.parameters.js#E47150
meta.parameters.jsx#df5831
meta.parameters.ts#df5831
meta.parameters.tsx#df5831
meta.brace.square.js#E16440
meta.brace.square.jsx#E16440
meta.brace.square.ts#E16440
meta.brace.square.tsx#E16440
variable.other.class.js#df5831
variable.other.class.jsx#df5831
variable.other.class.ts#df5831
variable.other.class.tsx#df5831
constant.other.object.key.js#df5831
constant.other.object.key.jsx#df5831
constant.other.object.key.ts#df5831
constant.other.object.key.tsx#E67D5F
entity.name.function.method#DC4C22
string.template#CD4720
support.type.property-name.json#E16440
variable.other.property.js#DC4C22
variable.other.property.jsx#df5831
variable.other.property.ts#df5831
variable.other.property.tsx#df5831
support.constant#8c7647
punctuation.separator.parameter.js#836E42
punctuation.separator.parameter.jsx#9E8550
punctuation.separator.parameter.ts#8c7647
punctuation.separator.parameter.tsx#8c7647
constant.character#957E4C
constant.language#957E4C
constant.other#836E42
comment#836E42
markup.italic#8c7647
meta.object-literal.key.js#8c7647
meta.object-literal.key.jsx#8c7647
meta.object-literal.key.ts#8c7647
meta.object-literal.key.tsx#8c7647
comment.block.documentation#8c7647
comment.line.double-slash#8c7647
punctuation.accessor.js#957E4C
punctuation.accessor.jsx#836E42
punctuation.accessor.ts#8c7647
punctuation.accessor.tsx#A78D55
variable.language#8c7647
variable.other.object.js#715F39
variable.other.object.jsx#8c7647
variable.other.object.ts#836E42
variable.other.object.tsx#8c7647
variable.other.readwrite#8c7647
variable.other.readwrite.js#A78D55
variable.other.readwrite.jsx#8c7647
variable.other.readwrite.ts#8c7647
variable.other.readwrite.tsx#836E42
variable.parameter#CD4720
support.function#df5831
meta.import.js#df5831
meta.import.jsx#df5831
meta.import.ts#DC4C22
meta.import.tsx#df5831
meta.paragraph.markdown#BE411D
entity.other.attribute-name.js#df5831
entity.other.attribute-name.jsx#df5831
entity.other.attribute-name.ts#E47150
entity.other.attribute-name.tsx#df5831
string.quoted.single.js#df5831
string.quoted.single.jsx#df5831
string.quoted.single.ts#df5831
string.quoted.single.tsx#df5831
string.quoted.single.json#df5831
support.class.promise.js#df5831
support.class.promise.jsx#df5831
support.class.promise.ts#E16440
support.class.promise.tsx#df5831
support.type.object.console.js#E67D5F
support.type.object.console.jsx#df5831
support.type.object.console.ts#df5831
support.type.object.console.tsx#E16440
support.function.console.js#DC4C22
support.function.console.jsx#df5831
support.function.console.ts#CD4720
support.function.console.tsx#df5831
punctuation.definition.block.js#df5831
punctuation.definition.block.jsx#df5831
punctuation.definition.block.ts#E16440
punctuation.definition.block.tsx#E47150
punctuation.separator.key-value.js#2f586f
punctuation.separator.key-value.jsx#2C5268
punctuation.separator.key-value.ts#2f586f
punctuation.separator.key-value.tsx#2f586f
storage.modifier.async.js#2f586f
storage.modifier.async.jsx#2C5268
storage.modifier.async.ts#325E76
storage.modifier.async.tsx#2f586f
meta.brace.round.js#2C5268
meta.brace.round.jsx#2f586f
meta.brace.round.ts#2f586f
meta.brace.round.tsx#294D61
entity.other.inherited-class#325E76
support.class.builtin.js#2f586f
support.class.builtin.jsx#2f586f
support.class.builtin.ts#2f586f
support.class.builtin.tsx#264759
meta.tag.attributes.js#294D61
meta.tag.attributes.jsx#2f586f
meta.tag.attributes.ts#2f586f
meta.tag.attributes.tsx#264759
keyword.control.module.js#2f586f
keyword.control.module.jsx#2f586f
keyword.control.module.ts#264759
keyword.control.module.tsx#2f586f
keyword.operator.accessor#2f586f
invalid#325E76underline
constant.numeric#325E76
keyword#2f586f
meta.var.expr.js#264759
meta.var.expr.jsx#2C5268
meta.var.expr.ts#35637D
meta.var.expr.tsx#325E76
keyword.control.import.js#386985
keyword.control.import.jsx#386985
keyword.control.import.ts#2f586f
keyword.control.import.tsx#325E76
keyword.control.from.js#2C5268
keyword.control.from.jsx#2f586f
keyword.control.from.ts#35637D
keyword.control.from.tsx#2C5268
keyword.control.export.js#2C5268
keyword.control.export.jsx#386985
keyword.control.export.ts#2f586f
keyword.control.export.tsx#2f586f
keyword.control.default.js#35637D
keyword.control.default.jsx#2C5268
keyword.control.default.ts#2f586f
keyword.control.default.tsx#294D61
support.type.object.module.js#2f586f
support.type.object.module.jsx#2C5268
support.type.object.module.ts#294D61
support.type.object.module.tsx#2f586f

Shiki preview

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

Loading...

Niketa Theme Light Legacy by selfrefactor - VS Code Theme