const themeKey = 'prefers-color-scheme';
    const setTheme = (theme, save) => {
        const d = document.documentElement;
        d.classList.remove('light', 'dark');
        d.classList.add(theme);
        d.style.setProperty('--color-scheme', theme);
        if (save) localStorage.setItem(themeKey, theme);
    };

    window.PrefersColorScheme = {
        has: () => !!localStorage.getItem(themeKey),
        get: () => {
            const theme = localStorage.getItem(themeKey);
            if (theme === 'light' || theme === 'dark') return theme;
            if (window.matchMedia) {
                if (window.matchMedia('(prefers-color-scheme: light)').matches) return 'light';
                if (window.matchMedia('(prefers-color-scheme: dark)').matches) return 'dark';
            }
            return 'light';
        },
        set: theme => {
            switch (theme) {
                case 'light':
                case 'dark':
                    return setTheme(theme, true);
                default:
                    localStorage.removeItem(themeKey);
                    setTheme(PrefersColorScheme.get(), false);
            }
        },
        toggle: () => {
            let theme = PrefersColorScheme.get();
            if (theme === 'light') theme = 'dark';
            else if (theme === 'dark') theme = 'light';
            setTheme(theme, true);
            document.querySelectorAll('#prefers-color-scheme-setting [type=radio]').forEach(input => input.checked = input.value === theme);
        }
    };

    setTheme(PrefersColorScheme.get());

// main.scss
$theme : 'light';
@import 'theme';

$theme : 'dark';
@import 'theme';

// theme.scss
html.#{$theme} {
--main-background : #{theme(#f7f7f7, #080808)};
}