He implementado un interruptor de modo oscuro en mi sandbox de Dev usando el siguiente JavaScript (y el botón apropiado):-
btn = document.querySelector('.squirrel-darkmode-toggle');
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
document.body.classList.toggle("dark-theme");
} else if (currentTheme == "light") {
document.body.classList.toggle("light-theme");
}
btn.addEventListener("click", function () {
if (prefersDarkScheme.matches) {
document.body.classList.toggle("light-theme");
var theme = document.body.classList.contains("light-theme")
? "light"
: "dark";
} else {
document.body.classList.toggle("dark-theme");
var theme = document.body.classList.contains("dark-theme")
? "dark"
: "light";
}
localStorage.setItem("theme", theme);
});
Todo esto funciona bien, pero el CSS que he usado para hacerlo, probablemente debido a mi insuficiencia de conocimiento/comprensión, me exigió que copiara los valores de color del tema predeterminado.
body {
--wp--preset--color--base: #FFFFFF !important;
--wp--preset--color--contrast: #000000 !important;
--wp--preset--color--primary: #4eaee5 !important;
--wp--preset--color--secondary: #005a8e !important;
--wp--preset--color--tertiary: #F6F6F6 !important;
}
body.dark-theme {
--wp--preset--color--base: #202124 !important;
--wp--preset--color--contrast: #e8eaed !important;
--wp--preset--color--primary: #e3cbc0 !important;
--wp--preset--color--secondary: #876c3a !important;
--wp--preset--color--tertiary: #303134 !important;
}
Esto funciona, pero no parece la mejor/correcta forma de hacer esto. Si el tema se actualiza o cambia, el CSS no necesariamente reflejará eso. ¿Hay una mejor manera de hacer esto, por ejemplo, tal vez seleccionando/intercambiando el estilo del tema a través de JavaScript?