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
keyword.control.return#7788AA
keyword.control.exception, keyword.control.throw, keyword.control.try, keyword.control.catch, keyword.control.finally#7788AA
support.function.builtin, support.type.builtin, variable.language#7788AA
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#abab77
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#aaaaaa
support.type#aaaaaa
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#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#cccccc
text.html.markdown markup.inline.raw.markdown#abab77
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#abab77
markup.raw.block.fenced.markdown#cccccc
punctuation.definition.fenced.markdown#7788AA
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