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#18191a
  • activityBar.border#00000000
  • activityBar.foreground#cfd8dc
  • activityBar.inactiveForeground#546e7a
  • editor.background#18191a
  • editor.foreground#eceff1
  • editor.lineHighlightBackground#212224
  • editor.selectionBackground#37474f
  • editorCursor.foreground#b0bec5
  • editorGroupHeader.tabsBackground#18191a
  • editorLineNumber.activeForeground#cfd8dc
  • editorLineNumber.foreground#546e7a
  • focusBorder#00000000
  • gitDecoration.conflictingResourceForeground#cfd8dc
  • gitDecoration.deletedResourceForeground#ef9a9a
  • gitDecoration.ignoredResourceForeground#546e7a
  • gitDecoration.modifiedResourceForeground#ffcc80
  • gitDecoration.untrackedResourceForeground#a5d6a4
  • list.activeSelectionBackground#78909c40
  • list.activeSelectionBorder#00000000
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.focusBackground#78909c40
  • list.hoverBackground#78909c10
  • list.inactiveSelectionBackground#00000000
  • menu.background#18191a
  • menu.border#00000000
  • menu.foreground#eceff1
  • menu.selectionBackground#78909c
  • menu.selectionForeground#18191a
  • notifications.background#18191a
  • notifications.border#78909c
  • notifications.foreground#eceff1
  • panel.background#18191a
  • panel.border#00000000
  • panelTitle.activeBackground#78909c40
  • panelTitle.activeBorder#00000000
  • quickInput.background#212224
  • quickInput.list.focusBackground#78909c
  • sideBar.background#18191a
  • sideBar.border#00000000
  • sideBar.foreground#b0bec5
  • sideBarSectionHeader.background#18191a
  • statusBar.background#18191a
  • statusBar.border#00000000
  • statusBar.foreground#b0bec5
  • tab.activeBackground#18191a
  • tab.activeBorderBottom#78909c
  • tab.activeBorderTop#18191a
  • tab.activeForeground#eceff1
  • tab.border#18191a00
  • tab.inactiveBackground#18191a
  • tab.inactiveForeground#78909c
  • terminal.background#18191a
  • titleBar.activeBackground#18191a
  • titleBar.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#546e7aitalic
string, string.quoted, string.template#a5d6a7
constant.numeric#ffcc80
constant.language#ffcc80
constant.character#ffcc80
constant.other#ffcc80
variable#eceff1
variable.other.readwrite#eceff1
variable.parameter#ffab91italic
variable.language#90a4aeitalic
keyword#90a4aebold
keyword.control#b0bec5italic
keyword.operator#b0bec5
keyword.declaration#90a4aebold
storage#90a4aebold
storage.type#90a4aebold
entity.name.class#b0bec5
entity.name.type#b0bec5
entity.name.function#cfd8dc
entity.other.attribute-name#b0bec5italic
entity.name.tag#ef9a9a
support.function#cfd8dc
support.constant#ffcc80
support.type#b0bec5
support.class#b0bec5
support.variable#eceff1
punctuation#cfd8dc
meta.brace#cfd8dc
meta.delimiter#cfd8dc
punctuation.definition.variable#eceff1
punctuation.definition.string#a5d6a7
punctuation.definition.parameters#cfd8dc
punctuation.terminator#cfd8dc
punctuation.separator#cfd8dc
meta.function-call#cfd8dc
meta.object-literal.key#eceff1
source.json meta.structure.dictionary.key#b0bec5
source.css entity.name.tag#b0bec5
source.css entity.other.attribute-name.class#a5d6a7
source.css entity.other.attribute-name.id#cfd8dc
source.css constant.numeric#ffcc80
source.css keyword.other.unit#ffcc80
text.html.basic entity.other.attribute-name#b0bec5italic
meta.tag.custom#b0bec5
markup.heading#90a4aebold
markup.bold#90a4aebold
markup.italic#90a4aeitalic
markup.underline#cfd8dcunderline
markup.quote#546e7aitalic
markup.raw#a5d6a7
markup.inline.raw#ffcc80
variable.annotation#b0bec5
meta.decorator#ef9a9a
variable.other.constant#ffcc80
variable.other.enummember#ffcc80
meta.object.member#eceff1
variable.other.property#eceff1
source.python variable.parameter.function.language.special.self#90a4aeitalic
source.python constant.language#b0bec5
source.go storage.type#90a4ae
source.go entity.name.function#cfd8dc
source.java storage.modifier#90a4ae
source.java entity.name.type.class#b0bec5
source.ts entity.name.type.interface#b0bec5
source.js variable.other.object#b0bec5
source.js variable.other.readwrite.alias#b0bec5
source.shell variable.other#eceff1
source.shell keyword.operator#cfd8dc
punctuation.definition.tag.html#cfd8dc
punctuation.definition.tag.begin.html#cfd8dc
punctuation.definition.tag.end.html#cfd8dc
string.regexp#cfd8dc
constant.character.escape.regexp#cfd8dc
variable.group.regexp#a5d6a7
constant.other.character-class.range.regexp#ffcc80
keyword.operator.quantifier.regexp#cfd8dc
support.type.property-name.json#b0bec5
meta.structure.dictionary.value.json string.quoted.double.json#a5d6a7
source.yaml entity.name.tag#b0bec5
text.xml entity.name.tag#ef9a9a
text.xml entity.other.attribute-name#b0bec5