28 lines
1.2 KiB
JavaScript
28 lines
1.2 KiB
JavaScript
// tema.js — Modo claro u oscuro. Va en <head>, antes de pintar nada, para que la página no
|
|
// parpadee en claro al abrirla. La elección («claro», «oscuro» o «auto» = como el sistema) se
|
|
// guarda en este navegador; app.js pone el botón que la cambia.
|
|
(function () {
|
|
const CLAVE = "caudal-tema";
|
|
const sistema = window.matchMedia("(prefers-color-scheme: dark)");
|
|
let elegido = "auto";
|
|
try { elegido = localStorage.getItem(CLAVE) || "auto"; } catch (e) { /* sin almacenamiento */ }
|
|
|
|
const aplicar = () => {
|
|
const oscuro = elegido === "oscuro" || (elegido === "auto" && sistema.matches);
|
|
document.documentElement.dataset.tema = oscuro ? "oscuro" : "claro";
|
|
// En la aplicación de Android, que las barras del teléfono vayan a juego
|
|
try { if (window.CaudalAndroid && window.CaudalAndroid.tema) window.CaudalAndroid.tema(oscuro); } catch (e) { /* no pasa nada */ }
|
|
};
|
|
window.caudalTema = {
|
|
elegido: () => elegido,
|
|
elegir(t) {
|
|
elegido = t;
|
|
try {
|
|
if (t === "auto") localStorage.removeItem(CLAVE); else localStorage.setItem(CLAVE, t);
|
|
} catch (e) { /* sin almacenamiento: vale hasta cerrar la página */ }
|
|
aplicar();
|
|
},
|
|
};
|
|
sistema.addEventListener("change", aplicar);
|
|
aplicar();
|
|
})();
|