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#dadbdc
  • activityBar.foreground#565E65
  • activityBarBadge.background#919293
  • button.background#919293
  • button.foreground#565E65
  • dropdown.background#dadbdc
  • dropdown.foreground#565E65
  • editor.background#F3F4F5
  • editor.foreground#565E65
  • editor.lineHighlightBackground#ADB3BA55
  • editor.selectionBackground#DFE2E5
  • editorCursor.foreground#565E65
  • editorGroup.background#dadbdc
  • editorGroup.border#565E65
  • editorGroup.dropBackground#DFE2E5
  • editorGroupHeader.tabsBackground#dadbdc
  • editorWhitespace.foreground#DFE2E5
  • list.activeSelectionBackground#dadbdc
  • list.dropBackground#dadbdc
  • list.focusBackground#dadbdc
  • list.hoverBackground#dadbdc
  • list.inactiveSelectionBackground#dadbdc
  • notification.background#565E65
  • sideBar.background#f5f6f7
  • sideBarTitle.foreground#565E65
  • statusBar.background#dadbdc
  • statusBar.debuggingBackground#919293
  • statusBar.foreground#565E65
  • statusBar.noFolderBackground#919293
  • statusBarItem.prominentBackground#aaaaab
  • statusBarItem.prominentHoverBackground#aaaaab99
  • tab.activeBackground#F3F4F5
  • tab.inactiveBackground#dadbdc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#565E65
variable.parameter.function#565E65
comment, punctuation.definition.comment#ADB3BA
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#565E65
none#565E65
keyword.operator#565E65
keyword#C795AE
variable#C7AE95
entity.name.function, meta.require, support.function.any-method#AE95C7
support.class, entity.name.class, entity.name.type.class#C7C795
meta.class#393F45
keyword.other.special-method#AE95C7
storage#C795AE
support.function#95AEC7
string, constant.other.symbol, entity.other.inherited-class#95C7AE
constant.numeric#C7C795
none#C7C795
none#C7C795
constant#C7C795
entity.name.tag#C7AE95
entity.other.attribute-name#C7C795
entity.other.attribute-name.id, punctuation.definition.entity#AE95C7
meta.selector#C795AE
none#C7C795
markup.heading punctuation.definition.heading, entity.name.section#AE95C7
keyword.other.unit#C7C795
markup.bold, punctuation.definition.bold#C7C795bold
markup.italic, punctuation.definition.italic#C795AEitalic
markup.raw.inline#95C7AE
string.other.link#C7AE95
meta.link#C7C795
markup.list#C7AE95
markup.quote#C7C795
meta.separator#565E65
markup.inserted#95C7AE
markup.deleted#C7AE95
markup.changed#C795AE
constant.other.color#95AEC7
string.regexp#95AEC7
constant.character.escape#95AEC7
punctuation.section.embedded, variable.interpolation#C79595
invalid.illegal#F3F4F5
invalid.broken#1C2023
invalid.deprecated#F3F4F5
invalid.unimplemented#1C2023
Base16 Themes by J. Ryan Stinnett - VS Code Theme