Why Dark Mode
Dark mode reduces eye strain in low light, can save battery on OLED devices, and offers user choice. For psychedelic content, balanced contrast avoids harsh glare while keeping text legible. The toggle must respect accessibility and user preferences.
Design Guidelines
- Preserve sufficient contrast (WCAG AA/AAA). Avoid pure black/white; use dark charcoal backgrounds with soft text colors.
- Keep accent colors consistent but adjust saturation for dark backgrounds.
- Ensure focus states and interactive elements remain visible in both themes.
- Animate theme changes subtly to avoid abrupt flashes.
Implementation Outline
- Add a toggle button in the navbar with aria-pressed state and clear label.
- Use CSS variables: define light/dark palettes and switch root variables via a data-theme attribute on <html>.
- Persist preference in localStorage; on load, read system preference (prefers-color-scheme) then user override.
- Ensure no layout shift; apply theme class before paint when possible.
Accessibility Considerations
- Maintain contrast ratios: text/background, icons, borders.
- Keyboard operable toggle with visible focus ring.
- Announce state changes to screen readers (aria-live or aria-pressed).
- Avoid color-only indicators; keep shapes/labels for states.
Testing Checklist
- Light/dark theme parity for components (cards, nav, forms, alerts).
- Check external embeds or images for halo or hard edges; provide masked or transparent assets.
- Verify contrast with automated tools and manual checks.
- Validate persistence across pages and sessions.
Performance Notes
Theme switches should avoid layout thrash: toggle class on root, prefer CSS transitions for colors only. Minimize JS to reading/writing preference and toggling the attribute.
Safety and Comfort
Provide a quick revert to light mode. Offer a “follow system” option. Avoid intense animations during theme change to prevent discomfort during sensitive states.