77 lines
2.3 KiB
JavaScript
77 lines
2.3 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 preference = readPreference();
|
|||
|
|
|
|||
|
|
function isValid(value) {
|
|||
|
|
return VALID_PREFERENCES.indexOf(value) !== -1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function readPreference() {
|
|||
|
|
try {
|
|||
|
|
var stored = window.localStorage.getItem(STORAGE_KEY);
|
|||
|
|
return isValid(stored) ? stored : 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) {
|
|||
|
|
// Depolama kapalıysa tema oturum boyunca yine çalışır.
|
|||
|
|
}
|
|||
|
|
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
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Bu dosya <head> içinde senkron çalıştığı için ilk boyadan önce uygulanır.
|
|||
|
|
apply();
|
|||
|
|
}(window, document));
|