Add dark mode support across website

[karrisujana]

Pull Request

What did you change?
Added dark mode support across the website using a theme toggle button. Updated navbar, cards, buttons, topic pages, resource sections, and overall UI colors to support both light and dark themes with smooth transitions.

What issue does this fix?
Fixes #20

Checklist:

• I tested my code locally
• My code works
• I didn't break anything else

[Nessrine88]

CHANGES REQUIRED

Hey @karrisujana, thanks for the dark mode PR! I have some concerns about the CSS approach before we merge.

The core issue: mixed theming strategy

You've set up CSS variables correctly in .dark:

.dark {
  --background: #0f172a;
  --foreground: #f8fafc;
}

But then in several places you bypass those variables entirely with hardcoded values:

.dark .navbar { background-color: #111827; }
.dark h1, .dark h2, .dark h3, .dark p, .dark span { color: white; }

This creates two problems:

1. Inconsistency — if we ever update --foreground or --background, half the UI won't follow

Suggested fix:
Remove all the hardcoded .dark color overrides and let the CSS variables do the work. The variables are already defined correctly — trust them:

/* Remove these ❌ */
.dark h1, .dark h2, .dark h3, .dark p, .dark span { color: white; }

/* Let this do the work ✅ */
.dark { --foreground: #f8fafc; }

Please address this and re-request review. Happy to chat if anything is unclear!

[abdullah-builds-dev]

Hi @karrisujana, thanks for the effort on adding dark mode the toggle and variable setup look good. However, I noticed that in several places the code uses hardcoded colors (color: white;, background-color: #111827;) instead of the CSS variables you defined in .dark.

This creates inconsistency: if we update --foreground or --background, those elements won’t follow the theme. For example:

css
.dark h1, .dark h2, .dark h3, .dark p, .dark span { color: white; }
This line bypasses the variable system.

Because of this mixed strategy, the PR is not correct as-is and needs revision before merging. Please update the code to rely on the CSS variables consistently, then re-request review

[karrisujana]

Resolved the requested changes:

• Removed hardcoded dark mode colors
• Switched completely to CSS variables
• Fixed navbar merge conflicts
• Dark mode now toggles using document.documentElement

Ready for review

[najibullahjafari]

@karrisujana
Please resolve the conflict else!

[karrisujana]

The build step is passing now.
The remaining failure appears to be in the Cloudflare preview deployment step during “Upload preview version”.

I also resolved:

• Navbar syntax issue
• Merge conflicts
• Dark mode CSS variable changes requested in review