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#181926
  • activityBar.foreground#89b4fa
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#89b4fa
  • activityBarBadge.foreground#1E2030
  • badge.background#8AADF4
  • badge.foreground#1E2030
  • dropdown.background#1E2030
  • dropdown.border#1E2030
  • editor.background#24273A
  • editor.foreground#CAD3F5
  • editor.selectionBackground#5B6078
  • editor.selectionHighlightBackground#5B607866
  • editor.wordHighlightBackground#5B607833
  • editor.wordHighlightStrongBackground#5B607855
  • editorBracketMatch.background#363A4F
  • editorBracketMatch.border#A5ADCB
  • editorGroup.border#1E2030
  • editorGroupHeader.tabsBackground#181926
  • editorGutter.background#24273A
  • editorIndentGuide.activeBackground1#6E738D
  • editorIndentGuide.background1#3B3F51
  • editorLineNumber.activeForeground#A5ADCB
  • editorLineNumber.foreground#6E738D
  • editorWhitespace.foreground#3B3F51
  • input.background#1E2030
  • input.border#1E2030
  • input.foreground#CAD3F5
  • list.activeSelectionBackground#363A4F
  • list.activeSelectionForeground#CAD3F5
  • list.highlightForeground#8AADF4
  • list.hoverBackground#2A2E3F
  • list.inactiveSelectionBackground#2A2E3F
  • list.inactiveSelectionForeground#CAD3F5
  • scrollbarSlider.activeBackground#A5ADCB66
  • scrollbarSlider.background#A5ADCB33
  • scrollbarSlider.hoverBackground#A5ADCB44
  • sideBar.background#1E2030
  • sideBar.border#1E2030
  • sideBar.foreground#CAD3F5
  • sideBarSectionHeader.background#1E2030
  • sideBarSectionHeader.foreground#CAD3F5
  • sideBarTitle.foreground#89b4fa
  • statusBar.background#181926
  • statusBar.border#181926
  • statusBar.foreground#CAD3F5
  • statusBarItem.remoteBackground#89b4fa
  • tab.activeBackground#24273A
  • tab.activeForeground#89b4fa
  • tab.border#1E2030
  • tab.inactiveBackground#1E2030
  • tab.inactiveForeground#CAD3F5
  • titleBar.activeBackground#181926
  • titleBar.activeForeground#CAD3F5
  • titleBar.inactiveBackground#181926
  • titleBar.inactiveForeground#a5adcbb0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#abb2bf
comment#5c6370italic
html.doctype#5c6370italic
string#98c379
string.embedded.begin, string.embedded.end#e06c75
string.embedded#56b6c2
constant.numeric#d19a66
constant.language#d19a66
constant.character, constant.other#d19a66
variable.language#c678dd
variable.readwrite, variable.block, variable.support#e06c75
variable.readwrite.var-single-variable.js#d19a66
variable.readwrite.js#abb2bf
keyword, keyword.operator.logical, keyword.operator.constructor, keyword.operator.new#c678dd
keyword.operator#61afef
storage#c678dd
storage.type.function#c678dd
entity.name.class, entity.name.module, entity.name.type#e5c07b
entity.other.inherited-class#98c379
entity.name.tag#e06c75
entity.other.attribute-name#d19a66
entity.name.function#61afef
variable.parameter#e06c75italic
entity.name.function-call#abb2bf
function.support.builtin, function.support.core#56b6c2
support.function#56b6c2
support.constant#e5c07b
support.class#e5c07b
support.type#e06c75
support.dictionary.json#e06c75
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#abb2bf
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#56b6c2
variable.css, variable.scss, variable.less, variable.sass#e06c75
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#98c379
unit.css, unit.scss, unit.less, unit.sass#d19a66
function.css, function.scss, function.less, function.sass#56b6c2
variable.other.property, variable.other.object, variable.other.block#e06c75
jade.import.variable, pug.import.variable#e06c75
invalid#F8F8F0
invalid.deprecated#F8F8F0
structure.dictionary.property-name.json#e06c75
string.detected-link#c678dd
meta.diff, meta.diff.header#75715E
markup.deleted#c678dd
markup.inserted#e5c07b
markup.changed#98c379
constant.numeric.line-number.find-in-files - match#56b6c2A0
entity.name.filename.find-in-files#98c379