Feat: Add Dark Mode Support #189

[trivedikavya]

Description
This PR addresses issue #189 by implementing a fully functional Dark Mode for the GSoC Organizations site. It introduces a global theme management system using Redux, CSS variables for dynamic styling, and specific overrides for Semantic UI components to ensure a seamless visual experience in both Light and Dark modes.

Key Features
Global Theme Toggle: Added a button in the Desktop header (next to the search bar) and Mobile toolbar to switch between Light and Dark modes.

Persistent Preference: The user's theme choice is saved in localStorage, so it remembers the setting on reload.

Smart Styling:

Used CSS Variables (--bg-color, --text-color, --card-bg, etc.) for efficient theming.

Implemented Neumorphic Shadows for organization and project cards in Dark Mode to add depth without "white glow" artifacts.

Smooth Transitions: Added CSS transitions to backgrounds and borders for a soft switching effect.

Component Overrides:

Sidebar: Fully adapts to dark mode with updated text and border colors.

Search Bar: Customized to blend perfectly with the dark header.

Modals & Filters: Fixed "View All" popups and filter checklists to be readable in dark mode.

Mobile Experience: The mobile toolbar gets a distinct translucent dark background (rgba(0, 0, 0, 0.95)).

Files Changed
Core Logic & State
src/store/theme.js: Created Redux slice for managing theme state.

src/store/index.js: Registered the theme reducer.

src/components/theme-provider.jsx: Created a wrapper to apply the data-theme attribute to the body.

wrap-with-provider.js: Wrapped the root element with ThemeProvider.

Components & UI
src/components/theme-toggle.jsx: Created the toggle button component with adaptive styles (Sun/Moon icons).

src/layouts/desktop/layout.jsx: Integrated the toggle button and converted the search container to Flexbox for proper alignment.

src/layouts/mobile/layout.jsx: Added the toggle button to the mobile toolbar.

Styling (CSS)
src/layouts/layout.css: Defined global CSS variables and added overrides for Semantic UI components (Cards, Inputs, Modals).

src/layouts/desktop/layout.css: Fixed search bar spacing and colors.

src/components/sidebar.css: Updated sidebar background and text colors.

src/components/org-card.css & project-card.css: Added hover effects and shadow variables.

src/components/org-info.css, projects-graph.css, organization.css: Added specific dark mode borders and shadows.

src/components/mobile/toolbar.css: Custom dark background for mobile.

Screenshots

[netlify]

✅ Deploy Preview for gsoc-organizations ready!

Name	Link
🔨 Latest commit	5fc1e32
🔍 Latest deploy log	https://app.netlify.com/projects/gsoc-organizations/deploys/6943960a238d3e00087a1276
😎 Deploy Preview	https://deploy-preview-194--gsoc-organizations.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[trivedikavya]

Hello @nishantwrp,
I hope this message finds you well. I’m reaching out to check if there has been any feedback or progress update.
Please let me know whenever convenient.
Best regards.

[DeepakSilaych]

would really appreciate this pr merge

much needed feature 🥹

[nishantwrp]

Hi @trivedikavya, thanks for the dark mode support. Looks neat. But I think we need to think of some solution for how to transform the images to match the dark mode AI before submitting this.

Can you come up with some ideas? Happy to chat with you over a call as well if interested

[trivedikavya]

Hi @nishantwrp, thanks for the feedback! I agree that the bright white logo boxes can be jarring in dark mode.

Since we can't manually edit the source images, I've come up with three CSS-only strategies to handle this. Let me know which one you prefer:

Option 1: Smart Invert (Recommended) This applies filter: invert(1) hue-rotate(180deg) to the logo container.
How it works: It turns white backgrounds to black (blending with the theme) and rotates the hue 180° to keep brand colors (like blue or green) close to their original look.
Pros: Best visual integration; eliminates the "white box" effect completely.
Cons: Some specific brand colors might shift slightly.

Option 2: Brightness Dimming This applies filter: brightness(0.8) (or lower) to the container.
How it works: It simply dims the white box so it isn't as blinding, without changing colors.
Pros: 100% color accuracy for all logos.
Cons: The boxy white background is still visible, just greyer.

Option 3: Blend Mode This applies mix-blend-mode: multiply to the image.
How it works: It makes the white background transparent, showing the dark card background underneath.
Pros: Looks cleanest for logos with colored icons.
Cons: High Risk Logos with black text will become invisible against the dark background.

I personally recommend Option 1 as it offers the most "native" dark mode feel, but I'm happy to implement whichever you think is best!

[trivedikavya]

hello @nishantwrp , If we go with option 1 It will look like this , should I raise PR ..?

[nishantwrp]

@trivedikavya yeah, please go ahead

[trivedikavya]

@nishantwrp Done Sir

[nishantwrp]

@trivedikavya thanks looks neater, i'm yet to take a look at the code. Before that, I have some more feedback after using the dark mode

• There is some difference in the theming of the sidebar even in the light mode when compared to the original site. Can you fix that?
• In dark mode, hovering on the org cards doesn't create a shadow like it does in light mode.
• I think you've not considered other pages like https://deploy-preview-194--gsoc-organizations.netlify.app/organization/freecad/. Can you please fix the UI in dark mode for these as well?

[trivedikavya]

hello @nishantwrp sir

1. Fixed Sidebar Theming (Light Mode)
   Restored the original sidebar background color (#f5f7f9) and border style in Light Mode to match the original site design.
   Ensured the sidebar correctly switches to the dark theme variables in Dark Mode.

2. Fixed Organization Card Hover (Dark Mode)
   Resolved an issue where hovering over Organization Cards in Dark Mode showed no visual feedback.
   Added a specific "glow" shadow effect for Dark Mode hover states to make interactions visible.

3. Fixed Organization Details Page (Dark Mode)
   The Organization Details pages (e.g., /organization/freecad/) previously had hardcoded white backgrounds and text colors, breaking the UI when Dark Mode was enabled.
   Updated organization.css, org-info.css, and projects-graph.css to use theme variables, ensuring these pages now fully support Dark Mode.

Screenshots & Verification:

1. Sidebar Restoration (Light Mode)

Original (Reference):

My Fix:

2. Hover Effect (Dark Mode)

New Glow Effect:

3. Organization Details Page (Dark Mode Fixes)

Step 1: Dark Mode Enabled (Home)

Step 2: Organization Page in Dark Mode (Now works correctly)

Step 3: Switching back to Light Mode

Step 4: Reload & Verify Light Mode (Retains original look) (After reloading the organization page)

[trivedikavya]

One More issue I found that:

In the "Past Projects" section, the student/contributor name was invisible in Dark Mode.
Updated project-card.css to ensure the name remains a visible gray color in both Light and Dark modes.

Before

After

[trivedikavya]

One More Thing i added to enhance UI in Dark mode .
As Light mode Have Box-shadow In Organisation Section around cards , so i added box-shadow around card In dark mode to enhance the UI in Dark mode.

Before

After

[trivedikavya]

@nishantwrp Done Sir