Use Bootstrap's dark mode (closes #17)

chaosdorf · Aug 11, 2024 · 256f389 · 256f389
1 parent 3588e56
commit 256f389
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/src/static/main.js b/src/static/main.js
@@ -0,0 +1,7 @@
+let mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+function mediaQueryUpdated(mq) {
+    let theme = mq.matches ? "dark" : "light";
+    document.getElementsByTagName("body")[0].setAttribute("data-bs-theme", theme);
+}
+mediaQuery.addListener(mediaQueryUpdated);
+mediaQueryUpdated(mediaQuery);
diff --git a/src/static/style.css b/src/static/style.css
@@ -15,7 +15,7 @@ body {
     width: 100%;
     height: 55px;
     line-height: 55px;
-    background-color: #f5f5f5;
+    background-color: var(--bs-border-color);
 }
 
 div.wizard-buttons {

diff --git a/src/templates/base.html.j2 b/src/templates/base.html.j2
@@ -31,7 +31,7 @@
                     d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
             </symbol>
         </svg>
-        <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
+        <nav class="navbar navbar-expand-md fixed-top">
             <div class="container-fluid">
                 <a class="navbar-brand" href="#">
                     Freitagsfoo: {% block brand %}{% endblock %}