ParkerTenBroeck.github.io/templates/partials/header.html

<div class="title">
    <a href="{{config.base_url}}">Hey! it's Grey</a>
</div>
<nav>
    <a href="{{ get_url(path='@/blog/_index.md') }}">Posts</a>
    {# <a href="{{ get_url(path='@/projects/_index.md') }}">Projects</a>
    <a href="{{ get_url(path='@/crafts/_index.md') }}">Crafts</a> #}
    <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>
    <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>