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#000000
  • activityBar.border#1a1a1a
  • activityBar.foreground#bcbec4
  • activityBar.inactiveForeground#4a4a4a
  • activityBarBadge.background#cc7832
  • activityBarBadge.foreground#000000
  • badge.background#cc7832
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#bcbec4
  • breadcrumb.foreground#7a7a7a
  • button.background#cc7832
  • button.foreground#000000
  • button.hoverBackground#dba052
  • button.secondaryBackground#2a2a2a
  • button.secondaryForeground#bcbec4
  • button.secondaryHoverBackground#3d3d3d
  • checkbox.background#0a0a0a
  • checkbox.border#2a2a2a
  • checkbox.foreground#bcbec4
  • contrastActiveBorder#cc7832
  • contrastBorder#1a1a1a
  • diffEditor.insertedTextBackground#3d604222
  • diffEditor.removedTextBackground#7a3a3a22
  • dropdown.background#0a0a0a
  • dropdown.border#2a2a2a
  • dropdown.foreground#bcbec4
  • dropdown.listBackground#0a0a0a
  • editor.background#000000
  • editor.findMatchBackground#5a4625
  • editor.findMatchHighlightBackground#3d2f1a
  • editor.foreground#bcbec4
  • editor.lineHighlightBackground#0e0e0e
  • editor.lineHighlightBorder#0e0e0e
  • editor.selectionBackground#2e436e
  • editor.selectionHighlightBackground#1c2a45
  • editor.wordHighlightBackground#1f1f1f
  • editorBracketHighlight.foreground1#bcbec4
  • editorBracketHighlight.foreground2#cc7832
  • editorBracketHighlight.foreground3#6a8759
  • editorBracketHighlight.foreground4#9876aa
  • editorBracketMatch.background#3d3d3d
  • editorBracketMatch.border#5a5a5a
  • editorCursor.background#000000
  • editorCursor.foreground#bcbec4
  • editorGroup.border#1a1a1a
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#1a1a1a
  • editorGutter.addedBackground#3d6042
  • editorGutter.background#000000
  • editorGutter.deletedBackground#7a3a3a
  • editorGutter.modifiedBackground#385570
  • editorHoverWidget.background#0a0a0a
  • editorHoverWidget.border#2a2a2a
  • editorHoverWidget.foreground#bcbec4
  • editorIndentGuide.activeBackground1#3a3a3a
  • editorIndentGuide.background1#1a1a1a
  • editorLineNumber.activeForeground#a4a4a4
  • editorLineNumber.foreground#3a3a3a
  • editorLink.activeForeground#cc7832
  • editorOverviewRuler.addedForeground#3d6042
  • editorOverviewRuler.border#1a1a1a
  • editorOverviewRuler.deletedForeground#7a3a3a
  • editorOverviewRuler.modifiedForeground#385570
  • editorRuler.foreground#1a1a1a
  • editorSuggestWidget.background#0a0a0a
  • editorSuggestWidget.border#2a2a2a
  • editorSuggestWidget.foreground#bcbec4
  • editorSuggestWidget.highlightForeground#cc7832
  • editorSuggestWidget.selectedBackground#2e2e2e
  • editorWhitespace.foreground#2a2a2a
  • editorWidget.background#0a0a0a
  • editorWidget.border#2a2a2a
  • editorWidget.foreground#bcbec4
  • focusBorder#3d3d3d
  • gitDecoration.addedResourceForeground#6a8759
  • gitDecoration.conflictingResourceForeground#cc6666
  • gitDecoration.deletedResourceForeground#cc6666
  • gitDecoration.ignoredResourceForeground#5a5a5a
  • gitDecoration.modifiedResourceForeground#6897bb
  • gitDecoration.untrackedResourceForeground#cc7832
  • input.background#0a0a0a
  • input.border#2a2a2a
  • input.foreground#bcbec4
  • input.placeholderForeground#5a5a5a
  • inputOption.activeBackground#cc783233
  • inputOption.activeBorder#cc7832
  • inputValidation.errorBackground#3d1a1a
  • inputValidation.errorBorder#cc6666
  • inputValidation.infoBackground#1a2a3d
  • inputValidation.infoBorder#6897bb
  • inputValidation.warningBackground#3d2f1a
  • inputValidation.warningBorder#cc7832
  • list.activeSelectionBackground#2e2e2e
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#2e2e2e
  • list.focusForeground#ffffff
  • list.hoverBackground#161616
  • list.inactiveSelectionBackground#1f1f1f
  • list.inactiveSelectionForeground#bcbec4
  • menu.background#0a0a0a
  • menu.border#1a1a1a
  • menu.foreground#bcbec4
  • menu.selectionBackground#2e2e2e
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#1a1a1a
  • menubar.selectionBackground#1f1f1f
  • menubar.selectionForeground#ffffff
  • merge.currentContentBackground#3855704d
  • merge.currentHeaderBackground#385570aa
  • merge.incomingContentBackground#3d60424d
  • merge.incomingHeaderBackground#3d6042aa
  • minimap.background#000000
  • minimapSlider.activeBackground#5a5a5aaa
  • minimapSlider.background#2a2a2a44
  • minimapSlider.hoverBackground#3d3d3d77
  • notificationCenter.border#2a2a2a
  • notificationLink.foreground#cc7832
  • notifications.background#0a0a0a
  • notifications.border#2a2a2a
  • notifications.foreground#bcbec4
  • panel.background#000000
  • panel.border#1a1a1a
  • panelTitle.activeBorder#cc7832
  • panelTitle.activeForeground#bcbec4
  • panelTitle.inactiveForeground#7a7a7a
  • peekView.border#cc7832
  • peekViewEditor.background#0a0a0a
  • peekViewResult.background#0a0a0a
  • peekViewTitle.background#0a0a0a
  • peekViewTitleDescription.foreground#7a7a7a
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#1a1a1a
  • pickerGroup.foreground#cc7832
  • progressBar.background#cc7832
  • quickInput.background#0a0a0a
  • quickInput.foreground#bcbec4
  • quickInputList.focusBackground#2e2e2e
  • quickInputList.focusForeground#ffffff
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#5a5a5acc
  • scrollbarSlider.background#2a2a2a88
  • scrollbarSlider.hoverBackground#3d3d3daa
  • settings.headerForeground#bcbec4
  • settings.modifiedItemIndicator#cc7832
  • sideBar.background#000000
  • sideBar.border#1a1a1a
  • sideBar.foreground#bcbec4
  • sideBarSectionHeader.background#0a0a0a
  • sideBarSectionHeader.border#1a1a1a
  • sideBarSectionHeader.foreground#bcbec4
  • sideBarTitle.foreground#bcbec4
  • statusBar.background#000000
  • statusBar.border#1a1a1a
  • statusBar.debuggingBackground#3d2a14
  • statusBar.debuggingForeground#cc7832
  • statusBar.foreground#bcbec4
  • statusBar.noFolderBackground#000000
  • tab.activeBackground#000000
  • tab.activeBorder#cc7832
  • tab.activeBorderTop#cc7832
  • tab.activeForeground#ffffff
  • tab.border#1a1a1a
  • tab.hoverBackground#0e0e0e
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#7a7a7a
  • tab.unfocusedActiveBorder#cc783288
  • tab.unfocusedActiveBorderTop#cc783288
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#6897bb
  • terminal.ansiBrightBlack#5a5a5a
  • terminal.ansiBrightBlue#85adcc
  • terminal.ansiBrightCyan#80b070
  • terminal.ansiBrightGreen#85a374
  • terminal.ansiBrightMagenta#b598c8
  • terminal.ansiBrightRed#dd8888
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#dba052
  • terminal.ansiCyan#629755
  • terminal.ansiGreen#6a8759
  • terminal.ansiMagenta#9876aa
  • terminal.ansiRed#cc6666
  • terminal.ansiWhite#bcbec4
  • terminal.ansiYellow#cc7832
  • terminal.background#000000
  • terminal.foreground#bcbec4
  • textLink.activeForeground#85adcc
  • textLink.foreground#6897bb
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#bcbec4
  • titleBar.border#1a1a1a
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#5a5a5a
  • widget.shadow#000000cc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a7e85italic
variable, string constant.other.placeholder#bcbec4
constant.other.color#ffffff
invalid, invalid.illegal#cc6666
keyword, storage.type, storage.modifier#cc7832
keyword.control, 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#cc7832
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#e8bf6a
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#ffc66d
meta.block variable.other#bcbec4
support.other.variable, string.other.link#9876aa
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#6897bb
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#6a8759
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#a9b7c6
support.type#a9b7c6
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#a9b7c6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#cc7832
variable.language#cc7832italic
entity.name.method.js#ffc66d
meta.class-method.js entity.name.function.js, variable.function.constructor#ffc66d
entity.other.attribute-name#bababa
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#bababa
entity.other.attribute-name.class#ffc66d
source.sass keyword.control#ffc66d
markup.inserted#6a8759
markup.deleted#cc6666
markup.changed#6897bb
string.regexp#646695
constant.character.escape#cc7832
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#bbb529
storage.type.annotation, punctuation.definition.annotation, meta.declaration.annotation#bbb529
source.js constant.other.object.key.js string.unquoted.label.js#cc7832
source.json meta.structure.dictionary.json support.type.property-name.json#9876aa
text.html.markdown, punctuation.definition.list_item.markdown#bcbec4
text.html.markdown markup.inline.raw.markdown#cc7832
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#5a5a5a
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ffc66dbold
markup.italic#bcbec4italic
markup.bold, markup.bold string#bcbec4bold
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#bcbec4bold italic
markup.underline#6897bbunderline
markup.quote punctuation.definition.blockquote.markdown#5a5a5a
markup.quote#7a7a7aitalic
string.other.link.title.markdown#6897bb
string.other.link.description.title.markdown#6a8759
constant.other.reference.link.markdown#9876aa
markup.raw.block#6a8759
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#bcbec4
variable.language.fenced.markdown#7a7a7a
meta.separator#5a5a5abold
markup.table#bcbec4