// https://web.dev/building-a-theme-switch-component/
// const storageKey = 'theme-preference'

// const getColorPreference = () => {
//     if (localStorage.getItem(storageKey))
//         return localStorage.getItem(storageKey)
//     else
//         return window.matchMedia('(prefers-color-scheme: dark)').matches
//             ? 'dark'
//             : 'light'
// }

// const setPreference = () => {
//     localStorage.setItem(storageKey, theme.value)
//     reflectPreference()
// }

// window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({matches:isDark}) => {
//   theme.value = isDark ? 'dark' : 'light'
//   setPreference()
// })
// https://lukelowrey.com/css-variable-theme-switcher/
var toggle = document.getElementById("theme-toggle");

var storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
if (storedTheme)
    document.documentElement.setAttribute('data-theme', storedTheme)


toggle.onclick = function() {
    var currentTheme = document.documentElement.getAttribute("data-theme");
    var targetTheme = "light";

    if (currentTheme === "light") {
        targetTheme = "dark";
    }

    document.documentElement.setAttribute('data-theme', targetTheme)
    localStorage.setItem('theme', targetTheme);
};
