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#fcfcfc
  • activityBar.border#efefef
  • activityBar.foreground#2e3986
  • activityBarBadge.background#f3f3f3
  • activityBarBadge.foreground#aaaaaa
  • badge.background#bfc8e6
  • button.background#bbbbbb
  • button.foreground#ffffff
  • button.hoverBackground#bbbbbb
  • editor.background#fcfcfc
  • editor.foreground#495057
  • editor.inactiveSelectionBackground#bfc8e6
  • editor.lineHighlightBackground#1073cf2d
  • editor.lineHighlightBorder#9fced11f
  • editor.selectionBackground#d5ddf7
  • editor.selectionHighlightBackground#d8def3
  • editorBracketMatch.background#d9e6ff
  • editorBracketMatch.border#6b9fff
  • editorError.foreground#ff5d9b
  • editorGroup.border#dfdede
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#dfdede
  • editorGutter.background#fcfcfc
  • editorHoverWidget.background#e0e0e0
  • editorHoverWidget.border#bababa
  • editorHoverWidget.foreground#666666
  • editorIndentGuide.activeBackground1#6e80f7
  • editorIndentGuide.background1#d5d8ec
  • editorLineNumber.activeForeground#5c65a0
  • editorLineNumber.foreground#d5d8ec
  • editorOverviewRuler.bracketMatchForeground#4437ff
  • editorSuggestWidget.background#e0e0e0
  • editorSuggestWidget.border#bababa
  • editorSuggestWidget.foreground#666666
  • editorWarning.foreground#ffd858
  • focusBorder#00000000
  • foreground#787c7f
  • gitDecoration.untrackedResourceForeground#4159dd
  • list.activeSelectionBackground#dccedc
  • list.activeSelectionForeground#495057
  • list.errorForeground#c45858
  • list.warningForeground#93769c
  • minimap.background#f7f5f3
  • minimapGutter.addedBackground#d9e6ffbd
  • minimapSlider.activeBackground#d9e6ffbd
  • minimapSlider.background#d9e6ff7c
  • panel.background#efefef
  • panel.border#efefef
  • panelTitle.activeBorder#313131
  • panelTitle.activeForeground#313131
  • panelTitle.inactiveForeground#6d6d6d
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#ced4da90
  • scrollbarSlider.background#e9ecef90
  • scrollbarSlider.hoverBackground#e9ecef81
  • sideBar.background#fcfcfc
  • sideBar.border#efefef
  • sideBarSectionHeader.background#fcfcfc
  • sideBarSectionHeader.border#dfdede
  • sideBarSectionHeader.foreground#868bac
  • sideBarTitle.foreground#666666aa
  • statusBar.background#fcfcfc
  • statusBar.border#ebe8e5
  • statusBar.foreground#666666
  • statusBar.noFolderBackground#ffffffaa
  • statusBarItem.hoverBackground#f0f0f0aa
  • tab.activeBackground#f1f1f3
  • tab.activeForeground#495057da
  • tab.border#efefef
  • tab.inactiveBackground#fcfcfc
  • tab.inactiveForeground#00000045
  • terminal.foreground#494949
  • titleBar.activeBackground#fcfcfc
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
comment, punctuation.definition.comment#BBBBBB
string#81895D
constant.numeric#5F8C7D
constant.language#5F8C7D
variable.language#5F8C7D
constant.character, constant.other#5F8C7D
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, support.type.vendored.property-name, support.type.property-name#5F8C7D
meta.structure.dictionary.key.python, support.type.property-name.json#5F8C7D
variable, meta.definition.variable.name, support.variable, variable.parameter#343A40
variable.css, variable.scss, variable.other.less#343A40
meta.object-literal.key, meta.object-literal.key entity.name.function#343A40
keyword.control, keyword, keyword.operator.new#73809F
storage.type, storage.modifier, 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#9C739C
string.comment.buffered.block.jade, string.quoted.jade, string.interpolated.jade, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#9C739C
entity.name.tag#9C739C
entity.name.selector, meta.selector#9C739C
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#9C739C
constant.regexp, string.regexp#6B4C6B
entity.other.attribute-name#9C739C
support.function#957F5F
punctuation.definition.string, punctuation.definition, punctuation.definition.string.template, punctuation.section.embedded, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array, support.constant.handlebars, punctuation.definition.block.js, punctuation.definition.tag, punctuation.separator.comma.js, punctuation.separator, punctuation.terminator.statement.js, punctuation.accessor.js, punctuation.definition.group.regexp, punctuation.definition.group.capture.regexp, punctuation.terminator, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, punctuation.separator.parameter.js, punctuation.definition.typeparameters.begin.js, punctuation.definition.typeparameters.end.js punctuation.separator.key-value.js, punctuation.comma, punctuation.decorator, punctuation.separator, punctuation.separator.parameter, punctuation.separator.key-value, punctuation.definition.string.begin.js, punctuation.definition.section.case-statement.js, punctuation.destructuring, punctuation.destructuring.js, punctuation.section, punctuation.definition.section, punctuation.definition.string.end.js, punctuation.definition.tag.directive.js, punctuation.decorator.js, punctuation.decorator, punctuation.definition.entity.js, punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js, punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.definition.binding-pattern.array.js, punctuation.definition.binding-pattern.object.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php, meta.brace.round.js, meta.brace.square.js, meta.brace#957F5F
support.constant#5F8C7D
meta.return-type, support.type, support.class, meta.class, entity.name.class, entity.name.type, entity.name.type.class#957F5F
meta.return.type, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#957F5F
invalid#FFFFFF
invalid.deprecated#000000
keyword.other.unit#5F8C7D
entity.name.function, meta.require#8C5D7BE6
keyword.operator, keyword.operator.expression#73809F
storage.modifier.import.java, storage.modifier.package.java#73809F
string#666666
meta.embedded.assembly#666666
keyword - keyword.operator#3F619C
keyword.control#3F619C
storage#3F619C
storage.type#3F619C
constant.numeric#D37D7D
entity.name.type#05973D
entity.name.class#05973D
support.type#05973D
support.class#05973D
entity.name.function#A873B8
support.function#A873B8
variable#675AB1
entity.name.variable#675AB1
support.class#7254AAitalic underline
entity.other.attribute-name.jsx, support.constant.property-value.css#8C8BC5
entity.name.tag#7B9488
variable.other.property#964141
punctuation.definition.tag#3B7C51
invalid#E94B46
meta.brace.curly.js, meta.brace.curly, punctuation.definition, punctuation.section, meta.brace.square.js, punctuation.separator#697FA0
meta.brace.round.js, punctuation.section.function.scss#5167AD
punctuation.terminator.rule, punctuation.terminator.statement.js#EC9BDB
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
storage.type#6B79D6
keyword.control#293797italic
entity.name.type#DB92BAbold
punctuation.definition.tag, punctuation.section.embedded, meta.brace#DB92BA
storage.class, support.class.component.tsx, entity.name.type.class#5A6594bold
support.type.property-name.json#9C9CC5
variable.other.property#B958AC
entity.name.tag#8C68AA
nuuvo by jacksonhardy - VS Code Theme