Spaces:
Sleeping
Sleeping
File size: 1,613 Bytes
c8876d8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | // Run before the stylesheet so a saved theme is applied before the first paint.
(() => {
const key = 'huggingpolls-theme';
const system = window.matchMedia('(prefers-color-scheme: dark)');
const valid = value => ['system', 'light', 'dark'].includes(value);
let preference = 'system';
try {
const saved = localStorage.getItem(key);
if (valid(saved)) preference = saved;
} catch { /* The system theme still works when browser storage is blocked. */ }
function apply() {
const theme = preference === 'system' ? (system.matches ? 'dark' : 'light') : preference;
document.documentElement.dataset.theme = theme;
document.querySelector('meta[name="theme-color"]').content = theme === 'dark' ? '#11151d' : '#ffffff';
const select = document.querySelector('#theme-select');
if (select) select.value = preference;
const status = document.querySelector('#theme-status');
if (status) status.textContent = `Using ${theme} appearance${preference === 'system' ? ' to match your system' : ''}.`;
}
apply();
system.addEventListener('change', apply);
window.addEventListener('storage', event => {
if (event.key === key || event.key === null) {
preference = valid(event.newValue) ? event.newValue : 'system';
apply();
}
});
document.addEventListener('DOMContentLoaded', () => {
apply();
document.querySelector('#theme-select').addEventListener('change', event => {
preference = event.target.value;
try { localStorage.setItem(key, preference); } catch {}
apply();
});
});
})();
|