color-scheme: dark light; and user enabled theme change with JS

color-scheme: dark light;

html {
  color-scheme: dark light;
}

        html[data-theme="light"] {
            background-color: white;
            color: black;
        }

        html[data-theme="dark"] {
            background-color: black;
            color: white;
        }

// Detect the user's preferred color scheme
        var prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;

        // Set the initial theme
        var currentTheme = prefersDarkScheme ? "dark" : "light";
        document.html.setAttribute("data-theme", currentTheme);

        // Add a listener for the button click
        document.getElementById("theme-switcher").addEventListener("click", function() {
            // Toggle the color scheme
            currentTheme = currentTheme === "dark" ? "light" : "dark";
            document.html.setAttribute("data-theme", currentTheme);
        });