✨ feat: Add light/dark mode toggle with theme persistence#104
Conversation
- Implement ThemeProvider context for managing dark/light mode state - Add light mode CSS variables to index.css with proper color scheme - Integrate theme toggle button in landing page navbar (PubNav) - Add smooth transitions for theme switching - Store user theme preference in localStorage - Update ThemeContext to properly manage dark/light class toggle - No other components affected by theme changes
- Move font and other shared variables to :root (dark mode default) - Light mode now only overrides colors and shadows, keeping the same fonts - Ensures consistent typography across both themes
|
good work. Btw, you are from ELUSOC right? I will merge this PR once the event starts. |
Thanks! Yes, I am from ELUSOC. Sounds good to me, feel free to merge it once the event officially starts. |
|
Hey @sandeepsidar1210-rgb! Saw your work on GSSoC 2026. We are building TermUI, a TypeScript terminal UI framework with React-style hooks and JSX, rendered entirely in the terminal. We have 67 unassigned GSSoC issues open. 19 are marked Karanjot, TermUI maintainer |
Hey @Karanjot786 , thanks a lot for reaching out! I checked out TermUI and it looks really interesting. I’d love to contribute to GSSoC issues. I’ll go through the open issues and start with a good first issue. Looking forward to contributing 🚀 |
|
@DeadIndian I hope you didn't forget to merge my PULL REQUEST . |
DeadIndian
added
adventurer
3 participants
🎯 Overview
This PR introduces a fully functional light/dark mode toggle to the Gamify platform, enhancing user experience with theme customization and persistence.
✨ Features
localStorageand restored on page load.:root) and light (.light) themes.🛠️ Technical Implementation
New / Modified files
client/src/Context/ThemeContext.jsx— theme provider & hookclient/src/App.jsx— ThemeProvider wrapperclient/src/index.css— CSS variables for both themesclient/src/pages/Landing.jsx— theme toggle button in public navCHANGELOG.md— Unreleased entrydocs/screenshots/dark.png,docs/screenshots/light.png— example screenshots✅ Testing & Verification
vite build).📸 Screenshots
Light mode
Dark mode
📦 Commits
feat: add fully functional light/dark mode toggle to the UIfix: restore original fonts for both dark and light modeschore: fix lint - remove unused imports and allow theme hook exportdocs: add changelog entry for light/dark theme featuredocs: add dark/light screenshots and capture scriptfix: regenerate light theme screenshot correctly🔖 Labels & Reviewers (suggested)
enhancement,ui,accessibility