hugo-theme-anubis2/layouts/partials/theme-switcher.html

{{ $style := "light-without-switcher" }}
{{ if and (isset site.Params "style") (ne site.Params.style "") }}
{{ $style = site.Params.style | lower }}
{{ end }}

{{ if not (in (slice "light-without-switcher" "dark-without-switcher") $style) }}
{{ if ne "auto-without-switcher" $style }}
<div class="theme-switcher">
    {{ partial "font-awesome.html" (dict "iconName" "theme-light" "custom" false) }}
</div>
{{ end }}

<script>
    const STORAGE_KEY = 'user-color-scheme'
    const defaultTheme = {{ $style }}

    let currentTheme
    let switchButton
    let autoDefinedScheme = window.matchMedia('(prefers-color-scheme: dark)')

    const autoChangeScheme = e => {
        currentTheme = e.matches ? 'dark' : 'light'
        document.documentElement.setAttribute('data-theme', currentTheme)
    }

    document.addEventListener('DOMContentLoaded', function () {
        switchButton = document.querySelector('.theme-switcher')
        currentTheme = detectCurrentScheme()
        
        if (currentTheme === 'auto') {
            autoChangeScheme(autoDefinedScheme);
            autoDefinedScheme.addListener(autoChangeScheme);
        } else {
            document.documentElement.setAttribute('data-theme', currentTheme)
        }
    
        if (switchButton) {
            switchButton.addEventListener('click', switchTheme, false)
        }

        showContent()
    })

    function detectCurrentScheme() {
        if (localStorage !== null && localStorage.getItem(STORAGE_KEY)) {
            return localStorage.getItem(STORAGE_KEY)
        }
        if (defaultTheme) {
            return defaultTheme
        }
        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }

    function switchTheme(e) {
        currentTheme = (currentTheme === 'dark') ? 'light' : 'dark';
        if (localStorage) localStorage.setItem(STORAGE_KEY, currentTheme);
        document.documentElement.setAttribute('data-theme', currentTheme);
    }

    function showContent() {
        document.body.style.visibility = 'visible';
        document.body.style.opacity = 1;
    }
</script>
{{ end }}