Skip to content

Conversation

kalyaniugale
Copy link
Contributor

Which issue does this PR close?


Rationale for this change

The Contact page already included dark-mode styles ([data-bs-theme="dark"] and body.dark) but had no UI to switch themes. Adding a small, unobtrusive toggle improves accessibility and user control, and persists the preference across sessions.


What changes are included in this PR?

  • contact.html

    • Added a Theme Toggle button to the navbar (uses Bootstrap Icons).

    • Added a small theme management script that:

      • toggles data-bs-theme between light and dark
      • syncs body.dark (to activate existing contact.css dark rules)
      • persists choice in localStorage
      • calls the existing updatelogo() so the footer logo swaps with the theme
    • No structural or styling changes beyond the above.

Implementation notes

  • Initial theme is chosen from localStorage (if set) or falls back to OS preference (prefers-color-scheme), then to light.
  • Toggle button icon/label auto-update (bi-moon-starsbi-sun, “Dark” ↔ “Light”).
  • The script is self-contained and only touches the Contact page.

Are these changes tested?

Manual verification:

  • ✅ Initial load respects saved preference in localStorage.
  • ✅ If no saved preference, initial theme follows OS (prefers-color-scheme) fallback.
  • ✅ Toggling switches both [data-bs-theme] and body.dark.
  • ✅ Footer logo updates via updatelogo().
  • ✅ Works with existing Bootstrap 5.3.6 + Bootstrap Icons CDN.
  • ✅ No console errors when footer isn’t yet injected (guarded updatelogo() call).

Are there any user-facing changes?

  • Yes. A new Theme button appears on the Contact page navbar:

    • Light/Dark theme can be toggled.
    • Preference is remembered across visits.
    • No layout or content changes otherwise.

No breaking changes.


Screenshots

image

Copy link

github-actions bot commented Oct 1, 2025

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. 🙌🏼

Copy link

netlify bot commented Oct 1, 2025

Deploy Preview for growcraftt ready!

Name Link
🔨 Latest commit 5c397c8
🔍 Latest deploy log https://app.netlify.com/projects/growcraftt/deploys/68df7f233d89ce0008503da5
😎 Deploy Preview https://deploy-preview-840--growcraftt.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@gyanshankar1708
Copy link
Owner

@kalyaniugale Ressolve conflict

@gyanshankar1708 gyanshankar1708 merged commit 70877b0 into gyanshankar1708:master Oct 3, 2025
4 checks passed
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.

Light mode toggle not available on Contact page
2 participants