mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-20 13:34:37 +01:00
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
This commit is contained in:
d11n
GitHub
parent
5bd8067328
commit
b4daa76aeb
6 changed files with 66 additions and 77 deletions
|
|
@ -249,7 +249,7 @@
|
|||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropup">
|
||||
<a class="nav-link @ViewData.IsActiveCategory(typeof(ManageNavPages))" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="Nav-Account">
|
||||
<a class="nav-link @ViewData.IsActiveCategory(typeof(ManageNavPages))" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" id="Nav-Account">
|
||||
<vc:icon symbol="account"/>
|
||||
<span>Account</span>
|
||||
</a>
|
||||
|
|
@ -264,7 +264,7 @@
|
|||
@if (!Theme.CustomTheme)
|
||||
{
|
||||
<li class="py-1 px-3">
|
||||
<vc:theme-switch css-class="nav-link pb-0"/>
|
||||
<vc:theme-switch css-class="w-100 pt-2"/>
|
||||
</li>
|
||||
}
|
||||
<li class="py-1 px-3">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
@model BTCPayServer.Components.ThemeSwitch.ThemeSwitchViewModel
|
||||
|
||||
<button class="btcpay-theme-switch @Model.CssClass">
|
||||
<svg class="d-inline-block icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15">
|
||||
<path class="btcpay-theme-switch-dark" transform="translate(3 3)" d="M2.72 0A3.988 3.988 0 000 3.78c0 2.21 1.79 4 4 4 1.76 0 3.25-1.14 3.78-2.72-.4.13-.83.22-1.28.22-2.21 0-4-1.79-4-4 0-.45.08-.88.22-1.28z"/>
|
||||
<path class="btcpay-theme-switch-light" transform="translate(3 3)" d="M4 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 0 4 0zM1.5 1c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM.5 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM1.5 6c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 7 4 7z"/>
|
||||
</svg>
|
||||
<span class="btcpay-theme-switch-dark">Dark theme</span><span class="btcpay-theme-switch-light">Light theme</span>
|
||||
</button>
|
||||
<div class="btcpay-theme-switch @Model.CssClass">
|
||||
<span class="btcpay-theme-switch-label">Theme</span>
|
||||
<div class="btcpay-theme-switch-themes">
|
||||
<button type="button" title="System" data-theme="system"><vc:icon symbol="themes-system"/></button>
|
||||
<button type="button" title="Light" data-theme="light"><vc:icon symbol="themes-light"/></button>
|
||||
<button type="button" title="Dark" data-theme="dark"><vc:icon symbol="themes-dark"/></button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -77,8 +77,9 @@
|
|||
<symbol id="social-twitter" viewBox="0 0 37 37" fill="none"><path d="M36 18c0 9.945-8.055 18-18 18S0 27.945 0 18 8.055 0 18 0s18 8.055 18 18zm-21.294 9.495c7.983 0 12.348-6.615 12.348-12.348 0-.189 0-.378-.009-.558a8.891 8.891 0 0 0 2.169-2.25 8.808 8.808 0 0 1-2.493.684 4.337 4.337 0 0 0 1.908-2.403 8.788 8.788 0 0 1-2.754 1.053 4.319 4.319 0 0 0-3.168-1.368 4.34 4.34 0 0 0-4.338 4.338c0 .342.036.675.117.99a12.311 12.311 0 0 1-8.946-4.536 4.353 4.353 0 0 0-.585 2.178 4.32 4.32 0 0 0 1.935 3.609 4.263 4.263 0 0 1-1.962-.54v.054a4.345 4.345 0 0 0 3.483 4.257 4.326 4.326 0 0 1-1.962.072 4.333 4.333 0 0 0 4.05 3.015 8.724 8.724 0 0 1-6.426 1.791 12.091 12.091 0 0 0 6.633 1.962z" fill="currentColor"/></symbol>
|
||||
<symbol id="spark" viewBox="0 0 24 24" fill="none"><path d="M17.57 10.7c-.1-.23-.27-.34-.5-.34h-4.3l.5-3.76a.48.48 0 0 0-.33-.55.52.52 0 0 0-.66.17l-5.45 6.54a.59.59 0 0 0-.05.6c.1.17.27.28.49.28h4.3l-.49 3.76c-.05.22.11.5.33.55.06.05.17.05.22.05a.5.5 0 0 0 .44-.22l5.45-6.54c.1-.17.16-.39.05-.55Z" fill="currentColor"/></symbol>
|
||||
<symbol id="store" viewBox="0 0 24 24" fill="none"><path d="M19.049 10.2637V16.5294C19.049 17.7602 18.042 18.7672 16.8112 18.7672H7.24478C6.01401 18.7672 5.00702 17.7602 5.00702 16.5294V10.2637" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"/><path d="M9.45456 5.25649V9.08866C9.45456 10.2635 8.50351 11.2425 7.32868 11.2425H6.9091C5.00701 11.2425 3.74826 9.31243 4.50351 7.57817L5.06295 6.26348C5.34267 5.62012 5.95805 5.22852 6.62938 5.22852L9.45456 5.25649Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"/><path d="M14.5455 5.25781V9.08998C14.5455 10.2648 15.4965 11.2438 16.6713 11.2438H17.0909C18.993 11.2438 20.2518 9.31376 19.4965 7.57949L18.9371 6.26481C18.6574 5.64942 18.042 5.25781 17.3706 5.25781H14.5455Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"/><path d="M12 11.4949C10.6014 11.4949 9.48254 10.3481 9.48254 8.97746V5.28516H14.5455V8.97746C14.5455 10.3761 13.3986 11.4949 12 11.4949Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"/></symbol>
|
||||
<symbol id="themes-dark" viewBox="0 0 10 10" fill="none"><path transform="translate(1 1)" d="M2.72 0A3.988 3.988 0 000 3.78c0 2.21 1.79 4 4 4 1.76 0 3.25-1.14 3.78-2.72-.4.13-.83.22-1.28.22-2.21 0-4-1.79-4-4 0-.45.08-.88.22-1.28z" fill="currentColor"/></symbol>
|
||||
<symbol id="themes-light" viewBox="0 0 10 10" fill="none"><path transform="translate(1 1)" d="M4 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 0 4 0zM1.5 1c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM.5 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM1.5 6c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 7 4 7z" fill="currentColor"/></symbol>
|
||||
<symbol id="themes-dark" viewBox="0 0 24 24" fill="none"><path d="M8.742 1.825a10.593 10.593 0 0 0-5.23 3.852 10.576 10.576 0 0 0-1.996 6.179c0 5.865 4.756 10.615 10.626 10.615 4.676 0 8.634-3.025 10.042-7.218-1.063.345-2.205.584-3.4.584-5.871 0-10.626-4.75-10.626-10.615 0-1.195.212-2.336.584-3.397z" fill="currentColor"/></symbol>
|
||||
<symbol id="themes-light" viewBox="0 0 24 24" fill="none"><path d="M12 1c-.77 0-1.375.605-1.375 1.375S11.23 3.75 12 3.75s1.375-.605 1.375-1.375S12.77 1 12 1ZM5.125 3.75c-.77 0-1.375.605-1.375 1.375S4.355 6.5 5.125 6.5 6.5 5.895 6.5 5.125 5.895 3.75 5.125 3.75Zm13.75 0c-.77 0-1.375.605-1.375 1.375S18.105 6.5 18.875 6.5s1.375-.605 1.375-1.375-.605-1.375-1.375-1.375zM12 6.5c-3.025 0-5.5 2.475-5.5 5.5s2.475 5.5 5.5 5.5 5.5-2.475 5.5-5.5-2.475-5.5-5.5-5.5Zm-9.625 4.125C1.605 10.625 1 11.23 1 12s.605 1.375 1.375 1.375S3.75 12.77 3.75 12s-.605-1.375-1.375-1.375zm19.25 0c-.77 0-1.375.605-1.375 1.375s.605 1.375 1.375 1.375S23 12.77 23 12s-.605-1.375-1.375-1.375ZM5.125 17.5c-.77 0-1.375.605-1.375 1.375s.605 1.375 1.375 1.375S6.5 19.645 6.5 18.875 5.895 17.5 5.125 17.5Zm13.75 0c-.77 0-1.375.605-1.375 1.375s.605 1.375 1.375 1.375 1.375-.605 1.375-1.375-.605-1.375-1.375-1.375zM12 20.25c-.77 0-1.375.605-1.375 1.375S11.23 23 12 23s1.375-.605 1.375-1.375S12.77 20.25 12 20.25z" fill="currentColor"/></symbol>
|
||||
<symbol id="themes-system" viewBox="0 0 24 24" fill="none"><path fill="currentColor" d="M12 1C5.935 1 1 5.935 1 12s4.935 11 11 11 11-4.935 11-11S18.065 1 12 1ZM2.086 12c0-5.467 4.447-9.914 9.914-9.914v19.828c-5.466 0-9.914-4.447-9.914-9.914z"/></symbol>
|
||||
<symbol id="trash" viewBox="0 0 16 16" fill="none"><path d="M11 1.75V3H13.25C13.4489 3 13.6397 3.07902 13.7803 3.21967C13.921 3.36032 14 3.55109 14 3.75C14 3.94891 13.921 4.13968 13.7803 4.28033C13.6397 4.42098 13.4489 4.5 13.25 4.5H2.75C2.55109 4.5 2.36032 4.42098 2.21967 4.28033C2.07902 4.13968 2 3.94891 2 3.75C2 3.55109 2.07902 3.36032 2.21967 3.21967C2.36032 3.07902 2.55109 3 2.75 3H5V1.75C5 0.784 5.784 0 6.75 0H9.25C10.216 0 11 0.784 11 1.75ZM4.496 6.675L5.156 13.275C5.1622 13.3367 5.19112 13.3939 5.23714 13.4355C5.28315 13.4771 5.34298 13.5001 5.405 13.5H10.595C10.657 13.5001 10.7168 13.4771 10.7629 13.4355C10.8089 13.3939 10.8378 13.3367 10.844 13.275L11.504 6.675C11.5288 6.48127 11.6282 6.30486 11.781 6.18328C11.9339 6.06169 12.1281 6.00453 12.3225 6.02394C12.5168 6.04334 12.6959 6.13779 12.8217 6.2872C12.9475 6.43661 13.01 6.6292 12.996 6.824L12.336 13.424C12.2933 13.856 12.0914 14.2566 11.7696 14.5479C11.4478 14.8392 11.0291 15.0004 10.595 15H5.405C4.97121 14.9999 4.5529 14.8388 4.23121 14.5478C3.90952 14.2567 3.70738 13.8566 3.664 13.425L3.004 6.825C2.99148 6.7257 2.99895 6.6249 3.02599 6.52853C3.05303 6.43217 3.09908 6.34219 3.16144 6.2639C3.22379 6.18561 3.30118 6.12059 3.38905 6.07268C3.47692 6.02476 3.5735 5.99492 3.67308 5.98491C3.77266 5.9749 3.87325 5.98492 3.9689 6.01438C4.06455 6.04385 4.15333 6.09216 4.23002 6.15647C4.30671 6.22078 4.36975 6.29979 4.41543 6.38884C4.46111 6.4779 4.48851 6.57519 4.496 6.675ZM6.5 1.75V3H9.5V1.75C9.5 1.6837 9.47366 1.62011 9.42678 1.57322C9.37989 1.52634 9.3163 1.5 9.25 1.5H6.75C6.6837 1.5 6.62011 1.52634 6.57322 1.57322C6.52634 1.62011 6.5 1.6837 6.5 1.75Z" fill="currentColor"/></symbol>
|
||||
<symbol id="wallet-file" viewBox="0 0 32 32" fill="none"><path d="M5 1H20.8479L27 6.90258V31H5V1Z" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
|
||||
<symbol id="wallet-lightning" viewBox="0 0 24 24" fill="none"><path d="M17.57 10.7c-.1-.23-.27-.34-.5-.34h-4.3l.5-3.76a.48.48 0 0 0-.33-.55.52.52 0 0 0-.66.17l-5.45 6.54a.59.59 0 0 0-.05.6c.1.17.27.28.49.28h4.3l-.49 3.76c-.05.22.11.5.33.55.06.05.17.05.22.05a.5.5 0 0 0 .44-.22l5.45-6.54c.1-.17.16-.39.05-.55Z" fill="currentColor"/></symbol>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 77 KiB |
|
|
@ -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');
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue