| 1 | /** |
| 2 | * MAPS Connect - Modo oscuro / claro |
| 3 | * Guarda la preferencia en localStorage y aplica la clase "dark-mode" |
| 4 | * sobre el elemento <html>. Cualquier página puede leer/alternar usando Tema. |
| 5 | */ |
| 6 | const Tema = { |
| 7 | KEY: 'tema-maps', |
| 8 | OSCURO: 'oscuro', |
| 9 | |
| 10 | activo() { |
| 11 | return document.documentElement.classList.contains('dark-mode'); |
| 12 | }, |
| 13 | |
| 14 | /** Aplica el tema guardado al <html>. Devuelve true si quedó oscuro. |
| 15 | * Por defecto el tema es claro; el modo oscuro solo se activa |
| 16 | * cuando el usuario lo elige explícitamente. */ |
| 17 | aplicar() { |
| 18 | const guardado = localStorage.getItem(this.KEY); |
| 19 | const oscuro = guardado === this.OSCURO; |
| 20 | this.set(oscuro); |
| 21 | return oscuro; |
| 22 | }, |
| 23 | |
| 24 | set(oscuro) { |
| 25 | document.documentElement.classList.toggle('dark-mode', oscuro); |
| 26 | const icono = document.documentElement.querySelector('[data-tema-icono]'); |
| 27 | if (icono) icono.textContent = oscuro ? '🌙' : '☀️'; |
| 28 | }, |
| 29 | |
| 30 | /** Alterna y guarda. Devuelve el nuevo estado (true = oscuro). */ |
| 31 | alternar() { |
| 32 | const nuevo = !this.activo(); |
| 33 | this.set(nuevo); |
| 34 | try { |
| 35 | localStorage.setItem(this.KEY, nuevo ? this.OSCURO : 'claro'); |
| 36 | } catch (e) { |
| 37 | // almacenamiento no disponible; solo se aplica en esta sesión. |
| 38 | } |
| 39 | return nuevo; |
| 40 | } |
| 41 | }; |
| 42 | |
| 43 | // Se aplica en cuanto se carga el script (evita parpadeo al pintar). |
| 44 | (globalThis.__MAPS_TEMA_APLICADO__ || (() => { Tema.aplicar(); globalThis.__MAPS_TEMA_APLICADO__ = true; }))(); |