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#1d2030
  • activityBar.border#272a3f60
  • activityBar.foreground#95a8ea
  • activityBarBadge.background#567adc
  • activityBarBadge.foreground#ffffff
  • badge.background#567adc
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#4d85ff
  • breadcrumb.background#272a3f
  • breadcrumb.focusForeground#a9baef
  • breadcrumb.foreground#6c77ac
  • breadcrumbPicker.background#1d2030
  • button.background#567adc
  • button.hoverBackground#4db2ffcc
  • contrastBorder#1d1d2f
  • debugToolBar.background#1d2030
  • diffEditor.insertedTextBackground#b2e16b15
  • diffEditor.removedTextBackground#ff335520
  • dropdown.background#1d202f
  • dropdown.border#00000066
  • dropdown.foreground#a9baef
  • editor.background#272a3f
  • editor.findMatchBackground#393e60
  • editor.findMatchBorder#6ad9fb
  • editor.findMatchHighlightBackground#393e60
  • editor.foreground#a9baef
  • editor.lineHighlightBackground#1d202f
  • editor.selectionBackground#6c77ac50
  • editor.selectionHighlightBackground#393e60
  • editorBracketMatch.background#272a3f
  • editorBracketMatch.border#4d85ffbb
  • editorCodeLens.foreground#6c77ac
  • editorCursor.foreground#4d85ff
  • editorError.foreground#ff3355
  • editorGroup.border#1d1d2f
  • editorGroupHeader.tabsBackground#1d2030
  • editorGutter.addedBackground#b2e16b66
  • editorGutter.deletedBackground#ff3355aa
  • editorGutter.modifiedBackground#4d85ff66
  • editorHoverWidget.background#1b1d2c
  • editorHoverWidget.border#000000aa
  • editorIndentGuide.activeBackground#6c77acaa
  • editorIndentGuide.background#393e60bb
  • editorLineNumber.activeForeground#6c77ac
  • editorLineNumber.foreground#393e60
  • editorLink.activeForeground#a9baef
  • editorMarkerNavigation.background#a9baef05
  • editorOverviewRuler.addedForeground#b2e16b66
  • editorOverviewRuler.border#272a3f
  • editorOverviewRuler.bracketMatchForeground#567adcbb
  • editorOverviewRuler.deletedForeground#ff667866
  • editorOverviewRuler.errorForeground#ff4d58cc
  • editorOverviewRuler.findMatchForeground#6ad9fbbb
  • editorOverviewRuler.infoForeground#4db2ff66
  • editorOverviewRuler.modifiedForeground#4d85ff66
  • editorOverviewRuler.warningForeground#ffb54dcc
  • editorRuler.foreground#393e60bb
  • editorSuggestWidget.background#1d1d2f
  • editorSuggestWidget.border#00000033
  • editorSuggestWidget.foreground#869bdf
  • editorSuggestWidget.highlightForeground#6ad9fb
  • editorSuggestWidget.selectedBackground#1d202f
  • editorWarning.foreground#ffb54dcc
  • editorWhitespace.foreground#a9baef40
  • editorWidget.background#1d2030
  • editorWidget.resizeBorder#4d85ff
  • extensionButton.prominentBackground#567adc
  • extensionButton.prominentHoverBackground#4db2ffcc
  • focusBorder#4d85ff
  • foreground#a9baef
  • gitDecoration.conflictingResourceForeground#ffb54dcc
  • gitDecoration.deletedResourceForeground#ff3355dd
  • gitDecoration.ignoredResourceForeground#777fabaa
  • gitDecoration.modifiedResourceForeground#4d85ffee
  • gitDecoration.untrackedResourceForeground#77e0c6dd
  • gitlens.trailingLineForegroundColor#6c77acaa
  • input.background#1d1d2f
  • input.border#00000066
  • input.foreground#a9baef
  • input.placeholderForeground#a9baefaa
  • inputValidation.errorBackground#c53b53
  • inputValidation.errorBorder#ff335550
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#446bbb
  • inputValidation.infoBorder#4d85ff50
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#ad7c43
  • inputValidation.warningBorder#ffb54d50
  • inputValidation.warningForeground#ffffff
  • list.activeSelectionBackground#383e5c
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#000000
  • list.focusForeground#a9baef
  • list.highlightForeground#6ad9fb
  • list.hoverBackground#1d2030
  • list.hoverForeground#a9baef
  • list.inactiveSelectionBackground#292e46
  • list.inactiveSelectionForeground#a9baef
  • list.warningForeground#ffb54dcc
  • menu.background#1d2030
  • menu.foreground#a9baef
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#4d85ff
  • menu.separatorBackground#a9baef
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#4d85ff
  • minimap.findMatchHighlight#6ad9fbcc
  • minimap.selectionHighlight#6ad9fb33
  • minimapGutter.addedBackground#b2e16b66
  • minimapGutter.modifiedBackground#4d85ff66
  • notificationLink.foreground#4d85ff
  • notifications.background#1d1d2f
  • notifications.foreground#a9baef
  • panel.background#1d2030
  • panel.border#00000033
  • panel.dropBackground#a9baef
  • panelTitle.activeBorder#4d85ff
  • panelTitle.activeForeground#a9baef
  • panelTitle.inactiveForeground#6c77ac
  • peekView.border#00000030
  • peekViewEditor.background#a9baef05
  • peekViewEditor.matchHighlightBackground#6c77ac50
  • peekViewEditorGutter.background#a9baef05
  • peekViewResult.background#a9baef05
  • peekViewResult.matchHighlightBackground#6c77ac50
  • peekViewResult.selectionBackground#6c77ac70
  • peekViewTitle.background#a9baef05
  • peekViewTitleDescription.foreground#a9baef60
  • pickerGroup.foreground#4d85ff
  • progressBar.background#4d85ff
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#4d85ff
  • scrollbarSlider.background#6c77ac30
  • scrollbarSlider.hoverBackground#869bdf30
  • selection.background#a9baef
  • settings.checkboxBackground#000000
  • settings.checkboxBorder#00000066
  • settings.checkboxForeground#a9baef
  • settings.dropdownBackground#1d202f
  • settings.dropdownBorder#1d1d2f
  • settings.dropdownForeground#a9baef
  • settings.headerForeground#4d85ff
  • settings.modifiedItemIndicator#4d85ff
  • settings.numberInputBackground#1d1d2f
  • settings.numberInputBorder#00000066
  • settings.numberInputForeground#a9baef
  • settings.textInputBackground#1d1d2f
  • settings.textInputBorder#00000066
  • settings.textInputForeground#a9baef
  • sideBar.background#1d2030
  • sideBar.border#1d1d2f
  • sideBar.foreground#6c77ac
  • sideBarSectionHeader.background#1d2030
  • sideBarSectionHeader.border#272a3f60
  • sideBarTitle.foreground#a9baef
  • statusBar.background#1d2030
  • statusBar.border#1d1d2f
  • statusBar.debuggingBackground#baacff
  • statusBar.debuggingForeground#a9baef
  • statusBar.foreground#6c77ac
  • statusBar.noFolderBackground#272a3f
  • statusBarItem.hoverBackground#6c77ac20
  • tab.activeBackground#272a3f
  • tab.activeBorder#4d85ff
  • tab.activeForeground#a9baef
  • tab.activeModifiedBorder#6c77ac
  • tab.border#1d1d2f
  • tab.inactiveBackground#1d2030
  • tab.inactiveForeground#6c77ac
  • tab.unfocusedActiveBorder#6c77ac
  • tab.unfocusedActiveForeground#a9baef
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#4d85ff
  • terminal.ansiBrightBlack#6c77ac
  • terminal.ansiBrightBlue#4d85ff
  • terminal.ansiBrightCyan#6ad9fb
  • terminal.ansiBrightGreen#b2e16b
  • terminal.ansiBrightMagenta#fb84e1
  • terminal.ansiBrightRed#ff4d58
  • terminal.ansiBrightWhite#a9baef
  • terminal.ansiBrightYellow#ffb54d
  • terminal.ansiCyan#6ad9fb
  • terminal.ansiGreen#b2e16b
  • terminal.ansiMagenta#fb84e1
  • terminal.ansiRed#ff4d58
  • terminal.ansiWhite#a9baef
  • terminal.ansiYellow#ffb54d
  • terminal.foreground#a0abc5
  • terminal.selectionBackground#a9baef44
  • terminalCursor.foreground#4d85ff
  • textLink.activeForeground#b2dfff
  • textLink.foreground#4db2ff
  • titleBar.activeBackground#1d2030
  • titleBar.activeForeground#a9baef
  • titleBar.border#1d1d2f
  • titleBar.inactiveBackground#1d2030
  • titleBar.inactiveForeground#6c77ac
  • tree.indentGuidesStroke#6c77ac66
  • widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#5668c2
variable, support.variable, string constant.other.placeholder, text.html#a9baef
support.variable.dom, support.constant.math, support.type.object.module, support.variable.object.process, support.constant.json#ffb54d
constant.language.undefined, constant.language.null#565b76
constant.other.php#ffb54d
constant.other.color#ffffff
invalid, invalid.illegal#ff3355
invalid.deprecated#a166ff
keyword, storage.type, storage.modifier, keyword.other.important#a166ff
keyword.control, storage
punctuation.definition.template-expression, punctuation.section.embedded#6ad9fb
keyword.operator.spread, keyword.operator.rest#ff4d58bold
keyword.operator, keyword.control, punctuation, punctuation.definition.string, punctuation.support.type.property-name, text.html.vue-html meta.tag, punctuation.definition.keyword, punctuation.terminator.rule, punctuation.definition.entity, constant.other.color, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.block.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.property-list, meta.brace.square, keyword.other.template, keyword.other.substitution#6ad9fb
keyword.control
entity.name.tag, meta.tag, markup.deleted.git_gutter#ff4d58
entity.name.function, variable.function, keyword.other.special-method#4d85ff
support.function, meta.function-call entity.name.function#4db2ff
source.cpp meta.block variable.other#ff4d58
support.other.variable, string.other.link#ff4d58
variable.other.constant, constant.language, keyword.other.type.php, storage.type.php, support.constant, constant.character, constant.escape, keyword.other.unit#ff6678
constant.numeric, constant.language.boolean, constant.language.json, constant.language.infinity, constant.language.nan#ff7f4d
variable.parameter.function.language.special, variable.parameter, meta.function.parameter variable#fb84e1
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.attribute-selector#b2e16b
variable.other.object#ffb54d
meta.object-literal.key, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.field.declaration.ts variable.object.property, variable.object.property#30cfb2
meta.object.member, variable.other.object.property#869bdf
variable.other.property, support.variable.property, support.variable.property.dom#869bdf
source.haskell constant.other.haskell#ff6678
source.haskell meta.import.haskell entity.name.namespace#a9baef
source.haskell storage.type, source.c storage.type, source.java storage.type#ffb54d
storage.type.function#a166ff
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ffb54d
support.type#ff7f4d
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name.css, support.type.vendored.property-name#4d85ff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff4d58
variable.language#ff4d58
entity.name.method.js#4d85ff
meta.class-method.js entity.name.function.js, variable.function.constructor#4d85ff
entity.other.attribute-name#a166ff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffb54d
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype entity.other.attribute-name#a166ff
entity.other.attribute-name.class#ffb54d
source.sass keyword.control#4d85ff
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#30cfb2
support.constant.property-value#fb84e1
markup.inserted#b2e16b
markup.deleted#ff4d58
markup.changed#a166ff
string.regexp#89f5f4
punctuation.definition.group#ff4d58
constant.other.character-class.regexp, keyword.control.anchor.regexp#a166ff
constant.other.character-class.set.regexp#ffb54d
keyword.operator.quantifier.regexp#fb84e1
constant.character.escape#6ad9fb
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#4d85ff
keyword.other.unit#fb5050
source.js constant.other.object.key.js string.unquoted.label.js#ff4d58
source.json meta.structure.dictionary.json support.type.property-name.json#4d85ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4db2ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff4d58
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fb84e1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffb54d
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#30cfb2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4d85ff
punctuation.definition.list_item.markdown#6c77ac
meta.block, meta.brace, punctuation.definition.block, punctuation.definition.parameters, punctuation.section.function#95a8ea
meta.jsx.children, meta.embedded.block#95a8ea
text.html.markdown markup.inline.raw.markdown#a166ff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6ad9fb
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#6ad9fb
markup.italic#ff4d58italic
markup.bold, markup.bold string#ff4d58bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#ff4d58bold
markup.underline#ff7f4dunderline
markup.quote punctuation.definition.blockquote.markdown#6ad9fb
markup.quoteitalic
string.other.link.title.markdown#4d85ff
string.other.link.description.title.markdown#a166ff
constant.other.reference.link.markdown#ffb54d
markup.raw.block#a166ff
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#6ad9fb
variable.language.fenced.markdown#6ad9fb
meta.separator#6ad9fbbold
markup.table#6c77ac
token.info-token#4db2ff
token.warn-token#ffb54d
token.error-token#ff4d58
token.debug-token#a166ff