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#191919
  • activityBar.border#444444
  • activityBar.foreground#aaaaaa
  • activityBarBadge.background#708090
  • activityBarBadge.foreground#000000
  • badge.background#708090
  • badge.foreground#000000
  • button.background#708090
  • button.foreground#000000
  • button.hoverBackground#555555
  • debugToolBar.background#2a2a2a
  • debugToolBar.border#444444
  • dropdown.background#2a2a2a
  • dropdown.border#444444
  • dropdown.foreground#cccccc
  • editor.background#191919
  • editor.findMatchBackground#708090
  • editor.findMatchHighlightBackground#cccccc
  • editor.findMatchHighlightBorder#708090
  • editor.foreground#cccccc
  • editor.lineHighlightBackground#2a2a2a
  • editor.selectionBackground#cccccc
  • editor.selectionForeground#000000
  • editor.wordHighlightBackground#555555
  • editor.wordHighlightStrongBackground#555555
  • editorCursor.foreground#cccccc
  • editorGroupHeader.tabsBackground#191919
  • editorHoverWidget.background#2a2a2a
  • editorHoverWidget.border#444444
  • editorIndentGuide.activeBackground#444444
  • editorIndentGuide.background#2a2a2a
  • editorLineNumber.activeForeground#aaaaaa
  • editorLineNumber.foreground#444444
  • editorSuggestWidget.background#2a2a2a
  • editorSuggestWidget.border#444444
  • editorSuggestWidget.foreground#7a7a7a
  • editorSuggestWidget.selectedBackground#555555
  • editorWhitespace.foreground#444444
  • editorWidget.background#2a2a2a
  • editorWidget.border#444444
  • extensionButton.prominentBackground#708090
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#555555
  • input.background#2a2a2a
  • input.border#444444
  • input.foreground#cccccc
  • inputOption.activeBorder#708090
  • list.activeSelectionBackground#708090
  • list.activeSelectionForeground#000000
  • list.focusBackground#555555
  • list.focusForeground#deeeed
  • list.hoverBackground#444444
  • list.hoverForeground#deeeed
  • list.inactiveSelectionBackground#444444
  • list.inactiveSelectionForeground#cccccc
  • menu.background#2a2a2a
  • menu.foreground#aaaaaa
  • menu.selectionBackground#708090
  • menu.selectionForeground#000000
  • menu.separatorBackground#444444
  • menubar.selectionBackground#444444
  • menubar.selectionForeground#cccccc
  • notificationCenterHeader.background#2a2a2a
  • notificationCenterHeader.foreground#aaaaaa
  • notifications.background#2a2a2a
  • notifications.border#444444
  • notifications.foreground#cccccc
  • notificationToast.border#444444
  • panel.background#191919
  • panel.border#444444
  • panelTitle.activeForeground#aaaaaa
  • panelTitle.inactiveForeground#444444
  • pickerGroup.border#444444
  • pickerGroup.foreground#708090
  • progressBar.background#708090
  • quickInput.background#2a2a2a
  • quickInput.foreground#cccccc
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#555555
  • scrollbarSlider.background#2a2a2a
  • scrollbarSlider.hoverBackground#444444
  • sideBar.background#191919
  • sideBar.border#444444
  • sideBar.foreground#7a7a7a
  • sideBarSectionHeader.background#2a2a2a
  • sideBarSectionHeader.foreground#aaaaaa
  • sideBarTitle.foreground#555555
  • statusBar.background#080808
  • statusBar.debuggingBackground#ffaa88
  • statusBar.foreground#aaaaaa
  • statusBar.noFolderBackground#080808
  • statusBarItem.hoverBackground#444444
  • tab.activeBackground#555555
  • tab.activeForeground#deeeed
  • tab.border#2a2a2a
  • tab.hoverBackground#2a2a2a
  • tab.hoverForeground#aaaaaa
  • tab.inactiveBackground#191919
  • tab.inactiveForeground#7a7a7a
  • tab.unfocusedActiveBackground#444444
  • tab.unfocusedActiveForeground#cccccc
  • tab.unfocusedInactiveBackground#191919
  • tab.unfocusedInactiveForeground#555555
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#7788AA
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#7788AA
  • terminal.ansiBrightCyan#deeeed
  • terminal.ansiBrightGreen#789978
  • terminal.ansiBrightMagenta#708090
  • terminal.ansiBrightRed#D70000
  • terminal.ansiBrightWhite#DDDDDD
  • terminal.ansiBrightYellow#abab77
  • terminal.ansiCyan#deeeed
  • terminal.ansiGreen#789978
  • terminal.ansiMagenta#708090
  • terminal.ansiRed#D70000
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#abab77
  • terminal.background#191919
  • terminal.foreground#cccccc
  • titleBar.activeBackground#191919
  • titleBar.activeForeground#aaaaaa
  • titleBar.inactiveBackground#080808
  • titleBar.inactiveForeground#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#444444italic
variable, string constant.other.placeholder#cccccc
constant.other.color#cccccc
invalid, invalid.illegal#D70000
keyword, storage.type, storage.modifier#708090
entity.name.type, support.type, storage.type.primitive, storage.type.built-in, storage.type.user-defined#789978
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#7a7a7a
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#555555
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#deeeed
meta.block variable.other#cccccc
support.other.variable, string.other.link#cccccc
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#aaaaaa
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#708090
entity.name, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#789978
support.type#789978
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#cccccc
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#7a7a7a
variable.language#D70000italic
entity.name.method.js#7a7a7a
meta.class-method.js entity.name.function.js, variable.function.constructor#7a7a7a
entity.other.attribute-name#444444
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#555555
entity.other.attribute-name.class#cccccc
source.sass keyword.control#7a7a7a
markup.inserted#789978
markup.deleted#ffaa88
markup.changed#7a7a7a
string.regexp#789978
constant.character.escape#789978
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7a7a7aitalic
source.js constant.other.object.key.js string.unquoted.label.js#D70000italic
source.json meta.structure.dictionary.json support.type.property-name.json#7a7a7a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#708090
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#ffaa88
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#D70000
text.html.markdown, punctuation.definition.list_item.markdown#cccccc
text.html.markdown markup.inline.raw.markdown#708090
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#789978
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#555555
markup.italic#444444italic
markup.bold, markup.bold string#444444bold
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#444444bold
markup.underline#ffaa88underline
markup.quote punctuation.definition.blockquote.markdown#7a7a7a
markup.quoteitalic
string.other.link.title.markdown#7a7a7a
string.other.link.description.title.markdown#7a7a7a
constant.other.reference.link.markdown#444444
markup.raw.block#708090
markup.raw.block.fenced.markdown#cccccc
punctuation.definition.fenced.markdown#789978
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#cccccc
variable.language.fenced.markdown#7a7a7a
meta.separator#7a7a7abold
markup.table#cccccc