28 lines
1.3 KiB
Markdown
28 lines
1.3 KiB
Markdown
## 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.
|