Skip to content

Commit

Permalink
No flicker theme switch
Browse files Browse the repository at this point in the history
  • Loading branch information
@dennisreimann
dennisreimann committed Nov 9, 2023
1 parent a84f643 commit d030252
Show file tree
Hide file tree
Showing 8 changed files with 27 additions and 18 deletions.
5 changes: 3 additions & 2 deletions BTCPayApp.Maui/wwwroot/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"/>
<title>BTCPay Server</title>
<script src="_content/BTCPayApp.UI/js/theme.js"></script>
<link href="_content/BTCPayApp.UI/favicon.png" rel="icon" type="image/png"/>
<link href="_content/BTCPayApp.UI/bootstrap/bootstrap.css" rel="stylesheet"/>
<link href="_content/BTCPayApp.UI/css/fonts.css" rel="stylesheet"/>
<link href="_content/BTCPayApp.UI/css/site.css" rel="stylesheet"/>
<link href="_content/BTCPayApp.UI/css/theme.css" rel="stylesheet"/>
<link href="_content/BTCPayApp.UI/css/global.css" rel="stylesheet"/>
<link href="_content/BTCPayApp.UI/BTCPayApp.UI.bundle.scp.css" rel="stylesheet" />
</head>
<body>
Expand All @@ -22,6 +23,6 @@
</div>
<script src="_framework/blazor.webview.js" autostart="false"></script>
<script src="_content/BTCPayApp.UI/bootstrap/bootstrap.bundle.min.js"></script>
<script src="_content/BTCPayApp.UI/js/site.js"></script>
<script src="_content/BTCPayApp.UI/js/global.js"></script>
</body>
</html>
5 changes: 3 additions & 2 deletions BTCPayApp.Photino/wwwroot/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"/>
<title>BTCPay Server</title>
<script src="_content/BTCPayApp.UI/js/theme.js"></script>
<link href="_content/BTCPayApp.UI/favicon.png" rel="icon" type="image/png"/>
<link href="_content/BTCPayApp.UI/bootstrap/bootstrap.css" rel="stylesheet"/>
<link href="_content/BTCPayApp.UI/css/fonts.css" rel="stylesheet"/>
<link href="_content/BTCPayApp.UI/css/site.css" rel="stylesheet"/>
<link href="_content/BTCPayApp.UI/css/theme.css" rel="stylesheet"/>
<link href="_content/BTCPayApp.UI/css/global.css" rel="stylesheet"/>
<link href="_content/BTCPayApp.UI/BTCPayApp.UI.bundle.scp.css" rel="stylesheet" />
</head>
<body>
Expand All @@ -22,6 +23,6 @@
</div>
<script src="_framework/blazor.webview.js" autostart="false"></script>
<script src="_content/BTCPayApp.UI/bootstrap/bootstrap.bundle.min.js"></script>
<script src="_content/BTCPayApp.UI/js/site.js"></script>
<script src="_content/BTCPayApp.UI/js/global.js"></script>
</body>
</html>
5 changes: 3 additions & 2 deletions BTCPayApp.Server/Pages/_Host.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,12 @@
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"/>
<title>BTCPay Server</title>
<script src="_content/BTCPayApp.UI/js/theme.js"></script>
<link href="_content/BTCPayApp.UI/favicon.png" rel="icon" type="image/png" asp-append-version="true"/>
<link href="_content/BTCPayApp.UI/bootstrap/bootstrap.css" rel="stylesheet" asp-append-version="true"/>
<link href="_content/BTCPayApp.UI/css/fonts.css" rel="stylesheet" asp-append-version="true"/>
<link href="_content/BTCPayApp.UI/css/site.css" rel="stylesheet" asp-append-version="true"/>
<link href="_content/BTCPayApp.UI/css/theme.css" rel="stylesheet" asp-append-version="true"/>
<link href="_content/BTCPayApp.UI/css/global.css" rel="stylesheet" asp-append-version="true"/>
<link href="_content/BTCPayApp.UI/BTCPayApp.UI.bundle.scp.css" rel="stylesheet" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>
</head>
Expand All @@ -33,6 +34,6 @@
</div>
<script src="_framework/blazor.server.js" asp-append-version="true"></script>
<script src="_content/BTCPayApp.UI/bootstrap/bootstrap.bundle.min.js" asp-append-version="true"></script>
<script src="_content/BTCPayApp.UI/js/site.js" asp-append-version="true"></script>
<script src="_content/BTCPayApp.UI/js/global.js" asp-append-version="true"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion BTCPayApp.UI/Features/UIState.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
0 BTCPayApp.UI/wwwroot/css/site.css → BTCPayApp.UI/wwwroot/css/global.css
View file
File renamed without changes.
Empty file added BTCPayApp.UI/wwwroot/js/global.js
View file
Empty file.
11 changes: 0 additions & 11 deletions BTCPayApp.UI/wwwroot/js/site.js
View file

This file was deleted.

17 changes: 17 additions & 0 deletions BTCPayApp.UI/wwwroot/js/theme.js
View file
Original file line number Diff line number Diff line change
@@ -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);

0 comments on commit d030252

Please sign in to comment.