drawdb-io / drawdb-io/drawdb

[FEATURE] Implement Dark/Light Theme Toggle on Landing Page

Open
#675 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
39.5k
Forks
3.2k
Avg merge
10h 46m
Merged PRs (30d)
16

Description

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).

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.