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#B0B0B0
• activityBar.background#0A0A0A
• activityBar.border#1c1c1c
• activityBar.foreground#F5F5F5
• button.background#B0B0B0
• button.foreground#0A0A0A
• button.hoverBackground#C8C8C8
• editor.background#0A0A0A
• editor.foreground#F5F5F5
• editor.lineHighlightBackground#141414
• editor.selectionBackground#404040
• editorGroup.border#1c1c1c
• editorLineNumber.activeForeground#E0E0E0
• editorLineNumber.foreground#909090
• focusBorder#B0B0B0
• input.background#141414
• input.border#909090
• input.foreground#F5F5F5
• inputOption.activeBorder#B0B0B0
• list.activeSelectionBackground#404040
• list.activeSelectionForeground#F5F5F5
• list.focusOutline#B0B0B0
• list.hoverBackground#1F1F1F
• list.hoverForeground#F5F5F5
• panel.background#0A0A0A
• panel.border#1c1c1c
• sideBar.background#141414
• sideBar.border#1c1c1c
• sideBar.foreground#E0E0E0
• statusBar.background#B0B0B0
• statusBar.border#1c1c1c
• statusBar.foreground#0A0A0A
• tab.activeBackground#1F1F1F
• tab.activeBorder#B0B0B0
• tab.activeForeground#F5F5F5
• tab.border#1c1c1c
• tab.inactiveBackground#0A0A0A
• tab.inactiveForeground#909090
• terminal.background#0A0A0A
• terminal.foreground#F5F5F5
• titleBar.activeBackground#0A0A0A
• titleBar.activeForeground#F5F5F5
• titleBar.border#1c1c1c
• titleBar.inactiveBackground#0A0A0A
• titleBar.inactiveForeground#909090
• window.activeBorder#1c1c1c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).