Skip to main content
Coding Theme

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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

fictorial-light-blue - Coding Theme