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#000000
  • activityBar.border#00000000
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#616161
  • editor.background#000000
  • editor.foreground#eeeeee
  • editor.lineHighlightBackground#121212
  • editor.selectionBackground#212121
  • editorCursor.foreground#ffffff
  • editorGroupHeader.tabsBackground#000000
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#424242
  • focusBorder#00000000
  • gitDecoration.conflictingResourceForeground#b388ff
  • gitDecoration.deletedResourceForeground#ff5252
  • gitDecoration.ignoredResourceForeground#616161
  • gitDecoration.modifiedResourceForeground#ffd740
  • gitDecoration.untrackedResourceForeground#69f0ae
  • list.activeSelectionBackground#ffffff40
  • list.activeSelectionBorder#00000000
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.focusBackground#ffffff40
  • list.hoverBackground#ffffff10
  • list.inactiveSelectionBackground#00000000
  • menu.background#000000
  • menu.border#00000000
  • menu.foreground#eeeeee
  • menu.selectionBackground#ffffff
  • menu.selectionForeground#000000
  • notifications.background#000000
  • notifications.border#ffffff
  • notifications.foreground#eeeeee
  • panel.background#000000
  • panel.border#00000000
  • panelTitle.activeBackground#ffffff40
  • panelTitle.activeBorder#00000000
  • quickInput.background#121212
  • quickInput.list.focusBackground#ffffff
  • sideBar.background#000000
  • sideBar.border#00000000
  • sideBar.foreground#bdbdbd
  • sideBarSectionHeader.background#000000
  • statusBar.background#000000
  • statusBar.border#00000000
  • statusBar.foreground#bdbdbd
  • tab.activeBackground#000000
  • tab.activeBorderBottom#ffffff
  • tab.activeBorderTop#000000
  • tab.activeForeground#ffffff
  • tab.border#00000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#757575
  • terminal.background#000000
  • titleBar.activeBackground#000000
  • titleBar.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#616161italic
string, string.quoted, string.template#69f0ae—
constant.numeric#ff4081—
constant.language#ff4081—
constant.character#ff4081—
constant.other#ff4081—
variable#e0e0e0—
variable.other.readwrite#e0e0e0—
variable.parameter#ff5252italic
variable.language#ffffffitalic
keyword#ffffffbold
keyword.control#b388ffitalic
keyword.operator#b388ff—
keyword.declaration#ffffffbold
storage#ffffffbold
storage.type#ffffffbold
entity.name.class#ffd740—
entity.name.type#ffd740—
entity.name.function#40c4ff—
entity.other.attribute-name#ffd740italic
entity.name.tag#ff5252—
support.function#40c4ff—
support.constant#ff4081—
support.type#ffd740—
support.class#ffd740—
support.variable#e0e0e0—
punctuation#ffffff—
meta.brace#ffffff—
meta.delimiter#ffffff—
punctuation.definition.variable#e0e0e0—
punctuation.definition.string#69f0ae—
punctuation.definition.parameters#ffffff—
punctuation.terminator#ffffff—
punctuation.separator#ffffff—
meta.function-call#40c4ff—
meta.object-literal.key#e0e0e0—
source.json meta.structure.dictionary.key#40c4ff—
source.css entity.name.tag#40c4ff—
source.css entity.other.attribute-name.class#69f0ae—
source.css entity.other.attribute-name.id#40c4ff—
source.css constant.numeric#ff4081—
source.css keyword.other.unit#ff4081—
text.html.basic entity.other.attribute-name#ffd740italic
meta.tag.custom#ffd740—
markup.heading#ffffffbold
markup.bold#ffffffbold
markup.italic#ffffffitalic
markup.underline#ffffffunderline
markup.quote#616161italic
markup.raw#69f0ae—
markup.inline.raw#ff4081—
variable.annotation#ffd740—
meta.decorator#ffd740—
variable.other.constant#ff4081—
variable.other.enummember#ff4081—
meta.object.member#e0e0e0—
variable.other.property#e0e0e0—
source.python variable.parameter.function.language.special.self#ffffffitalic
source.python constant.language#ffd740—
source.go storage.type#ffffff—
source.go entity.name.function#40c4ff—
source.java storage.modifier#ffffff—
source.java entity.name.type.class#ffd740—
source.ts entity.name.type.interface#ffd740—
source.js variable.other.object#ffd740—
source.js variable.other.readwrite.alias#ffd740—
source.shell variable.other#e0e0e0—
source.shell keyword.operator#b388ff—
punctuation.definition.tag.html#b388ff—
punctuation.definition.tag.begin.html#b388ff—
punctuation.definition.tag.end.html#b388ff—
string.regexp#b388ff—
constant.character.escape.regexp#b388ff—
variable.group.regexp#69f0ae—
constant.other.character-class.range.regexp#ff4081—
keyword.operator.quantifier.regexp#b388ff—
support.type.property-name.json#40c4ff—
meta.structure.dictionary.value.json string.quoted.double.json#69f0ae—
source.yaml entity.name.tag#40c4ff—
text.xml entity.name.tag#ff5252—
text.xml entity.other.attribute-name#ffd740—