44 lines
2.6 KiB
JavaScript
44 lines
2.6 KiB
JavaScript
/* Modo claro u oscuro en las páginas sueltas (actas, cuenta, administración).
|
|
Lee la misma preferencia que el sitio (Material la guarda en localStorage con la
|
|
clave "<scope>.__palette"; scope = extra.scope de mkdocs.yml = "/drogheda/").
|
|
Oscuro por omisión. Va en el <head> de cada página, antes de su hoja de estilo,
|
|
para que no parpadee. Agrega un botón de modo al encabezado de la página. */
|
|
(function () {
|
|
var CLAVE = '/drogheda/.__palette';
|
|
var html = document.documentElement;
|
|
function leer() {
|
|
try { var p = JSON.parse(localStorage.getItem(CLAVE) || 'null'); return p && p.color && p.color.scheme === 'default' ? 'claro' : 'oscuro'; }
|
|
catch (e) { return 'oscuro'; }
|
|
}
|
|
function aplicar(modo) { if (modo === 'claro') html.setAttribute('data-tema', 'claro'); else html.removeAttribute('data-tema'); }
|
|
function guardar(modo) {
|
|
// mismo formato que Material: índice 0 = oscuro (slate), 1 = claro (default)
|
|
var p = { index: modo === 'claro' ? 1 : 0, color: { media: '', scheme: modo === 'claro' ? 'default' : 'slate', primary: 'custom', accent: 'custom' } };
|
|
try { localStorage.setItem(CLAVE, JSON.stringify(p)); } catch (e) {}
|
|
}
|
|
aplicar(leer());
|
|
var SOL = '<path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2.8v2.2M12 19v2.2M4.9 4.9l1.6 1.6M17.5 17.5l1.6 1.6M2.8 12H5M19 12h2.2M4.9 19.1l1.6-1.6M17.5 6.5l1.6-1.6"/>';
|
|
var LUNA = '<path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/>';
|
|
function boton() {
|
|
var cab = document.querySelector('header.top');
|
|
if (!cab || cab.querySelector('.hg-modo')) return;
|
|
var b = document.createElement('button');
|
|
b.type = 'button'; b.className = 'hg-modo';
|
|
function pintar() {
|
|
var claro = html.getAttribute('data-tema') === 'claro';
|
|
b.setAttribute('aria-label', claro ? 'Cambiar a modo oscuro' : 'Cambiar a modo claro');
|
|
b.title = b.getAttribute('aria-label');
|
|
b.innerHTML = '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + (claro ? LUNA : SOL) + '</svg>';
|
|
}
|
|
b.addEventListener('click', function () {
|
|
var modo = html.getAttribute('data-tema') === 'claro' ? 'oscuro' : 'claro';
|
|
aplicar(modo); guardar(modo); pintar();
|
|
});
|
|
pintar();
|
|
cab.appendChild(b);
|
|
}
|
|
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boton); else boton();
|
|
// si la persona cambia el modo en otra pestaña del sitio, esta página lo sigue
|
|
window.addEventListener('storage', function (e) { if (e.key === CLAVE) aplicar(leer()); });
|
|
})();
|