Theme: DARK MODE

📄 Description

Add a dark mode feature to the React application, allowing users to switch between light and dark themes. The toggle should be a floating button anchored in the bottom-right corner of the viewport, following the design provided in Figma.

Figma Design:
https://www.figma.com/design/A5jKxrxuTpR5rufFCMKUFN/UDF-Room-and-Events-management?node-id=0-1&p=f&t=T29iPOCbTRecYCid-0

🎯 User Acceptance Criteria

1. Toggle Visibility & Placement

   • A floating theme-toggle button appears in the bottom-right corner of every page.
   • The button’s appearance (icon, size, hover/focus states) matches the Figma specification.

2. Theme Switching

   • Clicking the toggle switches between light and dark themes in real time.
   • All existing UI components (backgrounds, text, cards, buttons, etc.) update their styles based on the selected theme.

3. State Management

   • The theme state is managed via a ThemeContext implemented with React’s useContext hook.
   • Components consume the current theme through useContext(ThemeContext) rather than prop-drilling.

4. Persistence

   • The user’s theme preference is saved to localStorage and reapplied on page reload.
   • If no preference exists, default to the user’s OS‐level color scheme (prefers-color-scheme media query).

5. Accessibility

   • The toggle button includes an accessible aria-label that reflects the current action (e.g., “Switch to dark mode” or “Switch to light mode”).
   • Keyboard users can focus and activate the toggle (e.g., via Tab + Enter/Space).

✅ Task Checklist

• Create ThemeContext and ThemeProvider.
• Wrap the root of the app with <ThemeProvider>.
• Implement ThemeToggleButton component and place it in the main layout.
• Define light/dark theme variables and apply them globally.
• Ensure components read theme via useContext(ThemeContext) and adapt styles.
• Persist preference in localStorage and respect OS default on first load.
• Add aria-label and keyboard support to the toggle.
• Review against Figma design for visual consistency.