light-dark-modelisted

# Light/Dark Mode Accessibility Skill > **Canonical source**: `examples/LIGHT_DARK_MODE_ACCESSIBILITY_BEST_PRACTICES.md` in `mgifford/ACCESSIBILITY.md` > This skill is derived from that file. When in doubt, the example is authoritative. Apply these rules whenever implementing or reviewing colour theme support in HTML, CSS, or JavaScript. **Only load this skill if the project supports light/dark mode or user theme switching.** --- ## Critical Rule: Focus Is Navigation, Not Selection **A theme must not change until the user explicitly activates an option.** Moving keyboard focus or pointer hover across theme choices MUST NOT preview, select, or apply a theme. Tabbing across System, Light, and Dark MUST leave the page colours unchanged until the user presses Enter or Space. This is a **Critical** requirement. Violations cause colour flashing during keyboard navigation and disorient users with vestibular disorders, cognitive disabilities, and low vision. --- ## Core Mandate All colour themes **must** meet WCAG 2.2 Level AA contrast in **both** light and dark modes, including forced-colours / high contrast modes. Test all three — not just the default. ## Required: Three-Option Theme Selector Pattern Use a visible three-option selector that shows all three options at the same time: * System * Light * Dark ### Interaction pattern requirements * MUST use a labelled group containing three native `<button type="button">` elements * MUST use `aria-pressed="true"` for the