Add Theme Toggle (Light/Dark/Colorblind Modes)

[RyderKeeny]

Description:
After the front-end visualization is mostly completed, update the CSS and UI components to support multiple visual themes. Add a toggle or button on the home page that allows users to switch between light mode, dark mode, and a colorblind-friendly mode designed for common red-green colorblind types (deuteranopia/protanopia).

Requirements:

• Implement a theme toggle component/button on the home page.

• Light and dark themes should apply globally across all components.

• Add a third theme optimized for red-green colorblind accessibility (e.g., adjusted color palettes and contrast ratios).

• Ensure smooth transitions when switching themes.

[bryan-bong]

I'd like to work on this

[evachacin]

I'd like to work on this for CEN3031

[brocon28]

I'd like to work on this for a class open-source contribution project (CEN3031). My plan: pull the current hardcoded colors out of App.css, Home.css, and index.css into CSS custom properties, add a toggle (persisted via localStorage) to switch between light/dark, plus a colorblind-friendly palette tuned for deuteranopia/protanopia. Let me know if that approach sounds right or if there's a direction you'd prefer!

[sunayk64]

Hi @RyderKeeny if this task is still available i would like to work on it.

[bia-rivera1018]

Hi, I would like to work on this for my class, if it is still available

[dikshakushwah04]

Hi, I'd like to work on this for my open source contribution project too.

[aBeverageOfSorts]

Hey, I'd love to work on this for a school project!

[Lalithaaaa]

Hello, I would also love to help work on this for a project!

[austinktaylors]

Hello, I'd like to work on this for my CEN3031 project.