btcpayserver-plugin-builder/PluginBuilder/Views/Shared/_Layout.cshtml
rollforsats cecf1ba336 Add dark mode with auto/light/dark theme toggle
- Wire up the existing default-dark.css that was never loaded. Add a three-way theme switch (System/Light/Dark) that persists the user's preference in localStorage.

- The toggle appears in as a dropdown on the plugin directory and details pages.

- System mode follows the OS preference automatically.

- Also fix the plugin detail page header using hardcoded light colors that didn't adapt to dark mode.
2026-03-21 21:32:23 -05:00

49 lines
1.3 KiB
Plaintext

@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en" class="uie">
<head>
<title>BTCPay Server - Plugin Builder</title>
<partial name="_CommonHead"></partial>
@RenderSection("HeaderScripts", false)
<style>
.navigation-logo {
display: block;
margin-bottom: var(--uie-space-l);
margin-left: auto;
margin-right: auto;
max-height: 120px;
min-height: 120px;
max-width: 90%;
}
.navigation-logo-caption {
font-size: x-large;
}
</style>
</head>
<body class="d-flex flex-column flex-lg-row min-vh-100">
<header id="mainMenu" class="btcpay-header d-flex flex-column">
<div id="mainMenuHead">
<button id="mainMenuToggle" class="mainMenuButton" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNav" aria-controls="mainNav"
aria-expanded="false" aria-label="Toggle navigation">
<span>Menu</span>
</button>
<vc:plugin-selector />
</div>
<vc:main-nav />
</header>
<main id="mainContent">
<section>
<vc:status-message></vc:status-message>
@RenderBody()
</section>
</main>
<script src="~/vendor/bootstrap/bootstrap.bundle.min.js" asp-append-version="true"></script>
@RenderSection("FooterScripts", false)
</body>
</html>