bird.tacowolf.net/themes/avian/layouts/partials/header.html

<header class="mx-auto w-screen max-w-screen-2xl px-6 sm:px-7 xl:px-8 2xl:px-10 py-6">
    {{/* CSS functionality for menu toggle */}}
    <style type="text/css">
        input#nav-toggle:checked~label#show-button {
            display: none;
        }

        input#nav-toggle:checked~label#hide-button {
            display: flex;
        }

        input#nav-toggle:checked~#nav-menu {
            display: block;
        }
    </style>

    <nav class="flex items-center justify-between flex-wrap">
        <a href="{{ .Site.Home.Permalink }}" class="flex items-center text-slate-800 dark:text-slate-200 font-bold">
            {{ .Site.Title }}
        </a>

        <input id="nav-toggle" type=checkbox class="hidden">
        <label id="show-button" for="nav-toggle"
            class="flex items-center sm:hidden text-slate-600 dark:text-slate-400 hover:text-sky-500">
            <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <title>Menu Open</title>
                <path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z" />
            </svg>
        </label>
        <label id="hide-button" for="nav-toggle" class="items-center hidden text-gray-700 hover:text-blue-500">
            <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <title>Menu Close</title>
                <polygon points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"
                    transform="rotate(45 10 10)" />
            </svg>
        </label>

        <ul id="nav-menu" class="sm:flex w-full sm:w-auto hidden mt-2 sm:mt-0 sm:space-x-2">
            {{ with .Site.GetPage "/about" }}
            <li>
                <a href="{{ .Permalink }}" class="hover:text-sky-500 dark:hover:text-sky-500">{{ .Title }}</a>
            </li>
            {{ end }}
            {{ range .Site.Sections }}
            <li>
                <a href="{{ .Permalink }}" class="hover:text-sky-500 dark:hover:text-sky-500">{{ .Title }}</a>
            </li>
            {{ end }}
            <li>
                <label class="sr-only">Theme</label>
                <button type="button" id="theme-toogle" onclick="changeTheme()"
                    class="py-1 hover:text-sky-500 dark:hover:text-sky-500">
                    <svg id="theme-toggle-dark" class="w-4 h-4 hidden" fill="currentColor" viewBox="0 0 32 32"
                        xmlns="http://www.w3.org/2000/svg">
                        <circle cx="16" cy="16" r="15" />
                    </svg>
                    <svg id="theme-toggle-light" class="w-4 h-4 hidden" fill="currentColor" viewBox="0 0 32 32"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M16,1C24.279,1 31,7.721 31,16C31,24.279 24.279,31 16,31C7.721,31 1,24.279 1,16C1,7.721 7.721,1 16,1ZM16,5C9.929,5 5,9.929 5,16C5,22.071 9.929,27 16,27C22.071,27 27,22.071 27,16C27,9.929 22.071,5 16,5Z" />
                    </svg>
                    <svg id="theme-toggle-system" class="w-4 h-4 hidden" fill="currentColor" viewBox="0 0 32 32"
                        xmlns="http://www.w3.org/2000/svg">
                        <g>
                            <path
                                d="M16,1C24.279,1 31,7.721 31,16C31,24.279 24.279,31 16,31C7.721,31 1,24.279 1,16C1,7.721 7.721,1 16,1ZM16,5C9.929,5 5,9.929 5,16C5,22.071 9.929,27 16,27C22.071,27 27,22.071 27,16C27,9.929 22.071,5 16,5Z" />
                            <path d="M16,31C7.721,31 1,24.279 1,16C1,7.721 7.721,1 16,1L16,31Z" />
                        </g>
                    </svg>
                </button>
            </li>
        </ul>
    </nav>

    <script>
        var themeDarkIcon = document.getElementById("theme-toggle-dark");
        var themeLightIcon = document.getElementById("theme-toggle-light");
        var themeSystemIcon = document.getElementById("theme-toggle-system");

        function setThemeVisibility(themeParameter) {
            switch (themeParameter) {
                case "system":
                    themeSystemIcon.classList.toggle("hidden");
                    break;
                case "light":
                    themeLightIcon.classList.toggle("hidden");
                    break;
                case "dark": themeDarkIcon.classList.toggle("hidden");
            }
        }

        function changeTheme() {
            if (themeSystemIcon.classList.contains("hidden") == false) {
                themeSystemIcon.classList.toggle("hidden");
                themeLightIcon.classList.toggle("hidden");
                localStorage.setItem("color-theme", "light");
                document.documentElement.classList.remove('dark');
            } else if (themeLightIcon.classList.contains("hidden") == false) {
                themeLightIcon.classList.toggle("hidden");
                themeDarkIcon.classList.toggle("hidden");
                localStorage.setItem("color-theme", "dark");
                document.documentElement.classList.add('dark');
            } else if (themeDarkIcon.classList.contains("hidden") == false) {
                themeDarkIcon.classList.toggle("hidden");
                themeSystemIcon.classList.toggle("hidden");
                localStorage.removeItem("color-theme");
                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                    document.documentElement.classList.add('dark');
                }
            } else {
                /* default fallback to system preference */
                themeSystemIcon.classList.remove("hidden");
                themeLightIcon.classList.add("hidden");
                themeDarkIcon.classList.add("hidden");
                localStorage.removeItem("color-theme");
                if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                    document.documentElement.classList.add('dark');
                }
            }
        }

        function setupThemeIndicator() {
            /* load theme variable from local storage */
            if (localStorage.getItem("color-theme") === "dark") {
                var themeParameter = "dark";
            } else if (localStorage.getItem("color-theme") === "light") {
                var themeParameter = "light";
            } else {
                var themeParameter = "system";
            }

            setThemeVisibility(themeParameter);
        }

        window.onload = setupThemeIndicator;
    </script>
</header>