Quisiera poder escribir en un div cuál tema está en uso actualmente con Javascript:
Si el modo oscuro o claro es por primera vez, entonces sería el del navegador o el del teléfono.
O sino, el cambio del usuario con un botón.
Esto es lo quiero lograr
const sistemaNegro = window.matchMedia("(prefers-color-scheme: dark)");
const sistemaClaro = window.matchMedia("(prefers-color-scheme: light)");
if(sistemaClaro.matches) {
nombreTema.textContent = "Sistema claro"
} else if(sistemaNegro.matches) {
nombreTema.textContent = "Sistema oscuro"
}
Y esto es mi codigo para el cambio del usuario
window.setUserTheme = function(newTheme) {
document.documentElement.setAttribute("data-tema", newTheme);
localStorage.setItem("theme", newTheme);
if(newTheme == "oscuro") {
nombreTema.textContent = "Mi tema oscuro"
} else if(newTheme == "claro") {
nombreTema.textContent = "Mi tema claro"
}
};
Estos dos códigos quisiera unificar en una sola función, pero no sé dónde ubicar.
Mi codigo completo:
const userTheme = localStorage.getItem("theme");
const sistemaNegro = window.matchMedia("(prefers-color-scheme: dark)");
const sistemaClaro = window.matchMedia("(prefers-color-scheme: light)");
const nombreTema = document.getElementById("nombreTema");
const botonOscuro = document.getElementById("modoOscuro");
const botonClaro = document.getElementById("modoClaro");
if(userTheme === "dark" || (!userTheme && sistemaNegro.matches)) {
setTheme("dark");
}
sistemaNegro.addEventListener("change", function (e) {
if(!localStorage.getItem("theme")) {
setTheme(e.matches ? "dark" : "light");
}
});
function setTheme(newTheme) {
document.documentElement.setAttribute("data-tema", newTheme);
};
// SIN FUNCIONAR CORRECTAMENTE
/*
if(sistemaClaro.matches) {
nombreTema.textContent = "Sistema claro"
} else if(sistemaNegro.matches) {
nombreTema.textContent = "Sistema oscuro"
}
*/
window.setUserTheme = function (newTheme) {
document.documentElement.setAttribute("data-tema", newTheme);
localStorage.setItem("theme", newTheme);
if(newTheme == "oscuro") {
nombreTema.innerHTML = `
<div class="titulo">Mi tema oscuro <span class="bi-moon-fill"></span></div
<div class="subtitulo textoPeque">Seleccionaste el modo oscuro. Éste sera por defecto ahora</div>
`;
} else if(newTheme == "claro") {
nombreTema.innerHTML = `
<div class="titulo">Mi tema claro <span class="bi-sun-fill"></span></div>
<div class="subtitulo textoPeque">Seleccionaste el modo claro. Sera por defecto ahora</div>
`;
}
};
function modoOscuro() {
setUserTheme("oscuro");
};
function modoClaro() {
setUserTheme("claro");
};
botonOscuro.addEventListener("click", modoOscuro);
botonClaro.addEventListener("click", modoClaro);
:root[data-tema="oscuro"] {
--body: #000
}
:root[data-tema="claro"] {
--body: #fff
}
body {
background-color: var(--body)
}
<html data-tema="claro">
<body>
<div id="nombreTema">Activar temas</div>
<button class="btn btn-sm btn-dark modoOscuro bi-moon-fill" id="modoOscuro">Oscuro</button>
<button class="btn btn-sm btn-light modoClaro bi-sun-fill" id="modoClaro">Claro</button>
</body>
</html>
window.matchMedia
te da la del sistema....no entiendo el problema en el cual necesitas ayuda :S