Skip to main content
Coding Theme

WCAG Themes

Publisher: Michael J. CalkinsThemes in package: 30

WCAG compliant VS Code themes with 8:1 minimum contrast ratio, ideal for users with astigmatism and visual impairments.

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.activeBorder#C77DFF
  • activityBar.background#0d0616
  • activityBar.border#1a0f29
  • activityBar.foreground#F5F0FF
  • button.background#C77DFF
  • button.foreground#0d0616
  • button.hoverBackground#D99AFF
  • editor.background#0d0616
  • editor.foreground#F5F0FF
  • editor.lineHighlightBackground#13091F
  • editor.selectionBackground#4A2673
  • editorGroup.border#1a0f29
  • editorLineNumber.activeForeground#E5D9F2
  • editorLineNumber.foreground#A89FCC
  • focusBorder#C77DFF
  • input.background#13091F
  • input.border#A89FCC
  • input.foreground#F5F0FF
  • inputOption.activeBorder#C77DFF
  • list.activeSelectionBackground#4A2673
  • list.activeSelectionForeground#F5F0FF
  • list.focusOutline#C77DFF
  • list.hoverBackground#1A0F2E
  • list.hoverForeground#F5F0FF
  • panel.background#0d0616
  • panel.border#1a0f29
  • sideBar.background#13091F
  • sideBar.border#1a0f29
  • sideBar.foreground#E5D9F2
  • statusBar.background#C77DFF
  • statusBar.border#1a0f29
  • statusBar.foreground#0d0616
  • tab.activeBackground#1A0F2E
  • tab.activeBorder#C77DFF
  • tab.activeForeground#F5F0FF
  • tab.border#1a0f29
  • tab.inactiveBackground#0d0616
  • tab.inactiveForeground#A89FCC
  • terminal.background#0d0616
  • terminal.foreground#F5F0FF
  • titleBar.activeBackground#0d0616
  • titleBar.activeForeground#F5F0FF
  • titleBar.border#1a0f29
  • titleBar.inactiveBackground#0d0616
  • titleBar.inactiveForeground#A89FCC
  • window.activeBorder#1a0f29

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9485B3italic
keyword#C77DFF
string#7FE7D4
variable#E5D9FF
constant.numeric#FF99CC
entity.name.function#5BB8FF
entity.name.type#B197FC
support.type#B197FC

Shiki preview

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

Loading...