[FEAT]: Add different modes to the website to increase engagement #91
Description
Feature: Add Support for Multiple Visual Themes (Dark Mode, Light Mode, High Contrast)
📝 Description
Implement a theming system for the debate website that allows users to switch between visual themes like light mode, dark mode, and high-contrast mode. The system should be scalable, easily extendable, and persist user preferences across sessions.
✅ Features to Include
- Create a global theme context using:
localStorageor cookies to persist the theme choice
- Define multiple theme styles:
- Light Mode (default)
- Dark Mode
- High Contrast Mode (for accessibility)
- Apply themes using:
- CSS variables with a theming system (
:root { --bg-color: ... }) - Dynamic class switching on the root HTML element (
<body className="theme-dark">)
- CSS variables with a theming system (
- Implement a theme toggle UI:
- Add a switcher button in the navbar or settings
- Optional: Detect system theme (
window.matchMedia) on first load
- Ensure all components support theme changes
- Reuse theme variables in buttons, cards, text, backgrounds, etc.
- Add fallback/default theme on first visit
- Test compatibility across:
- Home, Debate, Profile, Leaderboard, and Settings pages