BurgerGames/NetBirdMSP-Appliance
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add dark mode toggle to navbar

Browse Source 
Uses Bootstrap 5.3 native data-bs-theme with localStorage persistence.
Inline script in <head> prevents flash on page load.
Moon/sun icon in top-right navbar switches between light and dark.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sascha Lustenberger | techlan gmbh
2026-02-24 20:08:18 +01:00
parent 0f77aaa176
commit 13408225b4
3 changed files with 69 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
static/index.html
View File

@@ -6,6 +6,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NetBird MSP Appliance</title>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<script>
// Apply dark mode before page renders to prevent flash
(function () {
const saved = localStorage.getItem('darkMode');
if (saved === 'dark') document.documentElement.setAttribute('data-bs-theme', 'dark');
})();
</script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="/static/css/styles.css" rel="stylesheet">
@@ -109,6 +116,10 @@
<span id="nav-brand-name">NetBird MSP</span>
</a>
<div class="d-flex align-items-center">
<!-- Dark Mode Toggle -->
<button class="btn btn-outline-light btn-sm me-2" id="darkmode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
<i id="darkmode-icon" class="bi bi-moon-fill"></i>
</button>
<!-- Language Switcher -->
<div class="dropdown me-2">
<button class="btn btn-outline-light btn-sm dropdown-toggle" id="language-switcher-btn"