mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-23 14:40:36 +01:00
b4daa76aeb
* Theme Switch: Refactor and add system option Before, we had no way to reset the theme option to the system default. This introduces that option and refactors the theme switch to work in a simpler manner. * Prevent account menu close on click inside Context: #5476
30 lines
1.2 KiB
JavaScript
30 lines
1.2 KiB
JavaScript
(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');
|
|
});
|
|
})();
|