Live
<p> <button id="autoSwitch" type="button" onclick="switchAuto()">Auto</button> <button id="lightSwitch" type="button" onclick="switchLight()">Light</button> <button id="darkSwitch" type="button" onclick="switchDark()">Dark</button></p>
Live
x
html { color-scheme: light dark;}p { width: max-content; margin: 3rem auto;}
Live
xxxxxxxxxx20
const html = document.querySelector("html");const mode = localStorage.getItem("mode");if (mode === "light") switchLight();if (mode === "dark") switchDark();function switchAuto() { html.style.setProperty("color-scheme", "light dark"); localStorage.removeItem("mode");}function switchLight() { html.style.setProperty("color-scheme", "light"); localStorage.setItem("mode", "light");}function switchDark() { html.style.setProperty("color-scheme", "dark"); localStorage.setItem("mode", "dark");}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.