Add theme toggle (light/dark) to Contact page navbar with persistent preference #840
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Which issue does this PR close?
Rationale for this change
The Contact page already included dark-mode styles (
[data-bs-theme="dark"]
andbody.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:
data-bs-theme
betweenlight
anddark
body.dark
(to activate existingcontact.css
dark rules)localStorage
updatelogo()
so the footer logo swaps with the themeNo structural or styling changes beyond the above.
Implementation notes
localStorage
(if set) or falls back to OS preference (prefers-color-scheme
), then to light.bi-moon-stars
↔bi-sun
, “Dark” ↔ “Light”).Are these changes tested?
Manual verification:
localStorage
.prefers-color-scheme
) fallback.[data-bs-theme]
andbody.dark
.updatelogo()
.updatelogo()
call).Are there any user-facing changes?
Yes. A new Theme button appears on the Contact page navbar:
No breaking changes.
Screenshots