57 lines
2.6 KiB
JavaScript
57 lines
2.6 KiB
JavaScript
(function (window, document) {
|
|
'use strict';
|
|
var STORAGE_KEY = 'trafficpumper.theme';
|
|
var DEFAULT_PREFERENCE = 'system';
|
|
var VALID_PREFERENCES = ['light', 'dark', 'system'];
|
|
var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
var accountTheme = typeof document.querySelector === 'function' ? document.querySelector('meta[name="trafficpumper-account-theme"]')?.content : null;
|
|
var preference = VALID_PREFERENCES.indexOf(accountTheme) !== -1 ? accountTheme : readPreference();
|
|
try { window.localStorage.setItem(STORAGE_KEY, preference); } catch (error) {}
|
|
if (typeof document.querySelector === 'function' && document.querySelector('meta[name="trafficpumper-reduced-motion"]')?.content === 'true') document.documentElement.dataset.reducedMotion = 'true';
|
|
|
|
function isValid(value) { return VALID_PREFERENCES.indexOf(value) !== -1; }
|
|
function readPreference() {
|
|
try {
|
|
var stored = window.localStorage.getItem(STORAGE_KEY);
|
|
if (isValid(stored)) return stored;
|
|
window.localStorage.setItem(STORAGE_KEY, DEFAULT_PREFERENCE);
|
|
return DEFAULT_PREFERENCE;
|
|
} catch (error) { return DEFAULT_PREFERENCE; }
|
|
}
|
|
function resolve(value) {
|
|
return value === 'system' ? (mediaQuery.matches ? 'dark' : 'light') : value;
|
|
}
|
|
function apply() {
|
|
var resolved = resolve(preference);
|
|
document.documentElement.setAttribute('data-bs-theme', resolved);
|
|
document.documentElement.style.colorScheme = resolved;
|
|
window.dispatchEvent(new window.CustomEvent('trafficpumper:theme-change', {
|
|
detail: { preference: preference, resolved: resolved }
|
|
}));
|
|
return resolved;
|
|
}
|
|
function setPreference(value) {
|
|
if (!isValid(value)) { return false; }
|
|
preference = value;
|
|
try { window.localStorage.setItem(STORAGE_KEY, value); } catch (error) {}
|
|
apply();
|
|
return true;
|
|
}
|
|
function onSystemThemeChange() {
|
|
if (preference === 'system') { apply(); }
|
|
}
|
|
if (typeof mediaQuery.addEventListener === 'function') {
|
|
mediaQuery.addEventListener('change', onSystemThemeChange);
|
|
} else if (typeof mediaQuery.addListener === 'function') {
|
|
mediaQuery.addListener(onSystemThemeChange);
|
|
}
|
|
window.ThemeManager = Object.freeze({
|
|
storageKey: STORAGE_KEY,
|
|
getPreference: function () { return preference; },
|
|
getResolvedTheme: function () { return resolve(preference); },
|
|
setPreference: setPreference,
|
|
apply: apply
|
|
});
|
|
apply();
|
|
}(window, document));
|