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.background#080808
  • activityBar.border#302f2f
  • activityBarBadge.background#0288d1
  • button.background#1976d2
  • button.foreground#ffffff
  • button.hoverBackground#1e88e5
  • debugToolBar.background#0c0c0c
  • debugToolBar.border#080808
  • dropdown.background#080808
  • dropdown.border#302f2f
  • dropdown.foreground#d4d4d4
  • editor.background#080808
  • editor.foreground#f2f2f2
  • editor.lineHighlightBackground#ffffff15
  • editor.selectionBackground#303030
  • editorCodeLens.foreground#3f3e3e
  • editorCursor.foreground#ffffff
  • editorGroupHeader.tabsBackground#080808
  • editorGutter.background#080808
  • editorHint.border#ff0000
  • editorHoverWidget.background#161616
  • editorIndentGuide.activeBackground1#4b4a4a
  • editorIndentGuide.background1#2b2727
  • editorLineNumber.activeForeground#b4b3b3
  • editorLineNumber.foreground#3f3e3e
  • editorRuler.foreground#151719
  • editorSuggestWidget.background#101011
  • editorSuggestWidget.border#3f3e3e
  • editorSuggestWidget.foreground#fafafa
  • editorWhitespace.foreground#424242
  • focusBorder#595959
  • foreground#d4d4d4
  • input.background#0a0a0a
  • input.border#302f2f
  • inputOption.activeBorder#60bbf0a6
  • panel.background#080808
  • panel.border#302f2f
  • panelTitle.activeBorder#60bbf0a6
  • sideBar.background#080808
  • sideBar.border#302f2f
  • sideBar.foreground#d4d4d4
  • sideBarSectionHeader.background#111111
  • sideBarSectionHeader.border#302f2f
  • statusBar.background#080808
  • statusBar.border#302f2f
  • tab.activeBackground#080808
  • tab.activeBorderTop#2e8bc1
  • tab.border#302f2f
  • tab.hoverBackground#080808
  • tab.inactiveBackground#080808
  • tab.inactiveForeground#d4d4d4
  • tab.unfocusedActiveBorder#111111
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#42a5f5
  • terminal.ansiBrightBlack#807e7b
  • terminal.ansiBrightBlue#29b6f6
  • terminal.ansiBrightCyan#4dd0e1
  • terminal.ansiBrightGreen#8bc34a
  • terminal.ansiBrightMagenta#e1bee7
  • terminal.ansiBrightRed#e57373
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fff59d
  • terminal.ansiCyan#00bcd4
  • terminal.ansiGreen#9ccc65
  • terminal.ansiMagenta#ce93d8
  • terminal.ansiRed#f44336
  • terminal.ansiWhite#e0e0e0
  • terminal.ansiYellow#ffeb3b
  • terminal.background#080808
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#080808
  • titleBar.activeForeground#b4b3b3
  • titleBar.border#302f2f
  • widget.shadow#080808

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#888888
string#FFF59D
variable
keyword#F92672
storage#F92672
constant.numeric#F48FB1
constant.language#F48FB1
constant.character, constant.other#F48FB1
entity.name.class#9EE34Funderline
entity.other.inherited-class#9EE34Fitalic underline
entity.name.function#9EE34F
entity.name.tag#F92672
entity.other.attribute-name#9EE34F
support.function#81D4FA
support.constant#81D4FA
support.type, support.class#81D4FA
support.other.variable
support.other.namespace, entity.name.type.namespace#FFB2F9
string.template meta.template.expression#FFFFFF
invalid#F8F8F0
invalid.deprecated#F8F8F0
text source
meta.diff, meta.diff.header#E0EDDDbold
meta.diff, meta.diff.range#3BC0F0
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
support.function.misc.css, support.constant.property-value.css, support.constant.font-name.css, support.constant.vendored.property-value.css, support.type.property-name.media.css, meta.property-value.css, meta.selector.css entity.other.attribute-name.class.css punctuation.definition.entity.css#FFF59D
punctuation.definition.constant.css, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.percentage.css, keyword.other.unit.em.css#D66088
constant.numeric.css, constant.other.color.rgb-value.hex.css#978FFF
support.type.property-name.css, entity.other.attribute-name.css, meta.property-list.css meta.property-name.css#91EBC2
entity.name.tag.css, variable.css, entity.other.attribute-name.class.css, keyword.operator.pattern.css#FF93BC
variable.other.css, meta.function.misc.css variable.parameter.misc.css, meta.at-rule.header.css#EFEFEF
variable.css#CA99FF
punctuation.separator.key-value.css, keyword.control.at-rule.media.css, variable.parameter.misc.css, meta.function.misc.css punctuation.separator.list.comma.css, constant.numeric.css meta.property-list.css meta.property-value.css#F92672
support.function.misc.css, support.function.calc.css, support.function.shape.css, support.function.transform.css#9EE34F
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, punctuation.definition.entity.css entity.other.attribute-name.pseudo-element.css, punctuation.definition.entity.css entity.other.attribute-name.pseudo-class.css, meta.selector.css entity.other.attribute-name.pseudo-class.css, punctuation.definition.entity.css#93bcff
entity.other.keyframe-offset.css#93bcff
entity.other.attribute-name.id.css#f2f2f2
punctuation.colon.graphql, punctuation.graphql#F92672
variable.parameter.graphql#FFAB40
punctuation.comma.graphql, meta.selectionset.graphql variable.graphql, meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql, meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql#FAFAFA
meta.arguments.graphql variable.graphql#EA2AFF
meta.selectionset.graphql meta.selectionset.graphql variable.graphql, meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql#FBEB93
meta.selectionset.graphql support.type.graphql#9EE34F
entity.name.function.graphql#AC8DE7
keyword.operation.graphql#FF7DFB
support.type.builtin.graphql, support.type.graphql
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#BECAFF
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#FFF78C
punctuation.separator.key-value.html#FF93BC
entity.name.tag.html#FF93BC
entity.other.attribute-name.html#91EBC2
string.quoted.double.html#FFF78C
constant.language.boolean.true.html, constant.language.boolean.false.html#8970F8
storage.type.type.js, storage.modifier.js, storage.type.function.arrow.js, keyword.control.import.js, keyword.operator.logical.js, keyword.operator.expression.keyof.js, punctuation.separator.key-value.js, punctuation.accessor.js, punctuation.destructuring.js, punctuation.accessor.optional.js, punctuation.separator.comma.js, punctuation.separator.label.js, variable.language.super.js#F92672
entity.name.type.module.js, storage.type.js, storage.type.interface.js, storage.type.class.js, storage.type.function.js, storage.type.namespace.js, support.type.builtin.js, support.class.builtin.js, support.type.primitive.js, support.class.promise.js, variable.other.enummember.js, variable.other.object.js#8BD3FD
meta.namespace.declaration.js entity.name.type.module.js#f2f2f2
variable.language.this.js, variable.parameter.js, variable.other.readwrite.js meta.array.literal.js, variable.language.super.js#FFAB40
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js#26F9E7
string.quoted.single.js#F5EC70
entity.name.function.ts, support.function.dom.js#9EE34F
meta.object-literal.key.js#01DDECE3
meta.decorator.js punctuation.decorator.js, meta.decorator.js variable.other.readwrite.js#5bca6a
punctuation.definition.typeparameters.begin.js, punctuation.definition.typeparameters.end.js, storage.type.numeric.bigint.js#C7C7C7B4
constant.numeric.decimal.js#A96EE4
string.quoted.single.js, string.quoted.double.js, string.template.js#FBEB93
entity.name.label.js#F279FF
meta.type.tuple.js punctuation.separator.label.js#FFFFFF
punctuation.definition.string.begin.js, punctuation.definition.string.end.js, entity.other.inherited-class.jsbold
punctuation.terminator.statement.js#ffffff
punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc#66D8EFC9
punctuation.definition.optional-value.end.bracket.square.jsdoc#888888
variable.other.jsdoc#C7C4C4
storage.type.class.jsdoc#8BD3FD
variable.other.jsdoc#7894ad
variable.other.jsdoc source.embedded.ts#aa834c
entity.name.type.instance.jsdoc#C7C4C4
constant.other.email.link.underline.jsdoc#b26b7a
punctuation.definition.string.begin.json, punctuation.definition.string.end.json#81D4FA
constant.language.json#FF80F4
string.quoted.double.html punctuation.definition.tag.begin.liquid, string.quoted.double.html punctuation.definition.tag.end.liquid#B1B1B1
punctuation.separator.pipe.liquid#F92672
source.liquid string.quoted.single.html, source.liquid string.quoted.double.html#FFF9A6
support.function.filter.liquid#5CD7E0D5
entity.name.tag.liquid#F92672
constant.numeric.property-value.liquid#978FFF
constant.language.liquid#FF80F4
constant.numeric.property-value.liquid#978FFF
support.function.filter.liquid#5CD7E0D5
markup.heading.markdown, markup.heading.1.markdown, markup.heading.2.markdown#9EE34F
markup.fenced_code.block.markdown#FAFAFA
markup.bold.markdown#F8F8F2bold
markup.inline.raw.string.markdown#C7C4C4
markup.italic.markdown#F8F8F2italic
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.raw.markdown#F92672
markup.list.unnumbered.markdown, markup.list.numbered.markdown#F48FB1
markup.raw.block.markdown, markup.raw.inline.markdown#FFF59D
markup.quote.markdown, punctuation.definition.blockquote.markdown#6C71C4
meta.separator.markdown#FFAB40bold
meta.image.inline.markdown, markup.underline.link.markdown#8C8C8Citalic
string.other.link.title.markdown, string.other.link.description.markdown#9EE34F
punctuation.definition.link.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.metadata.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.constant.markdown, punctuation.separator.table.markdown#8C8C8C
markup.inline.raw.string.markdown, markup.list.unnumbered.markdown meta.paragraph.markdown, markup.list.numbered.markdown meta.paragraph.markdown#C7C4C4
markup.fenced_code.block.markdown#FAFAFA
markup.bold.markdown markup.italic.markdown#F8F8F2italic bold
markup.strikethrough.markdownstrikethrough
string.other.link.description.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown
punctuation.definition.table.markdown#0090a9
punctuation.definition.strikethrough.markdown, markup.fenced_code.block.markdown punctuation.definition.markdown#F92672
support.other.namespace.use-as.php#81D4FA
variable.language.namespace.php#D66990
punctuation.separator.inheritance.php#E91E63
meta.uri.from.redirects#93FD97
meta.uri.to.redirects#A793FD
markup.splat.redirects#888888
punctuation.definition.group.no-capture.regexp#F83EDF
punctuation.definition.group.regexp#6BFFF8
punctuation.definition.character-class.regexp#DB6767bold
constant.other.character-class.regexp#AE81FF
keyword.operator.quantifier.regexp#F83EDF
meta.assertion.look-behind.regexp, meta.assertion.look-ahead.regexp#3AF59E
support.function.misc.scss, support.constant.property-value.scss, support.constant.font-name.scss, support.constant.vendored.property-value.scss, support.type.property-name.media.scss, meta.property-value.scss, meta.selector.scss entity.other.attribute-name.class.scss punctuation.definition.entity.scss#FFF59D
punctuation.definition.constant.scss, keyword.other.unit.px.scss, keyword.other.unit.rem.scss, keyword.other.unit.percentage.scss, keyword.other.unit.em.scss#D66088
constant.numeric.scss, constant.other.color.rgb-value.hex.scss#978FFF
support.type.property-name.scss, entity.other.attribute-name.scss, meta.property-list.scss meta.property-name.scss#91EBC2
entity.name.tag.scss, variable.scss, entity.other.attribute-name.class.scss, keyword.operator.pattern.scss#FF93BC
variable.other.scss, meta.function.misc.scss variable.parameter.misc.scss, meta.at-rule.header.scss#EFEFEF
variable.scss#CA99FF
punctuation.separator.key-value.scss, keyword.control.at-rule.media.scss, variable.parameter.misc.scss, meta.function.misc.scss punctuation.separator.list.comma.scss, constant.numeric.scss meta.property-list.scss meta.property-value.scss#F92672
support.function.misc.scss, support.function.calc.scss, support.function.shape.scss, support.function.transform.scss#9EE34F
entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-class.scss, punctuation.definition.entity.scss entity.other.attribute-name.pseudo-element.scss, punctuation.definition.entity.scss entity.other.attribute-name.pseudo-class.scss, meta.selector.scss entity.other.attribute-name.pseudo-class.scss, punctuation.definition.entity.scss#93bcff
entity.other.keyframe-offset.scss#93bcff
entity.other.attribute-name.id.scss#f2f2f2
punctuation.definition.interpolation.begin.scss, punctuation.definition.interpolation.end.scss#26F9E7
keyword.operator.other.transclude.scss#BECAFFbold
support.class.spx.html#81D4FA
support.function.spx.html, keyword.control.class.html#FFFFFF
support.type.property-name.spx.html#FFFFFF
entity.name.function.spx.html#9EE34F
constant.numeric.decimal.spx.html#FB8943
punctuation.definition.array.table.toml, punctuation.definition.table.toml, punctuation.definition.array.toml, punctuation.definition.table.inline.toml, string.quoted.triple.literal.block.toml#FFAB40
variable.key.toml, punctuation.eq.toml#F92672
variable.key.table.toml, variable.key.array.table.toml, support.type.property-name.toml#8BD3FD
constant.numeric.integer.toml#A96EE4
meta.tag.template.value.twig, meta.tag.template.block.twig#CD5AC5
keyword.control.twig#E05D8C
variable.other.twig#E5A5E0
variable.other.property.twig#FFE1FC
constant.language.twig#FFD2A6
constant.numeric.twig#FFD0FB
support.function.twig#90E7F7
meta.function-call.other.twig#FAB85A
meta.function-call.twig#FAB85A
storage.type.type.ts, storage.modifier.ts, storage.type.function.arrow.ts, keyword.control.import.ts, keyword.operator.logical.ts, keyword.operator.expression.keyof.ts, punctuation.separator.key-value.ts, punctuation.accessor.ts, punctuation.destructuring.ts, punctuation.accessor.optional.ts, punctuation.separator.comma.ts, punctuation.separator.label.ts, variable.language.super.ts, punctuation.definition.string.template.begin.ts, punctuation.definition.string.template.end.ts#F92672
entity.name.type.module.ts, storage.type.ts, storage.type.interface.ts, storage.type.class.ts, storage.type.function.ts, storage.type.namespace.ts, support.type.builtin.ts, storage.type.enum.ts, support.class.builtin.ts, support.class.promise.ts, support.type.primitive.ts, variable.other.enummember.ts, variable.other.object.ts#8BD3FD
meta.namespace.declaration.ts entity.name.type.module.ts#f2f2f2
variable.language.this.ts, variable.parameter.ts, variable.other.readwrite.ts meta.array.literal.ts, variable.language.super.ts#FFAB40
punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts#26F9E7
string.quoted.single.ts#F5EC70
entity.name.function.ts, support.function.dom.ts#9EE34F
meta.object-literal.key.ts#01DDECE3
meta.decorator.ts punctuation.decorator.ts, meta.decorator.ts variable.other.readwrite.ts#5bca6a
punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts, storage.type.numeric.bigint.ts#C7C7C7B4
constant.numeric.decimal.ts#A96EE4
string.quoted.single.ts, string.quoted.double.ts, string.template.ts#FBEB93
entity.name.label.ts#F279FF
meta.type.tuple.ts punctuation.separator.label.ts#FFFFFF
punctuation.definition.string.begin.ts, punctuation.definition.string.end.ts, entity.other.inherited-class.tsbold
punctuation.terminator.statement.ts#ffffff
constant.language.boolean.true.ts, constant.language.boolean.false.ts#ff30ee
entity.name.tag.yaml#FF93BC
punctuation.separator.key-value.mapping.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.map.key.yaml#F92672
punctuation.separator.map.value.yaml, punctuation.separator.key-value.mapping.yaml#becaffb4
constant.numeric.float.yaml, constant.numeric.integer.decimal.yaml, constant.numeric.integer.yaml#A96EE4
constant.language.null.yaml#4290f8
string.quoted.double.yaml#FFF78C
string.unquoted.plain.out.yaml, string.quoted.single.yaml, punctuation.separator.key-value.mapping.yaml, punctuation.definition.block.sequence.item.yaml
entity.name.tag.yaml
variable.other.alias.yaml, punctuation.definition.alias.yaml, punctuation.definition.anchor.yaml, variable.other.anchor.yaml, punctuation.definition.tag.secondary.yaml, storage.type.tag.shorthand.yaml, storage.type.tag-handle.yaml, entity.name.type.anchor.yaml#9EE34F
constant.language.boolean.yaml#ff30ee
entity.other.document.begin.yaml, entity.other.document.end.yaml#FFAB40