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—
Neptunium Themes by Neptunium - VS Code Theme