Skip to main content
CodingTheme

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#e3e3e3
  • activityBar.foreground#000000
  • activityBarBadge.background#c7c7c7
  • activityBarBadge.foreground#000000
  • editor.background#f5f5f5
  • editor.foreground#000000
  • editor.lineHighlightBackground#F0F0F0
  • editorLineNumber.foreground#9DA39A
  • focusBorder#CCCCCC
  • list.activeSelectionBackground#e9e9e9
  • list.activeSelectionForeground#000000
  • list.focusHighlightForeground#007ACC
  • list.hoverBackground#f4f4f4
  • list.inactiveSelectionBackground#e9e9e9
  • panel.background#f3f3f3
  • sideBar.background#efefef
  • sideBarSectionHeader.background#e3e3e3
  • statusBar.background#d2d2d2
  • statusBar.debuggingBackground#FFBC5D
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#4c4c4c
  • statusBar.noFolderBackground#cf97ef
  • statusBar.noFolderForeground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AA3731
string, string.regexp, constant.other.symbol#448C27
constant.character.escape#777777
constant.numeric, constant.character, constant.keyword, constant#811abc
entity.name#325CC0
punctuation#777777
invalid#660000
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
source.json meta.structure.dictionary.json support.type.property-name.json#000000
entity.other.attribute-name.class.pug#979797

Shiki preview

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

Loading...

Alabaster Variant Theme by Nicolai Verbaarschot - VS Code Theme