From d030252ca8f392f18e6ce3c7c4f608840c06f69a Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Thu, 9 Nov 2023 15:17:14 +0100 Subject: [PATCH] No flicker theme switch --- BTCPayApp.Maui/wwwroot/index.html | 5 +++-- BTCPayApp.Photino/wwwroot/index.html | 5 +++-- BTCPayApp.Server/Pages/_Host.cshtml | 5 +++-- BTCPayApp.UI/Features/UIState.cs | 2 +- .../wwwroot/css/{site.css => global.css} | 0 BTCPayApp.UI/wwwroot/js/global.js | 0 BTCPayApp.UI/wwwroot/js/site.js | 11 ----------- BTCPayApp.UI/wwwroot/js/theme.js | 17 +++++++++++++++++ 8 files changed, 27 insertions(+), 18 deletions(-) rename BTCPayApp.UI/wwwroot/css/{site.css => global.css} (100%) create mode 100644 BTCPayApp.UI/wwwroot/js/global.js delete mode 100644 BTCPayApp.UI/wwwroot/js/site.js create mode 100644 BTCPayApp.UI/wwwroot/js/theme.js diff --git a/BTCPayApp.Maui/wwwroot/index.html b/BTCPayApp.Maui/wwwroot/index.html index a9f90603..fe2ab5b3 100644 --- a/BTCPayApp.Maui/wwwroot/index.html +++ b/BTCPayApp.Maui/wwwroot/index.html @@ -5,11 +5,12 @@ BTCPay Server + - + @@ -22,6 +23,6 @@ - + diff --git a/BTCPayApp.Photino/wwwroot/index.html b/BTCPayApp.Photino/wwwroot/index.html index a9f90603..fe2ab5b3 100644 --- a/BTCPayApp.Photino/wwwroot/index.html +++ b/BTCPayApp.Photino/wwwroot/index.html @@ -5,11 +5,12 @@ BTCPay Server + - + @@ -22,6 +23,6 @@ - + diff --git a/BTCPayApp.Server/Pages/_Host.cshtml b/BTCPayApp.Server/Pages/_Host.cshtml index 503cf314..eba6b34d 100644 --- a/BTCPayApp.Server/Pages/_Host.cshtml +++ b/BTCPayApp.Server/Pages/_Host.cshtml @@ -11,11 +11,12 @@ BTCPay Server + - + @@ -33,6 +34,6 @@ - + diff --git a/BTCPayApp.UI/Features/UIState.cs b/BTCPayApp.UI/Features/UIState.cs index c05e6877..77bf6eb5 100644 --- a/BTCPayApp.UI/Features/UIState.cs +++ b/BTCPayApp.UI/Features/UIState.cs @@ -47,7 +47,7 @@ public async Task ApplyUserThemeEffect(ApplyUserTheme action, IDispatcher dispat // store dispatcher.Dispatch(new SetUserTheme(action.Theme)); // ui - await _jsRuntime.InvokeVoidAsync("setTheme", action.Theme); + await _jsRuntime.InvokeVoidAsync("setColorMode", action.Theme); } } } diff --git a/BTCPayApp.UI/wwwroot/css/site.css b/BTCPayApp.UI/wwwroot/css/global.css similarity index 100% rename from BTCPayApp.UI/wwwroot/css/site.css rename to BTCPayApp.UI/wwwroot/css/global.css diff --git a/BTCPayApp.UI/wwwroot/js/global.js b/BTCPayApp.UI/wwwroot/js/global.js new file mode 100644 index 00000000..e69de29b diff --git a/BTCPayApp.UI/wwwroot/js/site.js b/BTCPayApp.UI/wwwroot/js/site.js deleted file mode 100644 index 0d19083a..00000000 --- a/BTCPayApp.UI/wwwroot/js/site.js +++ /dev/null @@ -1,11 +0,0 @@ -// Theme Switch -const THEMES = ['light', 'dark'] -const THEME_ATTR = 'data-btcpay-theme' -const systemColorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? THEMES[1] : THEMES[0] -function setTheme(mode) { - if (THEMES.includes(mode) && mode !== systemColorMode) { - document.documentElement.setAttribute(THEME_ATTR, mode) - } else { - document.documentElement.removeAttribute(THEME_ATTR) - } -} diff --git a/BTCPayApp.UI/wwwroot/js/theme.js b/BTCPayApp.UI/wwwroot/js/theme.js new file mode 100644 index 00000000..1a7b3fe6 --- /dev/null +++ b/BTCPayApp.UI/wwwroot/js/theme.js @@ -0,0 +1,17 @@ +const COLOR_MODES = ["light", "dark"]; +const THEME_ATTR = "data-btcpay-theme"; +const STORE_ATTR = "btcpay-theme"; +const userColorMode = window.localStorage.getItem(STORE_ATTR); +const initialColorMode = COLOR_MODES.includes(userColorMode) ? userColorMode : null; + +function setColorMode (mode) { + if (COLOR_MODES.includes(mode)) { + window.localStorage.setItem(STORE_ATTR, mode); + document.documentElement.setAttribute(THEME_ATTR, mode); + } else { + window.localStorage.removeItem(STORE_ATTR); + document.documentElement.removeAttribute(THEME_ATTR); + } +} + +setColorMode(initialColorMode);