Skip to content

feat: add animated sun/moon theme toggle to all pages#1661

Merged
omroy07 merged 1 commit intoomroy07:mainfrom
nur-hasin:feat/animated-theme-toggle-all-pages
Feb 26, 2026
Merged

feat: add animated sun/moon theme toggle to all pages#1661
omroy07 merged 1 commit intoomroy07:mainfrom
nur-hasin:feat/animated-theme-toggle-all-pages

Conversation

@nur-hasin
Copy link
Copy Markdown
Contributor

@nur-hasin nur-hasin commented Feb 26, 2026

Which issue does this PR close?

Rationale for this change

The platform lacked a consistent dark/light mode toggle across all pages. Users had no way to switch themes on most pages, and several pages had conflicting or broken theme implementations that caused visual issues (wrong background colors, oversized buttons, invisible toggles).

What changes are included in this PR?

  • Added animated SVG sun/moon theme toggle button to all 20 pages (news, community-forum, faq, crop-monitoring, supply-chain, sustainable-farming, marketplace, financial-support, finance-bot, terms-of-service, privacy-policy, contact, ai-assistant, feedback, login, register, forgot-password, crop-planner, disease-detector, yield-prediction)
  • Added flash-prevention inline script in <head> on all pages to avoid theme flicker on load
  • Centralized theme logic in theme.js - reads/writes to localStorage and sets data-theme on <html>
  • Fixed CSS selector bugs ([data-theme="dark"].class to [data-theme="dark"] .class)
  • Removed hardcoded data-theme attributes from <body> tags
  • Removed duplicate/conflicting inline theme JavaScript from individual pages
  • Fixed toggle sizing, positioning and visibility issues across different header styles

Are these changes tested?

Manually tested on all pages in both light and dark modes in Edge. Verified:

  • Theme persists on page refresh via localStorage
  • No theme flash on page load
  • Toggle icon correctly shows sun in light mode and moon in dark mode
  • All page backgrounds, cards, text and form elements respond correctly to theme changes

Are there any user-facing changes?

Yes, users can now toggle between light and dark mode on every page of the platform. The selected theme is saved and applied consistently across all pages.

Screenshots

Screenshot 2026-02-26 052103 Screenshot 2026-02-26 052120 Screenshot 2026-02-26 052146 Screenshot 2026-02-26 052250 Screenshot 2026-02-26 061231 Screenshot 2026-02-26 061253 Screenshot 2026-02-26 061826 Screenshot 2026-02-26 061844 Screenshot 2026-02-26 062216 Screenshot 2026-02-26 062301 Screenshot 2026-02-26 063341 Screenshot 2026-02-26 063401 Screenshot 2026-02-26 065230 Screenshot 2026-02-26 065249 Screenshot 2026-02-26 072809 Screenshot 2026-02-26 072815 Screenshot 2026-02-26 075848 Screenshot 2026-02-26 075853 Screenshot 2026-02-26 083458 Screenshot 2026-02-26 083515 Screenshot 2026-02-26 085546 Screenshot 2026-02-26 085614 Screenshot 2026-02-26 090653 Screenshot 2026-02-26 090711 Screenshot 2026-02-26 092937 Screenshot 2026-02-26 092954 Screenshot 2026-02-26 094928 Screenshot 2026-02-26 094952 Screenshot 2026-02-26 095815 Screenshot 2026-02-26 095822 Screenshot 2026-02-26 100447 Screenshot 2026-02-26 100520 Screenshot 2026-02-26 102754 Screenshot 2026-02-26 102801 Screenshot 2026-02-26 103740 Screenshot 2026-02-26 103753 Screenshot 2026-02-26 110953 Screenshot 2026-02-26 111008 Screenshot 2026-02-26 111244 Screenshot 2026-02-26 111300

@vercel
Copy link
Copy Markdown

vercel bot commented Feb 26, 2026

@nur-hasin is attempting to deploy a commit to the Om Roy's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Copy Markdown

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

@omroy07 omroy07 merged commit b806579 into omroy07:main Feb 26, 2026
2 of 5 checks passed
@github-actions
Copy link
Copy Markdown

🎉 Congrats @nur-hasin on getting your PR merged! 🙌
Thanks for the contribution — looking forward to more from you 🚀

@nur-hasin
Copy link
Copy Markdown
Contributor Author

nur-hasin commented Feb 26, 2026

Hi @omroy07, my PR has been merged but is currently labeled only for ECWoC26. I'm also a participant in SWoC26 and forgot to mention both programs earlier. Would it be possible to add the SWoC26 label as well? Thank you.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[ENHANCEMENT]: Replace Theme Toggle with Single Animated Icon (Sun ↔ Moon)

2 participants