ParkerTenBroeck/ParkerTenBroeck.github.io
1
0
Fork 0
mirror of https://github.com/ParkerTenBroeck/ParkerTenBroeck.github.io.git synced 2026-06-06 21:14:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

added theme button

Browse source
This commit is contained in:
Parker TenBroeck 2026-01-22 20:32:05 -05:00
parent 8a91886d68
commit 9c49d33cf7
4 changed files with 139 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

58
templates/partials/header.html
View file

@ -8,4 +8,60 @@
<a href="{{ get_url(path='@/pictures/_index.md') }}">Pictures</a>
<a href="{{ get_url(path='tags') }}">Tags</a>
<a href="{{ get_url(path='category') }}">Categories</a>
</nav>
<button
class="theme-toggle"
type="button"
aria-label="Toggle theme"
aria-pressed="false"
>
<!-- Sun (light) -->
<svg class="icon icon-sun" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M12 18a6 6 0 1 0 0-12a6 6 0 0 0 0 12Zm0-16v2m0 16v2M4 12H2m20 0h-2M5.64 5.64 4.22 4.22m15.56 15.56 1.42 1.42M18.36 5.64l1.42-1.42M4.22 19.78l1.42-1.42"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
<!-- Moon (dark) -->
<svg class="icon icon-moon" viewBox="1 1 24 20" aria-hidden="true">
<path
d="M21 14.5A8.5 8.5 0 0 1 9.5 3a7 7 0 1 0 11.5 11.5Z"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
/>
</svg>
</button>
</nav>
<script>
(function setupThemeToggle() {
const root = document.documentElement;
const btn = document.querySelector(".theme-toggle");
const mql = window.matchMedia("(prefers-color-scheme: dark)");
const systemTheme = () => (mql.matches ? "dark" : "light");
const getTheme = () => localStorage.theme ?? root.dataset.theme ?? systemTheme();
const applyTheme = (theme, { manual = false } = {}) => {
root.dataset.theme = theme;
localStorage.theme = theme;
btn.setAttribute("aria-pressed", theme === "dark" ? "true" : "false");
};
document.documentElement.classList.add("no-theme-transition");
applyTheme(getTheme());
requestAnimationFrame(() => {
document.documentElement.classList.remove("no-theme-transition");
});
btn.addEventListener("click", () => {
const next = getTheme() === "dark" ? "light" : "dark";
applyTheme(next);
});
})();
</script>