/* * A small, deterministic model of seasonal colour and light in Zurich. * Solar coordinates: https://aa.usno.navy.mil/faq/sun_approx * Hour angle and event times: https://gml.noaa.gov/grad/solcalc/solareqns.PDF * Civil twilight uses -6 degrees; sunrise/set use -0.833 degrees. * These are modelled horizons, without terrain or weather observations. * The 72 five-degree colour studies begin at 315 degrees solar longitude. * They are an original artistic calendar, not an exact traditional ko calendar. */ (function (root, factory) { "use strict"; const model = factory(); if (typeof module === "object" && module.exports) module.exports = model; else root.JHAppearanceModel = model; })(typeof globalThis !== "undefined" ? globalThis : this, function () { "use strict"; const DAY = 86400000; const MINUTE = 60000; const J2000 = Date.UTC(2000, 0, 1, 12); const RAD = Math.PI / 180; const LATITUDE = 47.3769; const LONGITUDE = 8.5417; const TIME_ZONE = "Europe/Zurich"; const PHASES = ["first", "morning", "day", "evening", "last", "night"]; const calendar = new Intl.DateTimeFormat("en-CA", { timeZone: TIME_ZONE, year: "numeric", month: "2-digit", day: "2-digit", }); const wrap = (value, period) => ((value % period) + period) % period; const clamp = (value, min, max) => Math.max(min, Math.min(max, value)); // Invalid or unsupported dates use a stable epoch, never the machine's clock. // The USNO coordinate approximation is intended for the years 1800 to 2200. function normaliseDate(value) { let date; try { date = new Date(value instanceof Date ? value.getTime() : value); } catch (_) { date = new Date(NaN); } const valid = Number.isFinite(date.getTime()) && date.getUTCFullYear() >= 1800 && date.getUTCFullYear() <= 2200; return { date: valid ? date : new Date(J2000), valid }; } function localDay(date) { const parts = Object.fromEntries(calendar.formatToParts(date).map(({ type, value }) => [type, value])); return { dateKey: `${parts.year}-${parts.month}-${parts.day}`, midnightUTC: Date.UTC(Number(parts.year), Number(parts.month) - 1, Number(parts.day)), }; } function coordinates(time) { const days = (time - J2000) / DAY; const anomaly = wrap(357.529 + 0.98560028 * days, 360) * RAD; const meanLongitude = wrap(280.459 + 0.98564736 * days, 360); const longitude = wrap(meanLongitude + 1.915 * Math.sin(anomaly) + 0.020 * Math.sin(2 * anomaly), 360); const obliquity = (23.439 - 0.00000036 * days) * RAD; const rightAscension = Math.atan2(Math.cos(obliquity) * Math.sin(longitude * RAD), Math.cos(longitude * RAD)) / RAD; return { longitude, declination: Math.asin(Math.sin(obliquity) * Math.sin(longitude * RAD)), equationMinutes: (wrap(meanLongitude - rightAscension + 180, 360) - 180) * 4, }; } function solarForDay(midnightUTC) { let noon = 720 - 4 * LONGITUDE; for (let i = 0; i < 3; i += 1) { noon = 720 - 4 * LONGITUDE - coordinates(midnightUTC + noon * MINUTE).equationMinutes; } function event(altitude, direction) { let minutes = noon; for (let i = 0; i < 3; i += 1) { const position = coordinates(midnightUTC + minutes * MINUTE); const cosine = (Math.sin(altitude * RAD) - Math.sin(LATITUDE * RAD) * Math.sin(position.declination)) / (Math.cos(LATITUDE * RAD) * Math.cos(position.declination)); const hourAngle = Math.acos(clamp(cosine, -1, 1)) / RAD; minutes = 720 - 4 * LONGITUDE - position.equationMinutes + direction * 4 * hourAngle; } return new Date(midnightUTC + minutes * MINUTE).toISOString(); } return { dawn: event(-6, -1), sunrise: event(-0.833, -1), noon: new Date(midnightUTC + noon * MINUTE).toISOString(), sunset: event(-0.833, 1), dusk: event(-6, 1), }; } function computeSolar(date = new Date()) { const input = normaliseDate(date); return solarForDay(localDay(input.date).midnightUTC); } function getContext(date = new Date()) { const input = normaliseDate(date); const day = localDay(input.date); const solar = solarForDay(day.midnightUTC); const time = input.date.getTime(); const dawn = Date.parse(solar.dawn); const sunrise = Date.parse(solar.sunrise); const sunset = Date.parse(solar.sunset); const dusk = Date.parse(solar.dusk); const third = (sunset - sunrise) / 3; let phase = "night"; if (time >= dawn && time < sunrise) phase = "first"; else if (time >= sunrise && time < sunrise + third) phase = "morning"; else if (time >= sunrise + third && time < sunrise + 2 * third) phase = "day"; else if (time >= sunrise + 2 * third && time < sunset) phase = "evening"; else if (time >= sunset && time < dusk) phase = "last"; const solarLongitude = coordinates(time).longitude; const annualProgress = wrap(solarLongitude - 315, 360) / 360; return { phase, solarLongitude, seasonIndex: Math.floor(annualProgress * 72), annualProgress, solar, dateKey: day.dateKey, timeZone: TIME_ZONE, valid: input.valid, }; } const anchors = [ // Reading surfaces change temperature gently; the artwork carries the // fuller seasonal range: jade, summer water, copper and winter silver. { index: 3, paper: "#f4f5f1", shadow: "#285c50", edge: "#accaba", night: "#101e20", moon: "#a9cdc6" }, { index: 25, paper: "#f5f5ef", shadow: "#1b6261", edge: "#c2cf88", night: "#101e1e", moon: "#c3d4aa" }, { index: 42, paper: "#f6f3ee", shadow: "#865238", edge: "#d9b58e", night: "#121d1f", moon: "#dbc7ad" }, { index: 60, paper: "#f3f4f4", shadow: "#3a516c", edge: "#b1c8d1", night: "#101b21", moon: "#b9cadc" }, ]; function mix(a, b, amount) { return "#" + [1, 3, 5].map((offset) => Math.round( parseInt(a.slice(offset, offset + 2), 16) * (1 - amount) + parseInt(b.slice(offset, offset + 2), 16) * amount, ).toString(16).padStart(2, "0")).join(""); } function seasonPalette(context) { // Adjacent studies share a continuous colour progression, including New Year. const progress = Number.isFinite(context.annualProgress) ? wrap(context.annualProgress, 1) : 0; let index = progress * 72; if (index < anchors[0].index) index += 72; const sequence = [...anchors, { ...anchors[0], index: anchors[0].index + 72 }]; const next = sequence.findIndex((anchor) => anchor.index > index); const a = sequence[Math.max(0, next - 1)]; const b = sequence[next < 0 ? sequence.length - 1 : next]; const amount = a.index === b.index ? 0 : (index - a.index) / (b.index - a.index); const palette = {}; Object.keys(a).filter((key) => key !== "index").forEach((key) => { palette[key] = mix(a[key], b[key], amount); }); return palette; } function paletteFor(context = {}, mode = "system", systemDark = false) { context = context && typeof context === "object" ? context : {}; const s = seasonPalette(context); const actualPhase = PHASES.includes(context.phase) ? context.phase : "day"; const phase = mode === "zurich" ? actualPhase : mode === "day" ? "day" : mode === "night" ? "night" : systemDark ? "night" : "day"; const scheme = phase === "last" || phase === "night" ? "dark" : "light"; let paper = s.paper, ink = "#1c2b2a", muted = "#5b6664", signal = "#284d69"; let shadow = s.shadow, edge = s.edge, middle = mix(shadow, edge, 0.5), angle = "40deg"; if (phase === "first") { paper = mix(s.paper, "#e1e8ec", 0.6); ink = "#213035"; muted = "#586664"; signal = "#365069"; shadow = mix(s.shadow, "#314f67", 0.65); middle = mix(s.edge, "#91b5c3", 0.48); edge = "#d0ded9"; angle = "58deg"; } else if (phase === "morning") { paper = mix(s.paper, "#f8f7f1", 0.22); edge = mix(s.edge, "#ddcfab", 0.12); middle = mix(shadow, edge, 0.47); angle = "70deg"; } else if (phase === "evening") { paper = mix(s.paper, "#efe9df", 0.42); shadow = mix(s.shadow, "#795348", 0.45); edge = "#d4ac79"; middle = mix(shadow, edge, 0.53); angle = "125deg"; } else if (phase === "last") { paper = mix(s.night, "#293339", 0.35); ink = "#efede4"; muted = "#b7bcb6"; signal = "#bdd0d9"; shadow = mix(s.night, s.edge, 0.32); edge = "#e5c09a"; middle = mix(s.edge, "#c19875", 0.5); angle = "115deg"; } else if (phase === "night") { paper = s.night; ink = "#edeee6"; muted = "#abbab5"; signal = "#adc6d7"; shadow = mix(s.night, s.moon, 0.30); edge = s.moon; middle = mix(s.night, s.moon, 0.61); angle = "-38deg"; } const closing = scheme === "dark" ? mix(paper, "#0a1517", 0.32) : s.night; return { scheme, phase, tokens: { "--paper": paper, "--ink": ink, "--muted": muted, "--signal": signal, "--accent": signal, "--hair": mix(paper, ink, 0.23), "--closing-bg": closing, "--closing-fg": "#edeee6", "--closing-muted": "#abbab5", "--closing-rule": mix(closing, "#edeee6", 0.23), "--closing-signal": "#adc6d7", "--method-bg": mix(paper, ink, 0.035), "--method-rule": mix(paper, ink, 0.28), "--art-shadow": shadow, "--art-middle": middle, "--art-edge": edge, "--art-angle": angle, }, }; } return Object.freeze({ getContext, computeSolar, paletteFor }); }); ; /* * Original Swiss seasonal studies, inspired by the Japanese kō calendar. * These artistic titles are neither traditional translations nor live observations. * 72 five-degree solar-longitude slots begin at 315° (approximately 4 February). * Entry 42 (index 41) covers 160–165°: Late warmth, approximately 2–7 September. * Research and attribution: docs/seasonal-light-2026-09-05.md. */ (function (root, factory) { "use strict"; if (typeof module === "object" && module.exports) { module.exports = factory(); } else { root.JHAppearanceCalendar = factory(); } })(typeof globalThis !== "undefined" ? globalThis : this, function () { "use strict"; return Object.freeze([ // 315–330° · Early February { en: "First thaw", de: "Erstes Tauwetter", fr: "Premier dégel" }, { en: "Dark earth", de: "Dunkle Erde", fr: "Terre sombre" }, { en: "Winter light", de: "Winterliches Licht", fr: "Lumière d’hiver" }, // 330–345° · Late February { en: "Meltwater paths", de: "Wege des Schmelzwassers", fr: "Chemins d’eau de fonte" }, { en: "Mist over fields", de: "Nebel über Feldern", fr: "Brume sur les champs" }, { en: "Quiet buds", de: "Stille Knospen", fr: "Bourgeons au repos" }, // 345–360° · Early March { en: "Edges of green", de: "Erstes Grün", fr: "Premières touches de vert" }, { en: "Willow silver", de: "Silber der Weiden", fr: "Argent des saules" }, { en: "Soft ground", de: "Weicher Boden", fr: "Terre souple" }, // 0–15° · Spring equinox { en: "Young light", de: "Junges Licht", fr: "Lumière naissante" }, { en: "Open earth", de: "Offene Erde", fr: "Terre ouverte" }, { en: "Rain on stone", de: "Regen auf Stein", fr: "Pluie sur la pierre" }, // 15–30° · Early April { en: "Pale blossom", de: "Helle Blüten", fr: "Fleurs pâles" }, { en: "Folded leaves", de: "Gefaltete Blätter", fr: "Feuilles pliées" }, { en: "Orchard light", de: "Licht im Obstgarten", fr: "Lumière au verger" }, // 30–45° · Late April { en: "Green shoots", de: "Grüne Triebe", fr: "Pousses vertes" }, { en: "Rain in the grass", de: "Regen im Gras", fr: "Pluie dans l’herbe" }, { en: "Tender shade", de: "Zarter Schatten", fr: "Ombre légère" }, // 45–60° · Early May { en: "Deepening green", de: "Satteres Grün", fr: "Vert plus profond" }, { en: "Meadow light", de: "Licht über Wiesen", fr: "Lumière des prés" }, { en: "Leaf and rain", de: "Blatt und Regen", fr: "Feuille et pluie" }, // 60–75° · Late May { en: "Long evenings", de: "Lange Abende", fr: "Longues soirées" }, { en: "Full leaf", de: "Volles Laub", fr: "Plein feuillage" }, { en: "Leaf shadows", de: "Schatten der Blätter", fr: "Ombres des feuilles" }, // 75–90° · Early June { en: "Warm stone", de: "Warmer Stein", fr: "Pierre tiède" }, { en: "High grass", de: "Hohes Gras", fr: "Hautes herbes" }, { en: "Before the solstice", de: "Vor der Sonnenwende", fr: "Avant le solstice" }, // 90–105° · Summer solstice { en: "Longest light", de: "Längstes Licht", fr: "Lumière la plus longue" }, { en: "Deep shade", de: "Tiefer Schatten", fr: "Ombre profonde" }, { en: "Silver water", de: "Silbernes Wasser", fr: "Eau argentée" }, // 105–120° · Early July { en: "Open sky", de: "Weiter Himmel", fr: "Ciel ouvert" }, { en: "Warm wind", de: "Warmer Wind", fr: "Vent chaud" }, { en: "Summer stillness", de: "Sommerliche Stille", fr: "Calme d’été" }, // 120–135° · Late July { en: "Dry grass", de: "Trockenes Gras", fr: "Herbes sèches" }, { en: "Stone and heat", de: "Stein und Wärme", fr: "Pierre et chaleur" }, { en: "Late sun", de: "Späte Sonne", fr: "Soleil tardif" }, // 135–150° · Early August { en: "Ripening fields", de: "Reifende Felder", fr: "Champs qui mûrissent" }, { en: "Grass and seed", de: "Gras und Samen", fr: "Herbes et graines" }, { en: "Softened light", de: "Sanfteres Licht", fr: "Lumière adoucie" }, // 150–165° · Late August and early September { en: "Golden seeds", de: "Goldene Samen", fr: "Graines dorées" }, { en: "Summer green", de: "Sommerliches Grün", fr: "Vert d’été" }, { en: "Late warmth", de: "Späte Wärme", fr: "Chaleur tardive" }, // 165–180° · Early September { en: "Silver dew", de: "Silberner Tau", fr: "Rosée argentée" }, { en: "Low meadow light", de: "Tiefes Licht im Gras", fr: "Lumière basse des prés" }, { en: "Cool shade", de: "Kühler Schatten", fr: "Ombre fraîche" }, // 180–195° · Autumn equinox { en: "Balanced light", de: "Licht im Gleichgewicht", fr: "Lumière en équilibre" }, { en: "Orchard gold", de: "Gold im Obstgarten", fr: "Or du verger" }, { en: "Fading green", de: "Verblassendes Grün", fr: "Vert qui s’efface" }, // 195–210° · Early October { en: "Amber leaves", de: "Bernsteinfarbenes Laub", fr: "Feuilles d’ambre" }, { en: "Beech copper", de: "Kupfer der Buchen", fr: "Cuivre des hêtres" }, { en: "Autumn rain", de: "Herbstlicher Regen", fr: "Pluie d’automne" }, // 210–225° · Late October { en: "Leaf and earth", de: "Blatt und Erde", fr: "Feuille et terre" }, { en: "Rust and gold", de: "Rost und Gold", fr: "Rouille et or" }, { en: "Long shadows", de: "Lange Schatten", fr: "Longues ombres" }, // 225–240° · Early November { en: "Bare branches", de: "Kahle Äste", fr: "Branches nues" }, { en: "Grey morning", de: "Grauer Morgen", fr: "Matin gris" }, { en: "Dark wood", de: "Dunkles Holz", fr: "Bois sombre" }, // 240–255° · Late November { en: "Silver frost", de: "Silberner Frost", fr: "Givre argenté" }, { en: "Still water", de: "Stilles Wasser", fr: "Eau immobile" }, { en: "Pale horizons", de: "Helle Horizonte", fr: "Horizons pâles" }, // 255–270° · Early December { en: "Winter earth", de: "Winterliche Erde", fr: "Terre d’hiver" }, { en: "Quiet fields", de: "Stille Felder", fr: "Champs silencieux" }, { en: "Low winter sun", de: "Tiefe Wintersonne", fr: "Soleil bas d’hiver" }, // 270–285° · Winter solstice { en: "Longest night", de: "Längste Nacht", fr: "Nuit la plus longue" }, { en: "Ember light", de: "Licht der Glut", fr: "Lueur de braise" }, { en: "January light", de: "Licht im Januar", fr: "Lumière de janvier" }, // 285–300° · Early January { en: "Cold stars", de: "Kalte Sterne", fr: "Étoiles froides" }, { en: "Winter silence", de: "Winterliche Stille", fr: "Silence d’hiver" }, { en: "Fine branches", de: "Feine Zweige", fr: "Fines ramures" }, // 300–315° · Late January { en: "Ice and light", de: "Eis und Licht", fr: "Glace et lumière" }, { en: "Longer light", de: "Längeres Licht", fr: "Lumière prolongée" }, { en: "Earth beneath frost", de: "Erde unter Frost", fr: "Terre sous le givre" } ].map(function (study) { return Object.freeze(study); })); }); ; /* Progressive appearance controls. This file is bundled after the pure model and calendar. The preference stays in this browser; no network or location API. */ (function () { 'use strict'; var model = globalThis.JHAppearanceModel; var calendar = globalThis.JHAppearanceCalendar; var root = document.documentElement; if (!model || !calendar || !window.matchMedia) return; var key = 'rr-appearance'; var modes = ['system', 'day', 'night', 'zurich']; var media = window.matchMedia('(prefers-color-scheme: dark)'); var preference = readPreference(); var context, palette, control, timer; var copy = { en: { appearance: 'Appearance', choices: ['Follow device', 'Day', 'Night', 'Follow Zurich light'], phases: { first: 'First light', morning: 'Morning', day: 'Day', evening: 'Evening', last: 'Last light', night: 'Night' }, city: 'Zurich', light: 'Light in Zurich', calendar: 'An original calendar of 72 seasonal studies, inspired by Japanese kō. Each lasts about five days. The colours interpret the Swiss year; they do not report the weather.', source: 'About Japanese kō', solar: 'First and last light follow civil twilight in Zurich. Your location is not requested.', saved: 'Your choice stays in this browser.', temporary: 'Your choice applies to this page. This browser is not allowing it to be saved.', first: 'First light', last: 'Last light', close: 'Close appearance' }, de: { appearance: 'Darstellung', choices: ['Wie auf dem Gerät', 'Tag', 'Nacht', 'Licht in Zürich'], phases: { first: 'Erstes Licht', morning: 'Morgen', day: 'Tag', evening: 'Abend', last: 'Letztes Licht', night: 'Nacht' }, city: 'Zürich', light: 'Licht in Zürich', calendar: 'Ein eigener Kalender mit 72 jahreszeitlichen Studien, inspiriert von den japanischen Kō. Jede dauert etwa fünf Tage. Die Farben interpretieren das Schweizer Jahr; sie geben nicht das Wetter wieder.', source: 'Über die japanischen Kō', solar: 'Erstes und letztes Licht richten sich nach der bürgerlichen Dämmerung in Zürich. Ihr Standort wird nicht abgefragt.', saved: 'Ihre Auswahl bleibt in diesem Browser.', temporary: 'Ihre Auswahl gilt für diese Seite. Dieser Browser lässt das Speichern nicht zu.', first: 'Erstes Licht', last: 'Letztes Licht', close: 'Darstellung schliessen' }, fr: { appearance: 'Apparence', choices: ['Selon l’appareil', 'Jour', 'Nuit', 'Lumière à Zurich'], phases: { first: 'Première lumière', morning: 'Matin', day: 'Jour', evening: 'Soir', last: 'Dernière lumière', night: 'Nuit' }, city: 'Zurich', light: 'Lumière à Zurich', calendar: 'Un calendrier original de 72 études saisonnières, inspiré des kō japonais. Chacune dure environ cinq jours. Les couleurs évoquent l’année suisse ; elles ne décrivent pas la météo.', source: 'À propos des kō japonais', solar: 'Les premières et dernières lueurs suivent le crépuscule civil à Zurich. Votre position n’est pas demandée.', saved: 'Votre choix reste dans ce navigateur.', temporary: 'Votre choix s’applique à cette page. Ce navigateur ne permet pas de l’enregistrer.', first: 'Première lumière', last: 'Dernière lumière', close: 'Fermer l’apparence' } }; var language, text, saveFailed = false; function readPreference() { try { var value = localStorage.getItem(key); return modes.indexOf(value) >= 0 ? value : 'system'; } catch (_) { return 'system'; } } function apply() { context = model.getContext(new Date()); palette = model.paletteFor(context, preference, media.matches); // Separate tokens are mapped only on screen. Inline colour values must // never override the established paper-and-ink print edition. Object.keys(palette.tokens).forEach(function (name) { root.style.setProperty('--appearance-' + name.slice(2), palette.tokens[name]); }); root.dataset.appearance = preference; root.dataset.appearanceScheme = palette.scheme; root.dataset.lightPhase = palette.phase; root.dataset.season = String(context.seasonIndex); document.querySelectorAll('meta[name="theme-color"]').forEach(function (meta) { meta.content = palette.tokens['--paper']; }); if (control) refreshControl(); } function element(tag, className, value) { var node = document.createElement(tag); if (className) node.className = className; if (value) node.textContent = value; return node; } function formatTime(value) { return new Intl.DateTimeFormat(language, { timeZone: 'Europe/Zurich', hour: '2-digit', minute: '2-digit', hourCycle: 'h23' }).format(new Date(value)); } function refreshControl() { var season = calendar[context.seasonIndex][language]; control.querySelector('.appearance__season').textContent = season; control.querySelector('.appearance__phase').textContent = text.phases[palette.phase]; control.querySelector('.appearance__actual').textContent = text.light + ' · ' + text.phases[context.phase]; control.querySelector('.appearance__times').textContent = text.first + ' ' + formatTime(context.solar.dawn) + ' · ' + text.last + ' ' + formatTime(context.solar.dusk); control.querySelector('.appearance__storage').textContent = saveFailed ? text.temporary : text.saved; control.querySelectorAll('input').forEach(function (input) { input.checked = input.value === preference; }); } function mount() { var slot = document.querySelector('[data-appearance-slot]'); if (!slot) return; language = document.documentElement.lang.slice(0, 2); if (!copy[language]) language = 'en'; text = copy[language]; slot.setAttribute('role', 'region'); slot.setAttribute('aria-label', text.appearance); control = element('details', 'appearance'); var summary = element('summary', 'appearance__summary'); var label = element('span', 'appearance__label'); label.append(element('span', 'appearance__season'), element('span', 'appearance__separator', ' · '), element('span', 'appearance__phase')); var action = element('span', 'appearance__action', text.appearance); var mark = element('span', 'appearance__mark', '+'); mark.setAttribute('aria-hidden', 'true'); action.append(mark); summary.append(label, action); var panel = element('div', 'appearance__panel'); var field = element('fieldset', 'appearance__choices'); field.append(element('legend', '', text.appearance)); modes.forEach(function (mode, i) { var choice = element('label', 'appearance__choice'); var radio = element('input'); radio.type = 'radio'; radio.name = 'site-appearance'; radio.value = mode; choice.append(radio, element('span', '', text.choices[i])); field.append(choice); radio.addEventListener('change', function () { if (!radio.checked) return; preference = mode; saveFailed = false; try { if (mode === 'system') localStorage.removeItem(key); else localStorage.setItem(key, mode); } catch (_) { saveFailed = true; } apply(); }); }); panel.append(field, element('p', 'appearance__actual'), element('p', 'appearance__times'), element('p', 'appearance__explanation', text.calendar)); var source = element('a', 'appearance__source', text.source); source.href = 'https://www.nippon.com/en/features/h00124/'; panel.append(source, element('p', 'appearance__explanation', text.solar)); var storage = element('p', 'appearance__storage', text.saved); storage.setAttribute('role', 'status'); panel.append(storage); function restoreSummaryFocus() { summary.focus({ preventScroll: true }); // WebKit can finish collapsing a tall disclosure after focus returns. // Check the resulting layout so its keyboard focus remains visible. window.requestAnimationFrame(function () { var bounds = summary.getBoundingClientRect(); if (bounds.top < 0 || bounds.bottom > window.innerHeight) summary.scrollIntoView({ block: 'nearest', inline: 'nearest' }); }); } var close = element('button', 'appearance__close', text.close); close.type = 'button'; close.addEventListener('click', function () { control.open = false; restoreSummaryFocus(); }); panel.append(close); control.append(summary, panel); slot.append(control); refreshControl(); var layoutKey = [window.innerWidth, window.innerHeight, getComputedStyle(root).fontSize].join('/'); var layoutPending = false; function retainLayoutFocus() { if (layoutPending) return; layoutPending = true; window.requestAnimationFrame(function () { layoutPending = false; var next = [window.innerWidth, window.innerHeight, getComputedStyle(root).fontSize].join('/'); if (next === layoutKey) return; layoutKey = next; var focused = document.activeElement; if (!control.open || !control.contains(focused)) return; var target = focused.closest('.appearance__choice') || focused; var bounds = target.getBoundingClientRect(); var clearance = parseFloat(getComputedStyle(root).getPropertyValue('--navigation-height')) || 0; if (bounds.top < clearance || bounds.bottom > window.innerHeight) { target.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } }); } window.addEventListener('resize', retainLayoutFocus); if (typeof ResizeObserver === 'function') new ResizeObserver(retainLayoutFocus).observe(root); control.addEventListener('toggle', function () { mark.textContent = control.open ? '−' : '+'; if (control.open) { apply(); // A footer can be at the bottom edge when opened. Reveal its first // choice without moving keyboard focus away from the summary. if (field.querySelector('.appearance__choice').getBoundingClientRect().bottom > window.innerHeight) { summary.scrollIntoView({ block: 'start', inline: 'nearest' }); } } }); control.addEventListener('keydown', function (event) { if (event.key !== 'Escape' || !control.open) return; control.open = false; // A tall mobile panel may have scrolled its summary out of view. // Restore visible focus when Escape dismisses that panel. restoreSummaryFocus(); event.preventDefault(); }); } function schedule() { clearTimeout(timer); if (document.hidden) return; // Re-evaluate after inactivity or time spent away. Avoid changing the full // reading palette in the middle of an uninterrupted reading session. timer = setTimeout(function () { apply(); schedule(); }, 15 * 60 * 1000); } try { apply(); } catch (_) { return; } // Native CSS remains a complete light/dark fallback. if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', mount, { once: true }); else mount(); media.addEventListener('change', function () { if (preference === 'system') apply(); }); window.addEventListener('storage', function (event) { if (event.key === key || event.key === null) { preference = readPreference(); saveFailed = false; apply(); } }); document.addEventListener('visibilitychange', function () { if (!document.hidden) apply(); schedule(); }); window.addEventListener('pageshow', function (event) { if (event.persisted) { preference = readPreference(); apply(); } schedule(); }); ['pointerdown', 'keydown', 'scroll'].forEach(function (event) { window.addEventListener(event, schedule, { passive: true }); }); schedule(); })();