praiadeseselle/site/templates/js/main.js

const selector_tema = document.querySelector("#selector_tema");
const preferencia_escura = window.matchMedia("(prefers-color-scheme: dark)");

function getCookie()
{
    let name = "tema=";

    let spli = document.cookie.split(';');

    for(var j = 0; j < spli.length; j++)
    {
        let char = spli[j];
        
        while (char.charAt(0) == ' ')
        {
            char = char.substring(1);
        }
        if(char.indexOf(name) == 0)
        {
            return char.substring(name.length, char.length);
        }
    }
    return "";
}

function checkCookie()
{
    var tema = getCookie();

    if(tema != "")
    {
        switch(tema)
        {
            case 'dark':
                selector_tema.checked = true;
                document.body.classList.add("dark");
                document.body.classList.remove("light");
                break;
        
            case 'light':
                document.body.classList.add("light");
                document.body.classList.remove("dark");
                break;
        }
        document.cookie = "tema=" + tema + ";samesite=lax;path=/";
    }
    else
    {
        if(preferencia_escura.matches)
        {
            selector_tema.checked = true;
            document.body.classList.add("dark");
            document.body.classList.remove("light");
            document.cookie = "tema=dark;samesite=lax;path=/";
        }
    }
}

checkCookie();

selector_tema.addEventListener("change", function()
{
    var tema = '';

    switch(selector_tema.checked)
    {
        case true:
            tema = 'dark';
            document.body.classList.add("dark");
            document.body.classList.remove("light");
            break;
    
        case false:
            tema = 'light';
            document.body.classList.add("light");
            document.body.classList.remove("dark");
            break;
    }
    document.cookie = "tema=" + tema + ";samesite=lax;path=/";
});