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#00000000
  • activityBar.activeBorder#00d7ff
  • activityBar.background#080808
  • activityBar.border#151515
  • activityBar.foreground#909090
  • activityBar.inactiveForeground#454545
  • activityBarBadge.background#7fbc52
  • activityBarBadge.foreground#080808
  • badge.background#7fbc52
  • badge.foreground#080808
  • breadcrumb.activeSelectionForeground#e0e1d6
  • breadcrumb.background#080808
  • breadcrumb.focusForeground#e0e1d6
  • breadcrumb.foreground#64717d
  • breadcrumbPicker.background#080808
  • button.background#00d7ff
  • button.border#00000000
  • button.foreground#080808
  • button.hoverBackground#66f6ff
  • descriptionForeground#8f9695
  • diffEditor.insertedTextBackground#7fbc5220
  • diffEditor.removedTextBackground#d1975820
  • dropdown.background#080808
  • dropdown.border#222222
  • dropdown.foreground#c6c6bd
  • editor.background#050505
  • editor.foreground#d8dacd
  • editor.inactiveSelectionBackground#11232a
  • editor.lineHighlightBackground#0b1311
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#143b45
  • editorCursor.foreground#00d7ff
  • editorError.foreground#d19758
  • editorGroup.border#151515
  • editorGroupHeader.tabsBackground#080808
  • editorGroupHeader.tabsBorder#151515
  • editorGutter.addedBackground#7fbc52
  • editorGutter.background#080808
  • editorGutter.deletedBackground#d19758
  • editorGutter.modifiedBackground#718ed1
  • editorHint.foreground#64717d
  • editorHoverWidget.background#050505
  • editorHoverWidget.border#222222
  • editorIndentGuide.activeBackground#303547
  • editorIndentGuide.background#151515
  • editorInfo.foreground#718ed1
  • editorLineNumber.activeForeground#00d7ff
  • editorLineNumber.foreground#30343d
  • editorOverviewRuler.border#151515
  • editorOverviewRuler.errorForeground#d19758
  • editorOverviewRuler.infoForeground#718ed1
  • editorOverviewRuler.warningForeground#d1ab54
  • editorRuler.foreground#1e222e
  • editorSuggestWidget.background#050505
  • editorSuggestWidget.border#222222
  • editorSuggestWidget.selectedBackground#0f1f25
  • editorWarning.foreground#d1ab54
  • editorWhitespace.foreground#151515
  • editorWidget.background#050505
  • editorWidget.border#222222
  • errorForeground#d19758
  • focusBorder#272727
  • foreground#d8dacd
  • gitDecoration.addedResourceForeground#7fbc52
  • gitDecoration.conflictingResourceForeground#d1ab54
  • gitDecoration.deletedResourceForeground#d19758
  • gitDecoration.ignoredResourceForeground#3d3d3d
  • gitDecoration.modifiedResourceForeground#718ed1
  • gitDecoration.untrackedResourceForeground#96cb5f
  • icon.foreground#8f9695
  • input.background#080808
  • input.border#222222
  • input.foreground#c6c6bd
  • input.placeholderForeground#3d3d3d
  • inputOption.activeBorder#00d7ff
  • inputValidation.errorBackground#080808
  • inputValidation.errorBorder#d19758
  • inputValidation.infoBackground#080808
  • inputValidation.infoBorder#718ed1
  • inputValidation.warningBackground#080808
  • inputValidation.warningBorder#d1ab54
  • list.activeSelectionBackground#143b45
  • list.activeSelectionForeground#e0e1d6
  • list.activeSelectionIconForeground#00d7ff
  • list.focusBackground#143b45
  • list.focusForeground#e0e1d6
  • list.focusOutline#00000000
  • list.highlightForeground#00d7ff
  • list.hoverBackground#0d1019
  • list.hoverForeground#c6c6bd
  • list.inactiveSelectionBackground#143b45
  • list.inactiveSelectionForeground#e0e1d6
  • notificationCenter.border#222222
  • notificationCenterHeader.background#080808
  • notificationCenterHeader.foreground#c6c6bd
  • notifications.background#080808
  • notifications.border#222222
  • notifications.foreground#c6c6bd
  • notificationToast.border#222222
  • panel.background#000000
  • panel.border#151515
  • panelTitle.activeBorder#00d7ff
  • panelTitle.activeForeground#e4e7dc
  • panelTitle.inactiveForeground#626f7a
  • problemsErrorIcon.foreground#d19758
  • problemsInfoIcon.foreground#718ed1
  • problemsWarningIcon.foreground#d1ab54
  • progressBar.background#00d7ff
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#45454580
  • scrollbarSlider.background#22222280
  • scrollbarSlider.hoverBackground#30303080
  • selection.background#143b45
  • sideBar.background#080808
  • sideBar.border#151515
  • sideBar.foreground#909090
  • sideBarSectionHeader.background#080808
  • sideBarSectionHeader.border#151515
  • sideBarSectionHeader.foreground#c6c6bd
  • sideBarTitle.foreground#c6c6bd
  • statusBar.background#080808
  • statusBar.border#151515
  • statusBar.debuggingBackground#d1ab54
  • statusBar.debuggingForeground#080808
  • statusBar.foreground#909090
  • statusBar.noFolderBackground#080808
  • statusBarItem.prominentBackground#101010
  • statusBarItem.prominentHoverBackground#151515
  • tab.activeBackground#181818
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00d7ff50
  • tab.activeForeground#e0e1d6
  • tab.border#151515
  • tab.inactiveBackground#090909
  • tab.inactiveForeground#71808e
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#151515
  • terminal.ansiBlue#718ed1
  • terminal.ansiBrightBlack#3d3d3d
  • terminal.ansiBrightBlue#89a3d1
  • terminal.ansiBrightCyan#54cad1
  • terminal.ansiBrightGreen#96cb5f
  • terminal.ansiBrightMagenta#d1bc7d
  • terminal.ansiBrightRed#d19d62
  • terminal.ansiBrightWhite#d1d1d1
  • terminal.ansiBrightYellow#d1b854
  • terminal.ansiCyan#00b0d1
  • terminal.ansiGreen#7fbc52
  • terminal.ansiMagenta#b19d5d
  • terminal.ansiRed#d19758
  • terminal.ansiWhite#c6c6bd
  • terminal.ansiYellow#d1ab54
  • terminal.background#000000
  • terminal.foreground#d8dacd
  • titleBar.activeBackground#090909
  • titleBar.activeForeground#a4a4a4
  • titleBar.border#151515
  • titleBar.inactiveBackground#090909
  • titleBar.inactiveForeground#454545

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#68746e99italic
variable, string constant.other.placeholder#b5bab1
constant.other.color#b49f60
invalid, invalid.illegal#b5865d
keyword, storage.type, storage.modifier#5086a6
keyword.control#5086a6
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#71858f
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#3a9bb0
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#1db1b1
meta.block variable.other#abb7b8
support.other.variable, string.other.link#869f7d
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#b5865d
variable.parameter, variable.parameter.function, meta.function.parameters variable, meta.parameters variable#8ca797
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#88a863
constant.other.key, constant.other.object.key, meta.object-literal.key, meta.object-literal.key string, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, source.js constant.other.object.key.js string.unquoted.label.js, source.ts constant.other.object.key.ts string.unquoted.label.ts, support.type.property-name.json#819ab5
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#6584af
support.type#5d809f
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#97a56a
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#b1b8b0
variable.language#4aa697italic
entity.name.method.js#2daebfitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#4eb8b5
entity.other.attribute-name#82a76b
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#82a76bitalic
entity.other.attribute-name.class#61a88f
source.sass keyword.control#a1945f
markup.inserted#7aa75a
markup.deleted#b5865d
markup.changed#699691
string.regexp#4aa697
constant.character.escape#b49f60
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#a1945fitalic
source.js constant.other.object.key.js string.unquoted.label.js#819ab5italic
source.json meta.structure.dictionary.json support.type.property-name.json#819ab5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#819ab5
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#819ab5
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#819ab5
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#819ab5
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#819ab5
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#819ab5
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#819ab5
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#819ab5
text.html.markdown, punctuation.definition.list_item.markdown#b5bab1
text.html.markdown markup.inline.raw.markdown#d6b056
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#63706999
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#3a9bb0
markup.italic#68746e99italic
markup.bold, markup.bold string#b49f60bold
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#68746e99bold
markup.underline#3a9bb0underline
markup.quote punctuation.definition.blockquote.markdown#68746e99
markup.quoteitalic
string.other.link.title.markdown#6ea5a0
string.other.link.description.title.markdown#3a9bb0
constant.other.reference.link.markdown#a1945f
markup.raw.block#b49f60
markup.raw.block.fenced.markdown#a7a9b0
punctuation.definition.fenced.markdown#667481
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#a7a9b0
variable.language.fenced.markdown#a1945f
meta.separator#667481bold
markup.table#b5bab1