Skip to content

Comments

Add sun/moon theme toggle button to nav#44

Merged
brunoborges merged 2 commits intomainfrom
copilot/add-theme-switch-button
Feb 19, 2026
Merged

Add sun/moon theme toggle button to nav#44
brunoborges merged 2 commits intomainfrom
copilot/add-theme-switch-button

Conversation

Copy link
Contributor

Copilot AI commented Feb 19, 2026 •
edited
Loading

Adds a manual dark/light theme toggle button (☀️/🌙) to the nav bar next to the GitHub link, persistent across page loads via localStorage.

CSS (site/styles.css)

  • Added :root[data-theme="light"] and :root[data-theme="dark"] override selectors — allows manual toggle to win over prefers-color-scheme
  • Added .theme-toggle button styles, sharing hover rule with .github-link:hover

JS (site/app.js)

  • initThemeToggle() syncs button emoji to current theme and handles click to toggle + persist to localStorage
  • Button shows ☀️ in dark mode (switch to light) and 🌙 in light mode (switch to dark)

Templates (templates/index.html, templates/slug-template.html)

  • Theme toggle button added to nav after the GitHub icon
  • Inline anti-FOUC script in <head> applies saved theme from localStorage before first render, preventing flash on reload:
<script>
  (function(){var t=localStorage.getItem('theme')||(window.matchMedia('(prefers-color-scheme: light)').matches?'light':'dark');document.documentElement.setAttribute('data-theme',t);})();
</script>

Screenshots

Light Dark
light dark
Original prompt

This section details on the original issue you should resolve

<issue_title>Add button to switch dark/light theme</issue_title>
<issue_description>Place button on top of website next to the GitHub link to the repo. Use a sun/moon emoji</issue_description>

Comments on the Issue (you are @copilot in this section)

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot AI changed the title [WIP] Add button to switch dark/light theme Add sun/moon theme toggle button to nav Feb 19, 2026
@brunoborges brunoborges marked this pull request as ready for review February 19, 2026 16:48
@brunoborges brunoborges merged commit b9b7f90 into main Feb 19, 2026
@github-actions github-actions bot mentioned this pull request Feb 19, 2026
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@brunoborges brunoborges

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add button to switch dark/light theme

2 participants

@brunoborges