WCAG Themes

Color themes

• 

  WCAG Dark Theme

• 

  WCAG Dracula Theme

• 

  WCAG Forest Theme

• 

  WCAG Gray 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.activeBorder#FFB347
• activityBar.background#050811
• activityBar.border#0f1419
• activityBar.foreground#F5F7FF
• button.background#FFB347
• button.foreground#050811
• button.hoverBackground#FFC870
• editor.background#050811
• editor.foreground#F5F7FF
• editor.lineHighlightBackground#0B0F1C
• editor.selectionBackground#193763
• editorGroup.border#0f1419
• editorLineNumber.activeForeground#E0E4F5
• editorLineNumber.foreground#A8B0CC
• focusBorder#FFB347
• input.background#0B0F1C
• input.border#A8B0CC
• input.foreground#F5F7FF
• inputOption.activeBorder#FFB347
• list.activeSelectionBackground#193763
• list.activeSelectionForeground#F5F7FF
• list.focusOutline#FFB347
• list.hoverBackground#0F1424
• list.hoverForeground#F5F7FF
• panel.background#050811
• panel.border#0f1419
• sideBar.background#0B0F1C
• sideBar.border#0f1419
• sideBar.foreground#E0E4F5
• statusBar.background#FFB347
• statusBar.border#0f1419
• statusBar.foreground#050811
• tab.activeBackground#0F1424
• tab.activeBorder#FFB347
• tab.activeForeground#F5F7FF
• tab.border#0f1419
• tab.inactiveBackground#050811
• tab.inactiveForeground#A8B0CC
• terminal.background#050811
• terminal.foreground#F5F7FF
• titleBar.activeBackground#050811
• titleBar.activeForeground#F5F7FF
• titleBar.border#0f1419
• titleBar.inactiveBackground#050811
• titleBar.inactiveForeground#A8B0CC
• window.activeBorder#0f1419

tokenColors

TextMate scopes and font styles (syntax highlighting rules).