WCAG Themes

Color themes

• 

  WCAG Charcoal Theme

• 

  WCAG Cool Blue Theme

• 

  WCAG Cream Theme

• 

  WCAG Crimson Contrast 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#FF4D6A
• activityBar.background#0A0202
• activityBar.border#1A0A0A
• activityBar.foreground#FFF5F5
• button.background#FF4D6A
• button.foreground#0A0202
• button.hoverBackground#FF7089
• editor.background#0A0202
• editor.foreground#FFF5F5
• editor.lineHighlightBackground#120505
• editor.selectionBackground#5C1A1A
• editorGroup.border#1A0A0A
• editorLineNumber.activeForeground#F5E5E5
• editorLineNumber.foreground#B8A5A5
• focusBorder#FF4D6A
• input.background#120505
• input.border#B8A5A5
• input.foreground#FFF5F5
• inputOption.activeBorder#FF4D6A
• list.activeSelectionBackground#5C1A1A
• list.activeSelectionForeground#FFF5F5
• list.focusOutline#FF4D6A
• list.hoverBackground#1A0808
• list.hoverForeground#FFF5F5
• panel.background#0A0202
• panel.border#1A0A0A
• sideBar.background#120505
• sideBar.border#1A0A0A
• sideBar.foreground#F5E5E5
• statusBar.background#FF4D6A
• statusBar.border#1A0A0A
• statusBar.foreground#0A0202
• tab.activeBackground#1A0808
• tab.activeBorder#FF4D6A
• tab.activeForeground#FFF5F5
• tab.border#1A0A0A
• tab.inactiveBackground#0A0202
• tab.inactiveForeground#B8A5A5
• terminal.background#0A0202
• terminal.foreground#FFF5F5
• titleBar.activeBackground#0A0202
• titleBar.activeForeground#FFF5F5
• titleBar.border#1A0A0A
• titleBar.inactiveBackground#0A0202
• titleBar.inactiveForeground#B8A5A5
• window.activeBorder#1A0A0A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).