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#c3c6c7aa
  • editor.background#f3f0e0
  • editor.lineHighlightBackground#e1ddd976
  • editor.selectionBackground#edc6bdaa
  • editorBracketMatch.background#9C760F
  • editorBracketMatch.border#703D42
  • editorGroupHeader.tabsBackground#E7E1C2
  • editorGutter.background#f3f0e0
  • editorLineNumber.foreground#9EA3A5
  • scrollbarSlider.background#c3c6c7
  • scrollbarSlider.hoverBackground#9EA3A5
  • sideBar.background#B1B5B6
  • statusBar.background#8C9294
  • tab.activeBackground#f3f0e0
  • tab.activeForeground#365D54
  • tab.border#f3f0e0
  • tab.inactiveBackground#365D54
  • tab.inactiveForeground#f3f0e0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant#B84251
punctuation.definition.template-expression.begin.js#945257
punctuation.definition.template-expression.begin.jsx#884b50
punctuation.definition.template-expression.begin.ts#A0595E
punctuation.definition.template-expression.begin.tsx#945257
punctuation.definition.template-expression.end.js#884b50
punctuation.definition.template-expression.end.jsx#884b50
punctuation.definition.template-expression.end.ts#884b50
punctuation.definition.template-expression.end.tsx#884b50
entity.name.tag#3782AFunderline
punctuation.accessor.js#3277a1
punctuation.accessor.jsx#3782AF
punctuation.accessor.ts#296284
punctuation.accessor.tsx#3782AF
source.js#945257
source.jsx#884b50
source.ts#945257
source.tsx#884b50
source.css#c15160
source.scss#A0595E
storage.modifier.js#c15160
storage.modifier.jsx#B84251
storage.modifier.ts#CE7581
storage.modifier.tsx#A63B49
string.quoted.single.js#c15160
string.quoted.single.jsx#C76371
string.quoted.single.ts#C76371
string.quoted.single.tsx#CE7581
support.function.dom.js#AD8310
support.function.dom.jsx#be9012
support.function.dom.ts#be9012
support.function.dom.tsx#E0AA15
support.variable.property.js#3277a1
support.variable.property.jsx#3B8CBE
support.variable.property.ts#3B8CBE
support.variable.property.tsx#3277a1
variable.language.constructor#3277a1underline
variable.language.this#406F64
meta.selector.css#E0AA15
constant.language.null.js#A0595E
constant.language.null.jsx#884b50
constant.language.null.ts#A0595E
constant.language.null.tsx#884b50
entity.name.class#3b665cunderline
entity.name.function#884b50underline
markup.heading.markdown#3b665c
punctuation.separator.comma.js#2D6C93
punctuation.separator.comma.jsx#3277a1
punctuation.separator.comma.ts#3277a1
punctuation.separator.comma.tsx#3277a1
support.variable.property.js#B84251
support.variable.property.jsx#C76371
support.variable.property.ts#c15160
support.variable.property.tsx#A63B49
support.type.primitive.js#9C760F
support.type.primitive.jsx#be9012
support.type.primitive.ts#AD8310
support.type.primitive.tsx#be9012
meta.brace.square.js#c15160
meta.brace.square.jsx#C76371
meta.brace.square.ts#c15160
meta.brace.square.tsx#C76371
variable.other.class.js#be9012
variable.other.class.jsx#be9012
variable.other.class.ts#be9012
variable.other.class.tsx#AD8310
constant.other.object.key.js#884b50
constant.other.object.key.jsx#945257
constant.other.object.key.ts#884b50
constant.other.object.key.tsx#7C4449
variable.language#3b665c
constant.language#c15160
entity.name.type#3b665cunderline
variable.parameter#c15160
support.function#c15160
source.json#CF9D14
meta.object-literal.key.js#945257
meta.object-literal.key.jsx#A0595E
meta.object-literal.key.ts#A0595E
meta.object-literal.key.tsx#884b50
variable.other.constant.js#296284
variable.other.constant.jsx#2D6C93
variable.other.constant.ts#296284
variable.other.constant.tsx#3B8CBE
meta.paragraph.markdown#A0595E
entity.other.attribute-name.js#3277a1
entity.other.attribute-name.jsx#296284
entity.other.attribute-name.ts#3277a1
entity.other.attribute-name.tsx#296284
string.quoted.single.json#B84251
support.class.promise.js#A63B49
support.class.promise.jsx#c15160
support.class.promise.ts#A63B49
support.class.promise.tsx#C76371
support.type.object.console.js#3b665c
support.type.object.console.jsx#46786D
support.type.object.console.ts#3b665c
support.type.object.console.tsx#406F64
support.function.console.js#be9012
support.function.console.jsx#be9012
support.function.console.ts#be9012
support.function.console.tsx#9C760F
punctuation.definition.block.js#2D6C93
punctuation.definition.block.jsx#3277a1
punctuation.definition.block.ts#296284
punctuation.definition.block.tsx#2D6C93
storage.type#3b665c
constant.other#884b50
variable.other.object.js#E0AA15
variable.other.object.jsx#AD8310
variable.other.object.ts#AD8310
variable.other.object.tsx#9C760F
markup.quote#A63B49
meta.import.js#3B8CBE
meta.import.jsx#3277a1
meta.import.ts#3277a1
meta.import.tsx#3277a1
meta.tag.js#A0595E
meta.tag.jsx#884b50
meta.tag.ts#A0595E
meta.tag.tsx#884b50
string.quoted.single.js#AD8310
string.quoted.single.jsx#E0AA15
string.quoted.single.ts#CF9D14
string.quoted.single.tsx#CF9D14
meta.object-literal.key.js#AD8310
meta.object-literal.key.jsx#be9012
meta.object-literal.key.ts#E0AA15
meta.object-literal.key.tsx#be9012
string.template#7C4449
entity.name.function.method#9C760F
support.type.property-name.json#A0595E
variable.other.property.js#884b50
variable.other.property.jsx#884b50
variable.other.property.ts#945257
variable.other.property.tsx#7C4449
markup.italic#3782AF
meta.template.expression.js#3b665c
meta.template.expression.jsx#30544B
meta.template.expression.ts#46786D
meta.template.expression.tsx#3b665c
punctuation.separator.parameter.js#c15160
punctuation.separator.parameter.jsx#CE7581
punctuation.separator.parameter.ts#A63B49
punctuation.separator.parameter.tsx#c15160
meta.parameters.js#be9012
meta.parameters.jsx#be9012
meta.parameters.ts#be9012
meta.parameters.tsx#be9012
constant.character#be9012
comment#E0AA15
keyword#AD8310
markup.italic#3277a1
comment.block.documentation#B84251
comment.line.double-slash#B84251
punctuation.accessor.js#be9012
punctuation.accessor.jsx#be9012
punctuation.accessor.ts#CF9D14
punctuation.accessor.tsx#be9012
punctuation.definition.parameters.begin.js#be9012
punctuation.definition.parameters.begin.jsx#be9012
punctuation.definition.parameters.begin.ts#CF9D14
punctuation.definition.parameters.begin.tsx#AD8310
punctuation.definition.parameters.end.js#be9012
punctuation.definition.parameters.end.jsx#E0AA15
punctuation.definition.parameters.end.ts#E0AA15
punctuation.definition.parameters.end.tsx#be9012
constant.language.boolean#46786D
punctuation.separator.key-value.js#46786D
punctuation.separator.key-value.jsx#365D54
punctuation.separator.key-value.ts#3b665c
punctuation.separator.key-value.tsx#46786D
storage.modifier.async.js#be9012
storage.modifier.async.jsx#CF9D14
storage.modifier.async.ts#CF9D14
storage.modifier.async.tsx#9C760F
meta.brace.round.js#be9012
meta.brace.round.jsx#E0AA15
meta.brace.round.ts#be9012
meta.brace.round.tsx#9C760F
entity.other.inherited-class#30544B
support.class.builtin.js#296284
support.class.builtin.jsx#3277a1
support.class.builtin.ts#296284
support.class.builtin.tsx#3277a1
meta.tag.attributes.js#be9012
meta.tag.attributes.jsx#E0AA15
meta.tag.attributes.ts#9C760F
meta.tag.attributes.tsx#be9012
keyword.control.module.js#3782AF
keyword.control.module.jsx#3277a1
keyword.control.module.ts#3277a1
keyword.control.module.tsx#2D6C93
keyword.operator.accessor#46786D
invalid#365D54underline
constant.numeric#2D6C93
meta.var.expr.js#884b50
meta.var.expr.jsx#703D42
meta.var.expr.ts#884b50
meta.var.expr.tsx#945257
keyword.control.import.js#3B8CBE
keyword.control.import.jsx#3277a1
keyword.control.import.ts#3B8CBE
keyword.control.import.tsx#3277a1
keyword.control.from.js#B84251
keyword.control.from.jsx#B84251
keyword.control.from.ts#c15160
keyword.control.from.tsx#CE7581
keyword.control.export.js#3277a1
keyword.control.export.jsx#3277a1
keyword.control.export.ts#3277a1
keyword.control.export.tsx#2D6C93
keyword.control.default.js#3277a1
keyword.control.default.jsx#3277a1
keyword.control.default.ts#3277a1
keyword.control.default.tsx#3B8CBE
support.type.object.module.js#be9012
support.type.object.module.jsx#E0AA15
support.type.object.module.ts#be9012
support.type.object.module.tsx#be9012

Shiki preview

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

Loading...

Niketa Theme Light Legacy by selfrefactor - VS Code Theme