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#7a7a7a
  • 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#7a7a7a
constant.other.color#7a7a7a
invalid, invalid.illegal#D70000
keyword, storage.type, storage.modifier#555555
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#708090
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
meta.block variable.other#7a7a7a
support.other.variable, string.other.link#7a7a7a
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#555555
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#aa6666
constant.character.escape, string.regexp#7788AA
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#555555
support.type#555555
support.function.builtin, support.type.builtin, variable.language#444444
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#7a7a7a
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#555555
variable.language#D70000italic
entity.name.method.js#555555
meta.class-method.js entity.name.function.js, variable.function.constructor#555555
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#7a7a7a
source.sass keyword.control#7a7a7a
markup.inserted#789978
markup.deleted#ffaa88
markup.changed#7a7a7a
string.regexp#7788AA
constant.character.escape#7788AA
*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#7a7a7a
text.html.markdown markup.inline.raw.markdown#aa6666
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#7788AA
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#aa6666
markup.raw.block.fenced.markdown#7a7a7a
punctuation.definition.fenced.markdown#7788AA
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#7a7a7a
variable.language.fenced.markdown#7a7a7a
meta.separator#7a7a7abold
markup.table#7a7a7a