{{- $iconHeight := .iconHeight | default 20 -}} {{- $class := .class | default
"hx:p-2" -}}

<button
    type="button"
    aria-label="Toggle theme"
    class="hx:cursor-pointer hx:rounded-md hx:hover:bg-gray-100 hx:dark:hover:bg-neutral-800 hx:transition-colors {{ $class }}"
    onclick="
        (function () {
            var h = document.documentElement;
            var n = h.classList.contains('dark') ? 'light' : 'dark';
            setTheme(n);
            localStorage.setItem('color-theme', n);
        })()
    "
>
    <span class="theme-toggle-dark">
        {{- partial "utils/icon.html" (dict "name" "sun" "attributes" (printf
        `height=%d` $iconHeight)) -}}
    </span>
    <span class="theme-toggle-light">
        {{- partial "utils/icon.html" (dict "name" "moon" "attributes" (printf
        `height=%d` $iconHeight)) -}}
    </span>
</button>