light/dark color scheme toggle #7378

moellep · 2024-11-25T16:32:30Z

Apps which support the dark color scheme should have a toggle where the system default can be overridden. The dark model config should be changed to set the color-scheme value like the example below:

<html lang="en" data-color-scheme="dark">
<head>
  <style type="text/css">
[data-color-scheme="dark"] {
  color-scheme: dark;
}
[data-color-scheme="light"] {
  color-scheme: light;
}
  </style>
</head>
<body>
  <div>
    <button id="light">light</button>
    <button id="dark">dark</button>
    <button id="system">system</button>
    <div style="margin-top: 3ex">
      <input type="datetime-local" required />
      <br><br>
      <input type="text" placeholder="dummy input" />
    </div>
  </div>
  <script>
    (() => {
        let scheme = "system";
        function systemColorScheme() {
            if (window.matchMedia) {
                return window.matchMedia('(prefers-color-scheme: dark)').matches
                     ? "dark" : "light";
            }
            return "light";
        }
        function setColorScheme(newScheme) {
            scheme = newScheme;
            document.documentElement.setAttribute(
                "data-color-scheme",
                scheme === "system" ? systemColorScheme() : scheme,
            );
        }
        if (window.matchMedia) {
            // watch for global changes to color scheme
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
                console.log('CHANGED, current pref: ', scheme);
                if (scheme === "system") {
                    setColorScheme("system");
                }
            });
        }
        setColorScheme(scheme);
        document.querySelector("#light").addEventListener("click", () => {
            setColorScheme("light");
        });
        document.querySelector("#dark").addEventListener("click", () => {
            setColorScheme("dark");
        });
        document.querySelector("#system").addEventListener("click", () => {
            setColorScheme("system");
        });
    })();
  </script>
</body>
</html>

robnagler · 2024-11-25T16:40:37Z

Looks good to me. id's are in a global flat space. These should be prefixed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

light/dark color scheme toggle #7378

light/dark color scheme toggle #7378

moellep commented Nov 25, 2024

robnagler commented Nov 25, 2024

light/dark color scheme toggle #7378

light/dark color scheme toggle #7378

Comments

moellep commented Nov 25, 2024

robnagler commented Nov 25, 2024