auto switch theme

[Paul-16098]

document:
  head: |
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script id="auto-switch-theme">
    "use strict";
    function get_theme() {
    let theme = "light";
    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        theme = "dark";
    }
    console.debug("get_theme: ", theme);
    return theme;
    }
    window
    .matchMedia("(prefers-color-scheme: dark)")
    .addEventListener("change", set_theme);
    function set_theme() {
    document.cookie = `theme=default-${get_theme()}`;
    const theme_style = document.querySelector("#theme-style");
    $.post({
        url: `http://localhost:8080/api/set-theme/default-${get_theme()}`,
        dataType: "html",
        success: function (data) {
            theme_style.innerHTML = data;
        },
    });
    console.debug("set_theme: done");
    }
    set_theme();

    </script>
  

theme:
  presets:
    default-dark:
      ...
    default-light:
      ...

[bluewalk]

Nice idea, didn't think of doing it this way.
I have updated the script so it doesn't require jquery and use most of the code glance uses to switch themes.

document:
  head: |
    <script id="auto-switch-theme">
        "use strict";
    
        const get_theme = () =>
            window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
    
        const set_theme =() => {
            let theme = `default-${get_theme()}`;
    
            const themeStyleElem = document.querySelector("#theme-style");
    
            fetch(`${pageData.baseURL}/api/set-theme/${theme}`, {
                method: "POST",
            })
            .then(response => response.text())
            .then(newThemeStyle => {
                themeStyleElem.innerHTML = newThemeStyle;
                document.documentElement.setAttribute("data-theme", theme);
                document.documentElement.setAttribute("data-scheme", get_theme());
    
                pageData.theme = theme;
            });
        }
    
        (function () {
            window.matchMedia("(prefers-color-scheme: dark)")
                .addEventListener("change", set_theme);
    
            set_theme();
        })();
    </script>