From b4daa76aeb8fd7ffa3be259afb2f3186b3d2bc00 Mon Sep 17 00:00:00 2001 From: d11n Date: Tue, 21 Nov 2023 09:56:10 +0100 Subject: [PATCH] Theme Switch: Refactor and add system option (#5473) * 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 --- .../Components/MainNav/Default.cshtml | 4 +- .../Components/ThemeSwitch/Default.cshtml | 15 ++-- BTCPayServer/wwwroot/img/icon-sprite.svg | 5 +- BTCPayServer/wwwroot/js/theme-switch.js | 40 +++++++---- BTCPayServer/wwwroot/main/layout.css | 70 ++++++------------- BTCPayServer/wwwroot/main/site.js | 9 ++- 6 files changed, 66 insertions(+), 77 deletions(-) diff --git a/BTCPayServer/Components/MainNav/Default.cshtml b/BTCPayServer/Components/MainNav/Default.cshtml index a741717a5..db1f1b9bf 100644 --- a/BTCPayServer/Components/MainNav/Default.cshtml +++ b/BTCPayServer/Components/MainNav/Default.cshtml @@ -249,7 +249,7 @@
  • - @@ -264,7 +264,7 @@ @if (!Theme.CustomTheme) {
  • - +
    • }
  • diff --git a/BTCPayServer/Components/ThemeSwitch/Default.cshtml b/BTCPayServer/Components/ThemeSwitch/Default.cshtml index 0a4d9c27b..fe34cd3dc 100644 --- a/BTCPayServer/Components/ThemeSwitch/Default.cshtml +++ b/BTCPayServer/Components/ThemeSwitch/Default.cshtml @@ -1,9 +1,10 @@ @model BTCPayServer.Components.ThemeSwitch.ThemeSwitchViewModel - +
    + Theme +
    + + + +
    +
    diff --git a/BTCPayServer/wwwroot/img/icon-sprite.svg b/BTCPayServer/wwwroot/img/icon-sprite.svg index d438dafec..d6f08d33e 100644 --- a/BTCPayServer/wwwroot/img/icon-sprite.svg +++ b/BTCPayServer/wwwroot/img/icon-sprite.svg @@ -77,8 +77,9 @@ - - + + + diff --git a/BTCPayServer/wwwroot/js/theme-switch.js b/BTCPayServer/wwwroot/js/theme-switch.js index ce7da5270..49847237a 100644 --- a/BTCPayServer/wwwroot/js/theme-switch.js +++ b/BTCPayServer/wwwroot/js/theme-switch.js @@ -1,16 +1,30 @@ -const COLOR_MODES = ["light", "dark"]; -const THEME_ATTR = "data-btcpay-theme"; -const STORE_ATTR = "btcpay-theme"; -const systemColorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? COLOR_MODES[1] : COLOR_MODES[0]; -const userColorMode = window.localStorage.getItem(STORE_ATTR); -const initialColorMode = COLOR_MODES.includes(userColorMode) ? userColorMode : systemColorMode; +(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)'); -function setColorMode (mode) { - if (COLOR_MODES.includes(mode)) { - window.localStorage.setItem(STORE_ATTR, mode); - document.documentElement.setAttribute(THEME_ATTR, mode); - document.getElementById("DarkThemeLinkTag").setAttribute("rel", mode === "dark" ? "stylesheet" : null); + 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); } -} -setColorMode(initialColorMode); + // 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'); + }); +})(); diff --git a/BTCPayServer/wwwroot/main/layout.css b/BTCPayServer/wwwroot/main/layout.css index 06fd7f778..e465ced30 100644 --- a/BTCPayServer/wwwroot/main/layout.css +++ b/BTCPayServer/wwwroot/main/layout.css @@ -258,41 +258,37 @@ } /* Theme Switch */ -#mainNav .btcpay-theme-switch { - width: 100%; +.btcpay-theme-switch { + + display: inline-flex; + align-items: center; justify-content: space-between; } -#mainNav .btcpay-theme-switch svg { - order: 1; - margin: 0 !important; +.btcpay-theme-switch-label { + font-weight: var(--btcpay-font-weight-semibold); } -#mainNav .btcpay-theme-switch span { - order: 0; - margin: 0; -} - -.btcpay-theme-switch { +.btcpay-theme-switch-themes { display: inline-flex; + gap: var(--btcpay-space-m); align-items: center; +} + +.btcpay-theme-switch-themes button { + --icon-size: 1.25rem !important; background: none; - cursor: pointer; + padding: 0; border: 0; + color: var(--btcpay-body-text-muted); } -.btcpay-theme-switch svg { - height: 1rem; - width: 1rem; +.btcpay-theme-switch-themes button:hover { + color: var(--btcpay-body-link); } -.btcpay-theme-switch svg ~ span { - margin-left: var(--btcpay-space-xs); -} - -.btcpay-theme-switch path { - stroke-width: .5px; - fill: currentColor; +.btcpay-theme-switch-themes button svg { + margin: 0 !important; } .btcpay-theme-switch:hover .btcpay-theme-switch-light, @@ -300,32 +296,10 @@ fill: currentColor; } -.btcpay-theme-switch-dark { - stroke: currentColor; -} - -:root[data-btcpay-theme="dark"] .btcpay-theme-switch-dark { - display: none; -} - -@media (prefers-color-scheme: dark) { - :root:not([data-btcpay-theme="dark"]) .btcpay-theme-switch-dark { - display: inline-block; - } -} - -.btcpay-theme-switch-light { - display: none; -} - -:root[data-btcpay-theme="dark"] .btcpay-theme-switch-light { - display: inline-block; -} - -@media (prefers-color-scheme: dark) { - :root:not([data-btcpay-theme="light"]) .btcpay-theme-switch-light { - display: inline-block; - } +:root:not([data-btcpay-theme]) .btcpay-theme-switch [data-theme="system"], +:root[data-btcpay-theme="light"] .btcpay-theme-switch [data-theme="light"], +:root[data-btcpay-theme="dark"] .btcpay-theme-switch [data-theme="dark"] { + color: var(--btcpay-body-link); } /* Notifications */ diff --git a/BTCPayServer/wwwroot/main/site.js b/BTCPayServer/wwwroot/main/site.js index 949b44fc2..a344717c6 100644 --- a/BTCPayServer/wwwroot/main/site.js +++ b/BTCPayServer/wwwroot/main/site.js @@ -297,12 +297,11 @@ document.addEventListener("DOMContentLoaded", () => { delegate('click', '.switch-time-format', switchTimeFormat); // Theme Switch - delegate('click', '.btcpay-theme-switch', e => { + delegate('click', '.btcpay-theme-switch [data-theme]', e => { e.preventDefault() - const current = document.documentElement.getAttribute(THEME_ATTR) || COLOR_MODES[0] - const mode = current === COLOR_MODES[0] ? COLOR_MODES[1] : COLOR_MODES[0] - setColorMode(mode) - e.target.closest('.btcpay-theme-switch').blur() + const $btn = e.target.closest('.btcpay-theme-switch [data-theme]') + setColorMode($btn.dataset.theme) + $btn.blur() }) // Sensitive Info