drawdb
drawdb copied to clipboard
drawdb-io
[FEATURE] Implement Dark/Light Theme Toggle on Landing Page
The current Landing Page doesn’t support a dark/light theme toggle. To improve accessibility and user experience, we should add a theme switcher that allows users to switch between Light and Dark modes — without altering the existing layout, animations, or design flow.
Requirements
- Implement a theme toggle button in the Navbar or top-right corner.
- Use Tailwind’s dark: variants for styling (e.g., dark:bg-gray-900, dark:text-white).
- Maintain existing structure and GSAP/Framer animations — no layout or design refactors.
- Store user preference in localStorage, and sync with the system color scheme if possible (prefers-color-scheme).
- Apply theme context globally (e.g., ThemeContext or simple React state).
- Ensure all text, backgrounds, and buttons have sufficient contrast in both themes.
Implementation Notes
- Update tailwind.config.js → darkMode: "class".
- Add a new file: src/context/ThemeContext.jsx for managing theme state.
- Optional: Add src/components/ThemeToggle.jsx for the toggle UI.
- Test theme switching on the Landing Page only (initial rollout).
@CodeMaverick-143
Hi! I’ve started working on this issue and will be implementing the theme toggle as described. Could you please assign this issue to me so I can continue working on it officially?
