🎨 feat: Add Responsive Global Light/Dark Theme Toggle (#408)

[Yash191220]

✦ Summary

This pull request adds full Light Mode support to Debugra, introducing a responsive Dark/Light theme toggle in the navigation bar of both the landing page and the main collaborative editor. The theme preference is persisted across sessions in localStorage and automatically synchronizes Monaco Editor's theme dynamically between vs-dark and vs (light).

Fixes #408

---

🚀 Key Features Implemented

1. Global Theme Context Manager

• Created a robust React Context and custom hook (src/context/ThemeContext.jsx) to handle theme preferences (dark/light).
• Automatically updates the HTML document root with the data-theme attribute and syncs selections to localStorage under the debugra-global-theme key.
• Shared wrapper initialized globally at the router level (src/App.jsx).

2. Premium Light Mode Aesthetics (src/index.css)

• Styled a premium, eye-friendly light mode using a curated VS Code Light-inspired color system (light-gray panels #f3f3f3, pure white cards #ffffff, and sharp charcoal typography #1f1f23).
• Refactored the Landing Page Editor Mockup (chrome, toolbar, code, stdout/stderr panels) to utilize dynamic theme variables instead of hardcoded hex colors, enabling the mockup editor to shift system themes beautifully!
• Enhanced landing page responsive items, scrollbars, bento cards, and dropdown headers.

3. Integrated Monaco Theme Syncing (src/components/Editor/EditorPage.jsx)

• Programmed a useEffect inside the editor view to watch the global system theme.
• Switching system themes automatically transitions the Monaco editor to vs light mode, and restoring dark theme restores the system dark default (debugra-dark).

4. Color-Adaptive System Notifications

• Shifted the react-hot-toast <Toaster> to use color custom properties. Success and error notifications now dynamically adapt their backgrounds, borders, and text colors to the active system theme.

5. Code Health & Linter Bug Fixes

• Linter Bug Resolved: Fixed a pre-existing ESLint error in src/components/Editor/AudioChannel.jsx where the invalid attribute playsInline was used on an <audio> tag. This makes the local repository lint checks completely clean (0 errors!).

---

🛠️ Verification & Code Quality Status

We ran full validation checks to ensure zero code issues are introduced:

• npm run format:check: PASS (100% compliant with Prettier layout rules).
• npm run lint: PASS (Clean compile with zero linter errors).

---

⟡ Screenshots / UI Comparison

Before (Hardcoded Dark Theme)	After (Modern Premium Light Theme)
	Smooth transition toggling layout components, mockup frames, and Monaco Editor natively!

[vercel]

@Yash191220 is attempting to deploy a commit to the omkh4242g-1671's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Hi @Yash191220, thanks for contributing to Debugra! 🎉

I have automatically:

• 👤 Assigned this PR to you.
• 🏷️ Applied the gssoc:approved label.

Our workflows will now analyze your changes to classify:

• 📈 PR Difficulty: level:*
• 🧩 PR Type: type:*
• 🌟 PR Quality: quality:*

Tip

Ensure your PR description references the issue it resolves (e.g. Closes #123). This allows the bot to inherit any additional labels from that issue!

Happy coding! 🚀

[vijaypatil477]

@Yash191220 please solve the conflict

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
debugra	Ready	Preview, Comment	Jun 2, 2026 7:46am