diff --git a/BTCPayServer/Components/ThemeSwitch/Default.cshtml b/BTCPayServer/Components/ThemeSwitch/Default.cshtml
new file mode 100644
index 000000000..dbfb27104
--- /dev/null
+++ b/BTCPayServer/Components/ThemeSwitch/Default.cshtml
@@ -0,0 +1,12 @@
+@model BTCPayServer.Components.ThemeSwitch.ThemeSwitchViewModel
+
+
diff --git a/BTCPayServer/Components/ThemeSwitch/ThemeSwitch.cs b/BTCPayServer/Components/ThemeSwitch/ThemeSwitch.cs
new file mode 100644
index 000000000..cf8f41ae9
--- /dev/null
+++ b/BTCPayServer/Components/ThemeSwitch/ThemeSwitch.cs
@@ -0,0 +1,17 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace BTCPayServer.Components.ThemeSwitch
+{
+ public class ThemeSwitch : ViewComponent
+ {
+ public IViewComponentResult Invoke(string cssClass = null, string responsive = null)
+ {
+ var vm = new ThemeSwitchViewModel
+ {
+ CssClass = cssClass,
+ Responsive = responsive
+ };
+ return View(vm);
+ }
+ }
+}
diff --git a/BTCPayServer/Components/ThemeSwitch/ThemeSwitchViewModel.cs b/BTCPayServer/Components/ThemeSwitch/ThemeSwitchViewModel.cs
new file mode 100644
index 000000000..6b4652e1b
--- /dev/null
+++ b/BTCPayServer/Components/ThemeSwitch/ThemeSwitchViewModel.cs
@@ -0,0 +1,8 @@
+namespace BTCPayServer.Components.ThemeSwitch
+{
+ public class ThemeSwitchViewModel
+ {
+ public string CssClass { get; set; }
+ public string Responsive { get; set; }
+ }
+}
diff --git a/BTCPayServer/Views/Shared/_Layout.cshtml b/BTCPayServer/Views/Shared/_Layout.cshtml
index 2b2b63a7a..805f7acd7 100644
--- a/BTCPayServer/Views/Shared/_Layout.cshtml
+++ b/BTCPayServer/Views/Shared/_Layout.cshtml
@@ -90,13 +90,7 @@
@if (!theme.CustomTheme)
{
-
+
}
diff --git a/BTCPayServer/wwwroot/main/site.css b/BTCPayServer/wwwroot/main/site.css
index f1d7ab742..1fa59eed4 100644
--- a/BTCPayServer/wwwroot/main/site.css
+++ b/BTCPayServer/wwwroot/main/site.css
@@ -161,11 +161,20 @@ hr.light {
border: 0;
}
+.btcpay-theme-switch:not(.nav-link) {
+ display: inline-flex;
+ align-items: center;
+}
+
.btcpay-theme-switch svg {
height: 1rem;
width: 1rem;
}
+.btcpay-theme-switch svg[class="d-inline-block"] + span {
+ margin-left: var(--btcpay-space-xs);
+}
+
.btcpay-theme-switch path {
stroke-width: .5px;
fill: currentColor;
diff --git a/BTCPayServer/wwwroot/main/site.js b/BTCPayServer/wwwroot/main/site.js
index 8e86f9fcb..26a78e482 100644
--- a/BTCPayServer/wwwroot/main/site.js
+++ b/BTCPayServer/wwwroot/main/site.js
@@ -99,14 +99,12 @@ document.addEventListener("DOMContentLoaded", function () {
});
});
- document.querySelectorAll(".btcpay-theme-switch").forEach(function (link) {
- link.addEventListener("click", function (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);
- });
- });
+ delegate('click', '.btcpay-theme-switch', function (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);
+ })
});
function switchTimeFormat() {