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—
Kai Zen Theme by MJ Studio - VS Code Theme