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#B8D0E8
  • activityBar.foreground#1A5A7A
  • activityBar.inactiveForeground#7AA8C8
  • activityBarBadge.background#1A8A6A
  • activityBarBadge.foreground#F0F7FA
  • badge.background#1A8A6A
  • badge.foreground#F0F7FA
  • button.background#1A8A6A
  • button.foreground#F0F7FA
  • button.hoverBackground#1A7A8A
  • dropdown.background#E0EFF7
  • dropdown.border#A8C8D8
  • dropdown.foreground#1A2535
  • editor.background#F0F7FA
  • editor.foreground#1A2535
  • editor.inactiveSelectionBackground#1A8A6A1A
  • editor.lineHighlightBackground#E0EFF5
  • editor.selectionBackground#1A8A6A33
  • editorCursor.foreground#1A8A6A
  • editorError.foreground#CC1111
  • editorGroupHeader.tabsBackground#E0EFF7
  • editorInfo.foreground#1A7A8A
  • editorLineNumber.activeForeground#1A7A8A
  • editorLineNumber.foreground#A8C8D8
  • editorWarning.foreground#8B6914
  • editorWhitespace.foreground#D0E8F0
  • focusBorder#1A8A6A
  • input.background#E0EFF7
  • input.border#A8C8D8
  • input.foreground#1A2535
  • input.placeholderForeground#8AAABB
  • list.activeSelectionBackground#C0D8EB
  • list.activeSelectionForeground#1A5A7A
  • list.hoverBackground#E0EFF5
  • list.hoverForeground#1A2535
  • list.inactiveSelectionBackground#D4E8F5
  • notifications.background#E0EFF7
  • notifications.border#A8C8D8
  • notifications.foreground#1A2535
  • panel.background#D4E8F5
  • panel.border#A8C8D8
  • panelTitle.activeBorder#1A8A6A
  • panelTitle.activeForeground#1A8A6A
  • panelTitle.inactiveForeground#7AA8C8
  • progressBar.background#1A8A6A
  • scrollbarSlider.activeBackground#1A8A6A55
  • scrollbarSlider.background#A8C8D877
  • scrollbarSlider.hoverBackground#1A8A6A33
  • sideBar.background#D4E8F5
  • sideBar.foreground#1A2535
  • sideBarSectionHeader.background#C0D8EB
  • sideBarSectionHeader.foreground#1A7A8A
  • sideBarTitle.foreground#1A8A6A
  • statusBar.background#C0D8EB
  • statusBar.foreground#1A5A7A
  • statusBarItem.hoverBackground#A8C8D8
  • tab.activeBackground#F0F7FA
  • tab.activeBorderTop#1A8A6A
  • tab.activeForeground#1A8A6A
  • tab.border#D0E8F5
  • tab.inactiveBackground#E0EFF7
  • tab.inactiveForeground#7AA8C8
  • terminal.ansiBlue#2A5A9A
  • terminal.ansiCyan#1A7A8A
  • terminal.ansiGreen#1A8A6A
  • terminal.ansiMagenta#8B3060
  • terminal.ansiRed#CC1111
  • terminal.ansiYellow#8B6914
  • terminal.background#F0F7FA
  • terminal.foreground#1A2535
  • titleBar.activeBackground#B8D0E8
  • titleBar.activeForeground#1A2535
  • titleBar.inactiveBackground#B8D0E8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8AAABBitalic
variable, string constant.other.placeholder#1A2535
invalid, invalid.illegal#CC1111
markup.deleted, invalid.broken#CC1111
keyword, storage.type, storage.modifier#1A8A6Abold
keyword.control, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template#5A8A9A
entity.name.tag, meta.tag.sgml#1A8A6A
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#1A7A8A
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit#2A5A9Aitalic
variable.parameter#4A7A9Aitalic
string, constant.other.symbol, constant.other.key#8B3060
entity.other.inherited-class, markup.heading#5A3090
entity.name, support.type, support.class, support.other.namespace.php#5A3090bold
support.type#6A4A9A
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name#1A7A8A
entity.other.attribute-name#2A5A9A
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#2A5A9Aitalic
variable.language#1A8A6Aitalic
string.regexp#1A7A8A
constant.character.escape#1A8A6A
*url*, *link*, *uri*underline
markup.inserted#1A8A6A
markup.changed#2A5A9A
source.json meta.structure.dictionary.json support.type.property-name.json#1A8A6A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1A7A8A
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#5A3090
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#8B3060
markup.heading, markup.heading entity.name#1A8A6Abold
markup.italic#8B3060italic
markup.bold, markup.bold string#2A5A9Abold
markup.underline#5A3090underline
markup.table#1A2535