From 13408225b4126151457d5458e69e8f0fd5850d03 Mon Sep 17 00:00:00 2001 From: Sascha Lustenberger | techlan gmbh Date: Tue, 24 Feb 2026 20:08:18 +0100 Subject: [PATCH] feat(ui): add dark mode toggle to navbar Uses Bootstrap 5.3 native data-bs-theme with localStorage persistence. Inline script in prevents flash on page load. Moon/sun icon in top-right navbar switches between light and dark. Co-Authored-By: Claude Sonnet 4.6 --- static/css/styles.css | 33 +++++++++++++++++++++++++++++++++ static/index.html | 11 +++++++++++ static/js/app.js | 25 +++++++++++++++++++++++++ 3 files changed, 69 insertions(+) diff --git a/static/css/styles.css b/static/css/styles.css index a78ddfb..ed991db 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -188,3 +188,36 @@ body.i18n-loading #app-page { font-weight: 600; background: rgba(0, 0, 0, 0.02); } + +/* --------------------------------------------------------------------------- + Dark mode overrides (Bootstrap 5.3 data-bs-theme="dark") + Bootstrap handles most components automatically; only custom elements need + explicit overrides here. +--------------------------------------------------------------------------- */ +[data-bs-theme="dark"] .card { + border-color: rgba(255, 255, 255, 0.08); +} + +[data-bs-theme="dark"] .card-header { + background: rgba(255, 255, 255, 0.04); +} + +[data-bs-theme="dark"] .log-entry { + border-bottom-color: rgba(255, 255, 255, 0.07); +} + +[data-bs-theme="dark"] .log-time { + color: #9ca3af; +} + +[data-bs-theme="dark"] .table th { + color: #9ca3af; +} + +[data-bs-theme="dark"] .login-container { + background: linear-gradient(135deg, #0d0d1a 0%, #0a1020 50%, #071525 100%); +} + +[data-bs-theme="dark"] .stat-card { + background: var(--bs-card-bg); +} diff --git a/static/index.html b/static/index.html index 9af8f71..6d2667d 100644 --- a/static/index.html +++ b/static/index.html @@ -6,6 +6,13 @@ NetBird MSP Appliance + @@ -109,6 +116,10 @@ NetBird MSP
+ +