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#3c3f41
  • activityBar.border#4b4b4b
  • activityBar.foreground#ffffff
  • activityBarBadge.background#cc7832
  • dropdown.background#3c3f41
  • dropdown.border#4b4b4b
  • dropdown.foreground#bababa
  • editor.background#333333
  • editor.foreground#a9b7c6
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#323232
  • editor.selectionHighlightBackground#415a41
  • editorIndentGuide.activeBackground1#606060
  • editorIndentGuide.background1#4b4b4b
  • editorLineNumber.activeForeground#999999
  • editorLineNumber.foreground#606366
  • input.background#3c3f41
  • input.border#4b4b4b
  • input.foreground#bababa
  • input.placeholderForeground#a6a6a6
  • list.dropBackground#373a3c
  • menu.background#3c3f41
  • menu.foreground#bababa
  • panel.background#3c3f41
  • panel.border#4b4b4b
  • panelTitle.activeBorder#bababa
  • panelTitle.activeForeground#bababa
  • panelTitle.inactiveForeground#888888
  • scrollbarSlider.activeBackground#707070
  • scrollbarSlider.background#505050
  • scrollbarSlider.hoverBackground#676767
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBar.background#3c3f41
  • sideBar.border#4b4b4b
  • sideBar.foreground#bababa
  • sideBarSectionHeader.foreground#bababa
  • sideBarTitle.foreground#bababa
  • statusBar.background#3c3f41
  • statusBar.border#4b4b4b
  • statusBar.foreground#bababa
  • tab.activeBackground#515658
  • tab.activeBorder#bababa
  • tab.activeForeground#bababa
  • tab.border#4b4b4b
  • tab.inactiveBackground#3c3e3f
  • tab.inactiveForeground#a1a1a1
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#5394ec
  • terminal.ansiBrightBlue#7eaef1
  • terminal.ansiBrightCyan#6cdada
  • terminal.ansiBrightGreen#a8c023
  • terminal.ansiBrightMagenta#ff99ff
  • terminal.ansiBrightRed#ff8785
  • terminal.ansiBrightYellow#ffff00
  • terminal.ansiCyan#299999
  • terminal.ansiGreen#a8c023
  • terminal.ansiMagenta#ae8abe
  • terminal.ansiRed#ff6b68
  • terminal.ansiWhite#1f1f1f
  • terminal.ansiYellow#d6bf55
  • terminal.background#2b2b2b
  • terminal.border#4b4b4b
  • widget.shadow#1a1a1aaa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#D4D4D4
emphasisitalic
strongbold
header#000080
comment#6A9955
constant.language#569cd6
constant.numeric#b5cea8
constant.regexp#646695
entity.name.tag#569cd6
entity.name.tag.css#d7ba7d
entity.other.attribute-name#9cdcfe
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#d7ba7d
invalid#f44747
markup.underlineunderline
markup.bold#569cd6bold
markup.heading#569cd6bold
markup.italicitalic
markup.inserted#b5cea8
markup.deleted#ce9178
markup.changed#569cd6
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#ce9178
punctuation.definition.tag#808080
meta.preprocessor#569cd6
meta.preprocessor.string#ce9178
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#9cdcfe
meta.diff.header#569cd6
storage#569cd6
storage.type#569cd6
storage.modifier#569cd6
string#ce9178
string.tag#ce9178
string.value#ce9178
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#569cd6
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9cdcfe
keyword#569cd6
keyword.control#569cd6
keyword.operator#d4d4d4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#569cd6
keyword.other.unit#b5cea8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569cd6
support.function.git-rebase#9cdcfe
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#569cd6
entity.name.function, support.function, support.constant.handlebars#DCDCAA
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#4EC9B0
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4EC9B0
keyword.control#C586C0
variable, meta.definition.variable.name, support.variable, entity.name.variable#9CDCFE
meta.object-literal.key#9CDCFE
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#CE9178
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#CE9178
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA
keyword.operator.quantifier.regexp#d7ba7d
constant.character#569cd6
constant.character.escape#d7ba7d
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string#6A8759bold
keyword - keyword.operator#CC7832
keyword.control#CC7832
storage#CC7832
storage.type#CC7832
constant.numeric#01adb8
entity.name.type#CC7832
entity.name.class#CC7832
support.type#CC7832
support.class#CC7832
entity.name.function#d68c2d
support.function#FFC66D
variable#d4d4d4
entity.name.variable#9876AA
comment, comment.block, comment.line#808080italic
punctuation.terminator.statement, punctuation.separator.comma, punctuation.separator.parameter, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.key-value.json.comments, punctuation.separator.dictionary.pair.json, punctuation.separator.dictionary.pair.json.comments, punctuation.separator.array.json, punctuation.separator.array.json.comments, constant.character.escape, keyword.control.anchor.regexp#CC7832
constant.language, keyword.control, keyword.operator.expression, keyword.operator.new, keyword.other.debugger, support.type, storage.type, storage.modifier, variable.language.super, variable.language.this#FFC66D
punctuation.definition.string, string.regexp, constant.other.character-class#6A8759
comment.block.documentation, entity.name.type.instance.jsdoc, variable.other.jsdoc#6A8759
storage.type.class.jsdoc#6A8759italic bold underline
punctuation.accessor, punctuation.separator.key-value, punctuation.definition.block, variable.other.readwrite, variable.other.constant, variable.parameter, variable.other.object, variable.language.arguments, support.variable, support.variable.object, support.class, keyword, keyword.operator.logical, keyword.operator.optional, keyword.operator.type.annotation, entity.name.type, entity.other.inherited-class, constant.language.import-export-all, storage.type.function.arrow, meta.function.expression, meta.object.member, meta.brace.round, meta.brace.square#A9B7C6
meta.function-call, meta.object.member, variable.other.property, variable.other.object.property, meta.object-literal.key, support.variable.property#d4d4d4
variable.other.constant.property, variable.other.constant.object.property#d4d4d4italic
support.type.property-name, support.type.property-name.json.comments, punctuation.support.type.property-name.end.json.comments, punctuation.support.type.property-name.begin.json.comments#9876AA
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, punctuation.definition.group.no-capture.regexp, punctuation.definition.group.assertion.regexp, constant.other.character-class.regexp#FFC66D
constant.regexp, keyword.operator.quantifier.regexp#6897BB
keyword.other.doctype.xml, entity.name.tag, support.class, punctuation.definition.tag#E8BF6A
variable.language.documentroot.xml, entity.other.attribute-name, support.variable.dom.js#BABABA
punctuation.section.embedded#a9b7c6
text.html.basic string#A5C261
constant.character.entity#6D9CBE
comment.line.number-sign.yaml#629755italic
entity.name.tag.yaml#CC7832
source.yaml keyword.control, source.yaml constant.language, source.yaml storage.modifier.chomping-indicator, string.unquoted.plain.out.yaml, constant.numeric.integer.yaml#A9B7C6
entity.name.type.anchor.yaml, variable.other.alias.yaml#E8BF6A
keyword.other.important, keyword.other.default#CC7832
entity.other.attribute-name.css, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.class.mixin.css, support.function.url.css, constant.other.unicode-range.css, support.constant.language-range.css, punctuation.definition.entity.css#E8BF6A
variable.parameter.url.css#287BDE
support.type.property-name.css, support.type.vendored.property-name#BABABA
entity.name.tag.css#CC7832
punctuation.terminator.rule.css#CC7832
keyword.other.unit.percentage.css, punctuation.section.function.end.bracket.round.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css#A9B7C6
support.constant.font-name.css, support.constant.color.w3c-standard-color-name.css, support.constant.property-value.css, keyword.other.unit.px.css, keyword.other.unit.em.css#A5C261
constant.other.color.rgb-value.hex.css#6897BB
punctuation.separator.list.comma.css#CC7832
variable.scss#6D9CBE
entity.name.section.markdown, punctuation.definition.heading#CC7832bold
markup.underline.link#6D9CBEitalic

Shiki preview

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

Loading...

Wolfram Language - Coding Theme