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