Skip to content

feat: Solar high-contrast theme for outdoor laptop use (Closes #14) - #33

Merged
JamesEjembi merged 3 commits into
Lumina-etwork:mainfrom
Jokay1997:solar-high-contrast-theme
Jun 19, 2026
Merged

feat: Solar high-contrast theme for outdoor laptop use (Closes #14)#33
JamesEjembi merged 3 commits into
Lumina-etwork:mainfrom
Jokay1997:solar-high-contrast-theme

Conversation

@Jokay1997

Copy link
Copy Markdown

Summary

Implements a specialized Solar high-contrast theme for field engineers inspecting outdoor mesh network nodes under direct sunlight. The theme achieves a minimum 10:1 contrast ratio for all text elements and passes WCAG 2.2 AAA compliance.

Changes

New Files

  • *\src/styles/themes/solar.css* - Solar theme CSS custom properties with verified 10:1+ contrast ratios
  • *\src/hooks/useTheme.ts* - Theme hook with \localStorage\ persistence and system preference detection
  • *\src/components/providers/ThemeProvider.tsx* - React context provider for theme state
  • *\src/components/settings/ThemeSelector.tsx* - Theme toggle UI (Light / Dark / High Contrast (Solar))
  • *\scripts/check-contrast.mjs* - CI script that validates all CSS variable contrast pairs meet thresholds

Modified Files

  • *\�pp/globals.css* - Added .solar\ and .dark\ class variables; defined semantic CSS custom properties for all modes; added 3px solid focus ring styles
  • *\�pp/layout.tsx* - Added blocking inline script to read \localStorage\ and apply theme class before first paint (prevents FOUC)
  • *\�pp/providers.tsx* - Wrapped component tree with \ThemeProvider\
  • *\�pp/page.tsx* - Migrated all hardcoded Tailwind arbitrary colors to semantic CSS variable classes
  • *.github/workflows/test.yml* - Added contrast audit step to CI pipeline

Solar Theme Contrast Verification

All Solar theme color pairs verified at ≥10:1:

  • Text on background: 21:1 (pure black on pure white)
  • Primary (#0022CC) on background: 10:1
  • Focus ring (pure black) on background: 21:1 (3px solid)
  • All interactive, success, warning, danger states also meet ≥10:1
  • Non-color information conveyed via patterns/icons for colorblind users

Closes #14

- Add Solar theme CSS custom properties with 10:1+ WCAG AAA contrast
- Create ThemeProvider context with light/dark/solar support
- Create useTheme hook with localStorage persistence
- Add blocking script in layout to prevent flash of unstyled content
- Add ThemeSelector component with sun icon for High Contrast (Solar)
- Refactor page.tsx to use semantic CSS variable color classes
- Add contrast audit script for CI pipeline
- Add focus-visible ring styles with 3px solid outline
- All Solar theme pairs verified at 10:1 minimum contrast ratio

Closes Lumina-etwork#14
@JamesEjembi
JamesEjembi merged commit 6562e37 into Lumina-etwork:main Jun 19, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Ultra-High Contrast Theme Layout Schemes Formulated for Outdoor Laptops

3 participants