Skip to main content
Coding Theme

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.activeBackground#313b4c
  • activityBar.background#1c222c
  • activityBar.border#313b4c
  • activityBar.dropBorder#313b4c
  • editor.background#2c323d
  • editor.lineHighlightBackground#3f434e
  • editor.selectionBackground#4a5260
  • editor.selectionHighlightBackground#4a5260
  • editorBracketHighlight.foreground1#db7868
  • editorBracketHighlight.foreground2#e2be7f
  • editorBracketHighlight.foreground3#83c795
  • editorBracketHighlight.foreground4#62c4cf
  • editorBracketHighlight.foreground5#a184c5
  • editorBracketHighlight.foreground6#c07eac
  • editorBracketHighlight.unexpectedBracket.foreground#db6165
  • editorGroupHeader.tabsBackground#202732
  • editorGutter.background#2c323d
  • editorLineNumber.foreground#bfb19bf1
  • menu.selectionForeground#7e8ba0
  • progressBar.background#c4baaaf1
  • scrollbarSlider.background#3c4c55d5
  • scrollbarSlider.hoverBackground#789090
  • sideBar.background#202732
  • sideBar.dropBackground#789090
  • sideBar.foreground#aea69af1
  • sideBarSectionHeader.background#2c323d
  • sideBarSectionHeader.border#789090
  • sideBarSectionHeader.foreground#789090
  • sideBarTitle.foreground#7e8ba0
  • statusBar.background#1c222c
  • statusBar.foreground#6b788f
  • tab.activeBackground#2c323d
  • tab.activeForeground#7da2b6
  • tab.border#313b4c
  • tab.inactiveBackground#202732
  • tab.inactiveForeground#7e8ba0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language.boolean#63AED6
constant.language.null.js#D8C0A8
constant.language.null.jsx#F7DDB2F3
constant.language.null.ts#D8C0A8
constant.language.null.tsx#D8C0A8
entity.name.class#F7DDB2F3
entity.name.function#A8C0D8
entity.name.type#F7DDB2F3
markup.heading.markdown#D8C0A8
punctuation.separator.comma.js#F7DDB2D3
punctuation.separator.comma.jsx#D8C0A8
punctuation.separator.comma.ts#F7DDB2BF
punctuation.separator.comma.tsx#F7DDB2D3
support.variable.property.js#F7DDB2F3
support.variable.property.jsx#F7DDB2D3
support.variable.property.ts#D8C0A8
support.variable.property.tsx#D8C0A8
support.type.primitive.js#D8C0A8
support.type.primitive.jsx#D8C0A8
support.type.primitive.ts#F7DDB2F3
support.type.primitive.tsx#D8C0A8
variable#F0D8C0
variable.parameter#97ACC2
support.function#6EA0BA
meta.import.js#7BA9C0
meta.import.jsx#7BA9C0
meta.import.ts#6197B4
meta.import.tsx#95BACD
meta.paragraph.markdown#548FAE
entity.other.attribute-name.js#6EA0BA
entity.other.attribute-name.jsx#6EA0BA
entity.other.attribute-name.ts#6EA0BA
entity.other.attribute-name.tsx#95BACD
string.quoted.single.js#6197B4
string.quoted.single.jsx#88B1C6
string.quoted.single.ts#6EA0BA
string.quoted.single.tsx#6197B4
string.quoted.single.json#4D85A1
support.class.promise.js#6197B4
support.class.promise.jsx#88B1C6
support.class.promise.ts#6EA0BA
support.class.promise.tsx#95BACD
support.type.object.console.js#7BA9C0
support.type.object.console.jsx#6197B4
support.type.object.console.ts#6EA0BA
support.type.object.console.tsx#95BACD
support.function.console.js#6EA0BA
support.function.console.jsx#6EA0BA
support.function.console.ts#6EA0BA
support.function.console.tsx#6EA0BA
punctuation.definition.block.js#95BACD
punctuation.definition.block.jsx#6EA0BA
punctuation.definition.block.ts#6EA0BA
punctuation.definition.block.tsx#95BACD
support.constant#EBA1A1
punctuation.separator.parameter.js#DF6868
punctuation.separator.parameter.jsx#E78E8E
punctuation.separator.parameter.ts#D74343
punctuation.separator.parameter.tsx#DF6868
constant.character#DF6868
constant.language#DF8C8C
constant.other#D1A9A9
comment#ACA2A2
markup.italic#DF6868
meta.object-literal.key.js#D1A9A9
meta.object-literal.key.jsx#D74343
meta.object-literal.key.ts#E78E8E
meta.object-literal.key.tsx#E78E8E
comment.block.documentation#DB5555
comment.line.double-slash#DF6868
punctuation.accessor.js#D1A9A9
punctuation.accessor.jsx#E78E8E
punctuation.accessor.ts#D1A9A9
punctuation.accessor.tsx#D1A9A9
variable.language#D1A9A9
variable.other.object.js#DF6868
variable.other.object.jsx#D1A9A9
variable.other.object.ts#E78E8E
variable.other.object.tsx#D1A9A9
entity.name.tag#A49169
markup.italic#A49169
punctuation.accessor.js#A49169
punctuation.accessor.jsx#A49169
punctuation.accessor.ts#A49169
punctuation.accessor.tsx#A49169
source.js#A49169
source.jsx#A49169
source.ts#A49169
source.tsx#A49169
storage.modifier.js#A49169
storage.modifier.jsx#A49169
storage.modifier.ts#A49169
storage.modifier.tsx#A49169
storage.type#F0BF5B
string.quoted.single.js#A49169
string.quoted.single.jsx#A49169
string.quoted.single.ts#A49169
string.quoted.single.tsx#A49169
support.function.dom.js#A49169
support.function.dom.jsx#A49169
support.function.dom.ts#A49169
support.function.dom.tsx#A49169
support.variable.property.js#A49169
support.variable.property.jsx#A49169
support.variable.property.ts#A49169
support.variable.property.tsx#A49169
variable.language.constructor#A49169
variable.language.this#A49169
punctuation.separator.key-value.js#DA608E
punctuation.separator.key-value.jsx#63AED6
punctuation.separator.key-value.ts#E695B4
punctuation.separator.key-value.tsx#63AED6
storage.modifier.async.js#63AED6
storage.modifier.async.jsx#E284A8
storage.modifier.async.ts#63AED6
storage.modifier.async.tsx#DA608E
meta.brace.round.js#63AED6
meta.brace.round.jsx#A8C0D8
meta.brace.round.ts#63AED6
meta.brace.round.tsx#63AED6
entity.other.inherited-class#EAA7C1
support.class.builtin.js#63AED6
support.class.builtin.jsx#63AED6
support.class.builtin.ts#A8C0D8
support.class.builtin.tsx#E284A8
meta.tag.attributes.js#63AED6
meta.tag.attributes.jsx#DA608E
meta.tag.attributes.ts#A8C0D8
meta.tag.attributes.tsx#EAA7C1
keyword.control.module.js#63AED6
keyword.control.module.jsx#63AED6
keyword.control.module.ts#E695B4
keyword.control.module.tsx#DA608E
keyword.operator.accessor#EAA7C1
invalid#E284A8
constant.numeric#63AED6
keyword#D66D6D
meta.var.expr.js#63AED6
meta.var.expr.jsx#EAA7C1
meta.var.expr.ts#E284A8
meta.var.expr.tsx#DA608E
keyword.control.import.js#63AED6
keyword.control.import.jsx#DA608E
keyword.control.import.ts#D66D6D
keyword.control.import.tsx#DA608E
keyword.control.from.js#63AED6
keyword.control.from.jsx#E284A8
keyword.control.from.ts#63AED6
keyword.control.from.tsx#E284A8
keyword.control.export.js#EAA7C1
keyword.control.export.jsx#63AED6
keyword.control.export.ts#63AED6
keyword.control.export.tsx#DA608E
keyword.control.default.js#DA608E
keyword.control.default.jsx#63AED6
keyword.control.default.ts#D64F82
keyword.control.default.tsx#DA608E
support.type.object.module.js#63AED6
support.type.object.module.jsx#DA608E
support.type.object.module.ts#63AED6
support.type.object.module.tsx#63AED6
punctuation.definition.parameters.begin.js#D66D6D
punctuation.definition.parameters.begin.jsx#2B9E6A
punctuation.definition.parameters.begin.ts#60C195
punctuation.definition.parameters.begin.tsx#46B482
punctuation.definition.parameters.end.js#D66D6D
punctuation.definition.parameters.end.jsx#D66D6D
punctuation.definition.parameters.end.ts#D66D6D
punctuation.definition.parameters.end.tsx#9BD8BC
punctuation.definition.parameters.end.js#D66D6D
punctuation.definition.parameters.end.jsx#D66D6D
punctuation.definition.parameters.end.ts#60C195
punctuation.definition.parameters.end.tsx#9BD8BC
markup.quote#8CD2B2
meta.tag.js#52BC8C
meta.tag.jsx#D66D6D
meta.tag.ts#D66D6D
meta.tag.tsx#D66D6D
meta.parameters.js#D66D6D
meta.parameters.jsx#D66D6D
meta.parameters.ts#D66D6D
meta.parameters.tsx#D66D6D
meta.brace.square.js#7ECDA9
meta.brace.square.jsx#60C195
meta.brace.square.ts#46B482
meta.brace.square.tsx#60C195
variable.other.class.js#D66D6D
variable.other.class.jsx#60C195
variable.other.class.ts#7ECDA9
variable.other.class.tsx#8CD2B2
constant.other.object.key.js#60C195
constant.other.object.key.jsx#60C195
constant.other.object.key.ts#D66D6D
constant.other.object.key.tsx#60C195
entity.name.function.method#D66D6D
string.template#D66D6D
support.type.property-name.json#60C195
variable.other.property.js#D66D6D
variable.other.property.jsx#7ECDA9
variable.other.property.ts#D66D6D
variable.other.property.tsx#60C195
token.info-token#4E6998
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

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

Loading...

Neptunium Themes - Coding Theme