Better Dark Mode

backend/static/css/style.css

@@ -1,8 +1,36 @@
-body {
+:root {
-    padding-top: 5rem;
+    /* Navbar */
+    --navbar-background-color: #343a40;
+    --navbar-text-color: rgba(255, 255, 255, .5);
+    --navbar-text-color-hover: rgba(255, 255, 255, .75);
+    --navbar-text-color-active: rgba(255, 255, 255, 1);
+
+    /* Common */
+    --background-color: #ffffff;
+    --background-color-var: #f5f5f5;
+    --text-color: #212529;
+    --text-color-var: #343a40;
+
+    /* Modals */
+    --modal-background-color: #ffffff;
+    --modal-separator-color: #dee2e6;
+    --modal-close-color: #212529;
+
+    /* Tables */
+    --table-border-color: #dee2e6;
+
+    /* Input */
+    --input-background-color: #ffffff;
 }
 
-html, body {
+
+body {
+    padding-top: 5rem;
+    background-color: var(--background-color);
+}
+
+html,
+body {
     height: 100%;
 }
 
@@ -12,7 +40,8 @@ html, body {
 }
 
 main {
-    padding-bottom: 60px; /* Höhe des Footers */
+    padding-bottom: 60px;
+    /* Höhe des Footers */
 }
 
 .footer {
@@ -21,7 +50,7 @@ main {
     height: 60px;
     /* Set the fixed height of the footer here */
     /*line-height: 60px; /* Vertically center the text there */
-    background-color: #f5f5f5;
+    background-color: var(--background-color-var);
 }
 
 .topbutton {
@@ -56,6 +85,10 @@ table td:first-child {
     max-width: 200px !important;
 }
 
+.fa-solid {
+    vertical-align: auto;
+}
+
 @media (min-width: 768px) {
     .topbutton {
         width: auto;
@@ -76,58 +109,82 @@ table td:first-child {
     }
 }
 
+body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+.footer {
+    background-color: #232323;
+}
+
+.modal-content {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+.modal-header {
+    background-color: var(--background-color);
+    color: var(--text-color-var);
+    border-color: var(var(--modal-separator-color));
+}
+
+.modal-footer {
+    background-color: var(--background-color);
+    color: var(--text-color-var);
+    border-color: var(var(--modal-separator-color));
+}
+
+.form-control {
+    background-color: var(--input-background-color);
+    color: var(--text-color)
+}
+
+.form-control:focus {
+    background-color: var(--input-background-color);
+    color: var(--text-color)
+}
+
+.table td,
+.table th {
+    border-color: var(--table-border-color)
+}
+
+.table thead th {
+    border-color: var(--table-border-color)
+}
+
+.close {
+    color: var(--text-color)
+}
+
+pre {
+    color: var(--text-color-var)
+}
+
 @media (prefers-color-scheme: dark) {
+    :root {
+        /* Navbar */
+        --navbar-background-color: #343a40;
+        --navbar-text-color: rgba(255, 255, 255, .5);
+        --navbar-text-color-hover: rgba(255, 255, 255, .75);
+        --navbar-text-color-active: rgba(255, 255, 255, 1);
 
-    body {
+        /* Common */
-        background-color: #121212;
+        --background-color: #121212;
-        color: #f5f5f5;
+        --background-color-var: #232323;
-    }
+        --text-color: #f5f5f5;
-    
+        --text-color-var: #a2a2a2;
-    .footer {
-        background-color: #232323;
-    }
 
-    .modal-content {
+        /* Modals */
-        background-color: #121212;
+        --modal-background-color: #121212;
-        color: #f5f5f5;
+        --modal-separator-color: #232323;
-    }
+        --modal-close-color: #f5f5f5;
 
-    .modal-header {
+        /* Tables */
-        background-color: #121212;
+        --table-border-color: #232323;
-        color: #f5f5f5;
-        border-color: #232323;
-    }
 
-    .modal-footer {
+        /* Input */
-        background-color: #121212;
+        --input-background-color: #343434;
-        color: #f5f5f5;
-        border-color: #232323;
     }
-
-    .form-control {
-        background-color: #343434;
-        color: #f5f5f5;
-    }
-
-    .form-control:focus {
-        background-color: #343434;
-        color: #f5f5f5;
-    }
-
-    .table td, .table th {
-        border-color: #232323;
-    }
-
-    .table thead th {
-        border-color: #232323;
-    }
-
-    .close {
-        color: #f5f5f5;
-    }
-    
-    pre {
-        color: #a2a2a2;
-    }
-
 }

backend/templates/base.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="description" content="">
     <meta name="author" content="">
+    <meta name="color-scheme" content="light dark" />
     <link rel="icon" href="favicon.ico">
     <link rel="manifest" href="/static/manifest.webmanifest">
 
@@ -22,8 +23,9 @@
     <link href="static/css/style.css" rel="stylesheet">
 
     <!-- Fontawesome Icons -->
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
-        integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
 
     <!-- Bootstraptoggle -->
     <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
@@ -125,7 +127,7 @@
 
         function loadOrGenerateClientId() {
             if (!localStorage.getItem("clientId")) {
-                localStorage.setItem("clientId",create_UUID())
+                localStorage.setItem("clientId", create_UUID())
             }
         }
     </script>