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#e6f2f9
  • activityBar.foreground#7f95a1
  • editor.background#f4fbff
  • editor.foreground#7f95a1
  • editor.lineHighlightBackground#90c2dc33
  • editorGroupHeader.tabsBackground#f4fbff
  • editorLineNumber.foreground#7f95a1
  • list.activeSelectionBackground#90c2dc
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#7f95a1
  • list.hoverBackground#90c2dc33
  • list.inactiveSelectionBackground#90c2dc55
  • list.inactiveSelectionForeground#7f95a1
  • sideBar.background#e6f2f9
  • sideBar.foreground#7f95a1
  • statusBar.background#e6f2f9
  • statusBar.debuggingBackground#7f95a1
  • statusBar.debuggingForeground#e6f2f9
  • statusBar.foreground#7f95a1
  • tab.activeBackground#e6f2f9
  • tab.activeForeground#7f95a1
  • tab.inactiveBackground#f4fbff
  • tab.inactiveForeground#798c96
  • titleBar.activeBackground#e6f2f9
  • titleBar.inactiveBackground#e6f2f9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#dc90a5italic
string#b090dc
invalid.illegal#FF5733cc
keyword.operator#7f95a1
keyword, storage#7f95a1bold
storage.type, support.type#7f95a1
constant.language, support.constant, variable.language#7f95a1
variable, support.variable#7f95a1
entity.name.function, support.function#7f95a1bold
entity.name.type, entity.other.inherited-class, support.class#7f95a1bold
entity.name.exception#FF5733cc
entity.name.section#7f95a1bold
constant.numeric, constant.character, constant#7f95a1
constant.character.escape#7f95a1
string.regexp#b090dc
constant.other.symbol#b090dc
punctuation#7f95a1
markup.quote#b090dc
markup.inline.raw#b090dcitalic