hugo-theme-stack/layouts/partials/head/colorScheme.html

{{- with .Site.Params.colorScheme -}}
    {{/* If toggle is disabled, set color to default */}}
    {{- $defaultColorScheme := default "default" .default -}}
    {{- if not .toggle -}}
        <script>
            (function() {
                const colorSchemeKey = 'StackColorScheme';
                localStorage.setItem(colorSchemeKey, {{ $defaultColorScheme }});
            })();
        </script>
    {{- end -}}
{{- end -}}
<script>
    (function() {
        const colorSchemeKey = 'StackColorScheme';
        const colorSchemeItem = localStorage.getItem(colorSchemeKey);
        const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;

        if (colorSchemeItem == 'dark' || !colorSchemeItem && supportDarkMode || colorSchemeItem === 'auto' && supportDarkMode) {
            /**
             * Enable dark mode if:
             * 1. If dark mode is set already (in local storage)
             * 2. No color scheme preference is set in localstorage, and user's browser indicates preference for dark mode
             * 3. Auto mode & prefere color scheme is dark
             */
            document.body.dataset.scheme = 'dark';
        } else {
            document.body.dataset.scheme = 'light';
        }
    })();
</script>