btcpayserver/BTCPayServer/wwwroot/js/theme-switch.js

31 lines
1.2 KiB
JavaScript
Raw Normal View History

(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)');
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);
}
// 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');
});
})();