Feat : Implement Theme Toggle (Light/Dark Mode)

[imSubhro]

✨ Feature Description

Add a Light/Dark Mode theme toggle so users can switch between themes based on their preference, with the choice persisted across sessions.

🤔 Problem It Solves

Code editors are tools developers spend hours in. Having only one fixed theme — especially a light one — is uncomfortable for long sessions and immediately feels outdated compared to every other editor tool users are familiar with. A theme toggle is one of the most expected features in any developer-facing product.

💡 Proposed Solution

• Add a sun/moon toggle button to the navbar or editor toolbar.
• Switch between light and dark CSS themes on click.
• Persist the user's preference in localStorage so it's remembered on return.
• Ensure all UI components — sidebar, editor, toolbar, modals — respond correctly to both themes.

✅ Acceptance Criteria

• Theme toggle button added to the UI.
• Light and dark themes both work across all pages and components.
• Preference persisted in localStorage.
• No visual inconsistencies in either theme.

🌱 Contributor Checklist

• I am participating via GSSoC
• I have read the contribution guidelines
• I checked for existing issues before creating this

[imSubhro]

Hi @alokkksharmaa 👋

I'd love to work on this under GSSoC! 🚀

A code editor with no dark mode support is one of those things developers notice immediately — it's practically the first thing anyone looks for in a dev tool. Right now CodeSync has a fixed theme with no toggle, which makes it uncomfortable for long coding sessions.

My plan is to add a sun/moon toggle button to the navbar that switches between light and dark mode, save the preference in localStorage so it's restored on return, and make sure every part of the UI — sidebar, editor, toolbar, modals — responds cleanly to both themes. Could you please assign this to me? 😊

[Hiteshree-Chauhan-it]

/assign GSSoC'26

[reetikachoudhary15-hue]

Hi @alokkksharmaa 👋

I reviewed the current UI flow and the proposed theme toggle feature before commenting.

I think this issue is more than just switching between dark and light colors. Theme behavior directly affects readability, long-session comfort, and overall usability across different lighting conditions.

For example:

• dark themes can become difficult to read in brighter surroundings
• very bright interfaces create strain during night usage
• users often reduce brightness for privacy, but that can also affect readability if contrast is not handled properly

Because of this, my focus would be on maintaining consistent readability and UI behavior instead of only changing background colors.

My approach would include:

• centralized and reusable theme handling
• persistent theme preference
• avoiding theme flickering during reload
• maintaining proper contrast across editor sections, modals, sidebars, and buttons
• keeping responsive behavior and accessibility consistent in both modes

I’d love to work on this feature under GSSoC'26 while keeping the implementation scalable for future UI improvements as well.