feat(accessibility): add comprehensive theme support

[idan]

Summary

This PR adds comprehensive theme support to the application, improving accessibility by implementing multiple color schemes that adapt to user preferences.

Key Features

Theme Support

• Added CSS variables in index.css for multiple themes:
  • Light theme (default)
  • Dark theme (using prefers-color-scheme)
  • High contrast light theme
  • High contrast dark theme (using prefers-contrast)
• Replaced hardcoded Tailwind color classes with CSS custom properties
• Updated App.tsx to use the new CSS variables with rgb() syntax for backgrounds, text, gradients and hover states

Color Vision Deficiency Support

• Added specialized color schemes for protanopia and deuteranopia (red-green color blindness)
• Implemented blue-yellow contrasts instead of red-green for better visibility
• Added state management for color vision deficiency with localStorage persistence
• Created user interface controls to select CVD mode:
  • Default (no adjustment)
  • Protanopia mode
  • Deuteranopia mode

Implementation Details

• The app automatically adapts to user preferences without requiring manual toggles
• Uses data-cvd attribute on the body element for CSS targeting
• Preference can be set via:
  • URL parameter (?cvd=protanopia or ?cvd=deuteranopia)
  • UI selection (stored in localStorage)
  • System preferences detection

These changes significantly improve the accessibility of the application for users with different visual needs and preferences.

Created by GitHub Ace · View Channel