1.3 KiB
1.3 KiB
Why
Add modern theming controls (dark/light/high-contrast) to improve accessibility and give the site a polished, customizable "WOW" experience.
What Changes
- Add three user-selectable themes: Dark, Light, and High Contrast.
- Add a floating theme switcher "notch" on the right edge of the screen:
- positioned just below the primary nav bar
- leaves enough vertical space for secondary navigation
- hover state includes a tasteful animation
- Theme switching uses a smooth transition (not an abrupt flash).
Capabilities
New Capabilities
site-theming: Theme tokens and a theme application mechanism that can switch between Dark/Light/High Contrast across the site.theme-switcher-notch: A floating, accessible UI control (right-side notch) that lets the user switch themes.
Modified Capabilities
wcag-responsive-ui: Extend accessibility baseline to include theme switching requirements (keyboard, focus, reduced motion) and ensure High Contrast theme is supported.
Impact
- Affected UI/CSS: global design tokens (CSS variables), background layers, card/CTA styling, focus styling.
- Affected layout: a new floating notch component that must not overlap navigation across breakpoints.
- Affected UX/accessibility: keyboard navigation and motion preferences during theme transitions.