Skip to content

feat: sync dark mode toggle across index and roadmap pages#3

Open
shubh0284 wants to merge 1 commit intorudra496:masterfrom
shubh0284:master
Open

feat: sync dark mode toggle across index and roadmap pages#3
shubh0284 wants to merge 1 commit intorudra496:masterfrom
shubh0284:master

Conversation

@shubh0284
Copy link
Copy Markdown

@shubh0284 shubh0284 commented Apr 1, 2026

This PR introduces a fully functional dark/light mode toggle to the devroadmaps platform, improving user experience and accessibility across the application.

🚀 Key Changes

Theme Implementation

  • Implemented a centralized initTheme function in main.js
  • Switched to Tailwind’s class-based dark mode (dark:) approach
  • Applied theme globally using the <html> element

Persistence

  • Integrated localStorage to persist user theme preference
  • Ensures consistent theme across page reloads and navigation

UI/UX Enhancements

  • Added a responsive theme toggle button in the navbar 🌙/☀️
  • Synced theme state between index.html and roadmap.html
  • Updated roadmap cards and key components with dark: classes for better readability

Bug Fixes

  • Fixed Uncaught ReferenceError: initTheme is not defined
  • Resolved duplicate identifier errors in certifications.js and community-forum.js
  • Removed 404 errors by consolidating theme logic (eliminated missing theme.js)

🧪 Testing

  • Verified theme persistence across navigation (Landing → Roadmaps)
  • Tested in Chrome and Edge (no UI flicker on load)
  • Confirmed responsive behavior on mobile devices

📌 Result

  • Smooth dark/light switching
  • Persistent user preference
  • Consistent UI across all pages and components

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@shubh0284