Fix UI overlay click-interception and dark mode rendering bugs (Fixes #33)

[ArshVermaGit]

Description

This PR resolves several critical logical and visual UI bugs outlined in Issue #33.

Previously, opening and closing modals resulted in "ghost" overlays stealing clicks from the navigation header, causing confusing interactions. Additionally, text inside modals was invisible during Dark Mode, and refreshing the page caused an ugly hydration flash on the theme icon.

Key Changes

• Click-Stealing Fix: Removed an invisible spacer overlay in the Help modal that was intercepting user clicks on the navigation header icons.
• Dark Mode Visibility: Added proper dark:bg-gray-800 backgrounds and updated text contrast styles inside the Statistics and Help modals so they are completely readable when the theme is toggled.
• Theme Hydration Sync: Updated the ThemeProvider to eagerly check localStorage during initial mount. This stops the header icon from flashing the incorrect theme state on a page refresh.
• Menu Backdrop: Upgraded the side-menu's dark backdrop styling from absolute to fixed to guarantee it covers the entire viewport, even during scrolling.

---

Verification & Proof

Screen.Recording.2026-05-25.at.4.06.43.PM.mov

The attached screen recording demonstrates:

1. The Statistics and Help modals are now cleanly rendering with dark backgrounds and visible text in Dark Mode.
2. After closing a modal, clicks on the navigation header instantly work again (no ghost overlays).
3. Refreshing the page while in Dark Mode flawlessly loads the correct 'Sun' icon without flashing.

Closes #33

[vercel]

@ArshVermaGit is attempting to deploy a commit to the coderzs' projects Team on Vercel.

A member of the Team first needs to authorize it.

[ArshVermaGit]

Hi @coder-zs-cse ! Issue #33 has been resolved. Please review the PR and merge it under GSSoC. Thanks!

[coder-zs-cse]

Your fixes may be working, however your demo feels not depicting exactly the things you have changed.

You claimed that on page refresh, there is a slight delay in dark mode icon visibility, but in your demo, you don't seem to refresh the page to show how it works now.
You claimed that if you click the header icons when how to play section is open, then the click is not propagating to the icons, but in demo you don't seem to demo how it is working now, you seem to be simply clicking the close button.

Can you pls align your demo video to exactly what you have fixed. Once we are on the same page, i'll dive into your code changes and standards that are followed. make sure you are demoing in npm run build

[ArshVermaGit]

Hi @coder-zs-cse ! Here is the updated demo video as requested, recorded using the production build (npm run build).

Screen.Recording.2026-05-25.at.8.22.14.PM.mov

As you can see in the video:

Dark Mode Icon Delay: When the page is refreshed, the dark mode icon is visible instantly with no delay or flickering.

Header Icon Clicks: While the "How to play" section is open, clicking directly on the header icons (instead of the close button) now works as expected, and the clicks propagate properly without being blocked.

[coder-zs-cse]

Something is wrong with your dark mode toggle icon bro xD

[coder-zs-cse]

Header Icon Clicks: While the "How to play" section is open, clicking directly on the header icons (instead of the close button) now works as expected, and the clicks propagate properly without being blocked.

In the demo, you clicked on the dark mode toggle icon when the "how to play" section was open, but it didn't toggle he dark mode to light mode. I am really not sure if we are looking at the same video

[ArshVermaGit]

Hey @coder-zs-cse! Honestly, I initially missed noticing this issue. The main issue I was working on was the delay/flickering during switching between dark and light mode. However, I’ve now gone through this issue as well and resolved it successfully. Please have a look at the updated fix. Thanks!

Screen.Recording.2026-05-25.at.10.55.19.PM.mov

[coder-zs-cse]

okay i'll go through your fixes by this weekend. just make sure you have followed clean css fixes.
like for example i thought for this snippet can we have

const toggleDark = () => setIsDark((prev) => !prev);

useEffect(() => {
  document.documentElement.classList.toggle('dark', isDark);
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
}, [isDark]);

instead of the toggleDark method that is there in file changes

also the demo didn't have the click on icons while how to play section is open, is that fixed?

[ArshVermaGit]

okay i'll go through your fixes by this weekend. just make sure you have followed clean css fixes. like for example i thought for this snippet can we have

const toggleDark = () => setIsDark((prev) => !prev);

useEffect(() => {
  document.documentElement.classList.toggle('dark', isDark);
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
}, [isDark]);

instead of the toggleDark method that is there in file changes

also the demo didn't have the click on icons while how to play section is open, is that fixed?

Sure! Let me dive into the code. I’ll update this PR as soon as possible. Thanks!