2023-11-21 09:56:10 +01:00
|
|
|
(function() {
|
|
|
|
const COLOR_MODES = ['light', 'dark'];
|
|
|
|
const THEME_ATTR = 'data-btcpay-theme';
|
|
|
|
const STORE_ATTR = 'btcpay-theme';
|
|
|
|
const mediaMatcher = window.matchMedia('(prefers-color-scheme: dark)');
|
2021-09-03 09:16:36 +02:00
|
|
|
|
2023-11-21 09:56:10 +01:00
|
|
|
window.setColorMode = userMode => {
|
|
|
|
if (userMode === 'system') {
|
|
|
|
window.localStorage.removeItem(STORE_ATTR);
|
|
|
|
document.documentElement.removeAttribute(THEME_ATTR);
|
|
|
|
} else if (COLOR_MODES.includes(userMode)) {
|
|
|
|
window.localStorage.setItem(STORE_ATTR, userMode);
|
|
|
|
document.documentElement.setAttribute(THEME_ATTR, userMode);
|
|
|
|
}
|
|
|
|
const user = window.localStorage.getItem(STORE_ATTR);
|
|
|
|
const system = mediaMatcher.matches ? COLOR_MODES[1] : COLOR_MODES[0];
|
|
|
|
const mode = user || system;
|
|
|
|
|
|
|
|
document.getElementById('DarkThemeLinkTag').setAttribute('rel', mode === 'dark' ? 'stylesheet' : null);
|
2021-09-03 09:16:36 +02:00
|
|
|
}
|
|
|
|
|
2023-11-21 09:56:10 +01:00
|
|
|
// set initial mode
|
|
|
|
setColorMode(window.localStorage.getItem(STORE_ATTR));
|
|
|
|
|
|
|
|
// listen for system mode changes
|
|
|
|
mediaMatcher.addEventListener('change', e => {
|
|
|
|
const userMode = window.localStorage.getItem(STORE_ATTR);
|
|
|
|
if (!userMode) setColorMode('system');
|
|
|
|
});
|
|
|
|
})();
|