Add Dark Mode (#33)

This is the PR you didn't know you wanted! It adds a new (highly opinionated) dark mode functionality using the prefers-color-scheme CSS media feature. The preference is automagically picked up via the settings in the operating system.
PolygeneLubricants · Jun 7, 2024 · 342cd0a · 342cd0a
1 parent 981d378
commit 342cd0a
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -354,4 +354,7 @@ healthchecksdb
 MigrationBackup/
 
 # Ionide (cross platform F# VS Code tools) working folder
-.ionide/
+.ionide/
+
+# JetBrains
+.idea/
diff --git a/src/PlanningPoker.Client/Shared/NavMenu.razor b/src/PlanningPoker.Client/Shared/NavMenu.razor
@@ -1,3 +1,3 @@
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar navbar-light">
     <a class="navbar-brand" href="/"><img src="/icon.png" alt="Just Planning Poker Icon" class="navbar-icon"/>Just Planning Poker</a>
-</nav>
+</nav>
diff --git a/src/PlanningPoker.Client/wwwroot/css/site.css b/src/PlanningPoker.Client/wwwroot/css/site.css
@@ -1,4 +1,69 @@
-/* LOADING */
+/* DARK MODE PALETTE */
+:root {
+    --dark-background-color: #222831;
+    --dark-text-color: #76ABAE;
+    --dark-background-color-alternative: #31363F;
+    --dark-background-color-second-alternative: #EEEEEE
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: var(--dark-background-color);
+        color: var(--dark-text-color);
+    }
+
+    .card {
+        background-color: var(--dark-background-color);
+    }
+
+    .form-control {
+        background-color: var(--dark-background-color) !important;
+        color: var(--dark-text-color);
+
+        &:focus {
+            color: var(--dark-text-color);
+        }
+    }
+
+    .custom-select {
+        background: var(--dark-background-color) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
+        background-size: 8px 10px;
+        color: var(--dark-text-color);
+    }
+
+    .btn {
+        &.poker_card {
+            background-color: var(--dark-background-color);
+            color: var(--dark-text-color);
+            border: 1px solid var(--dark-text-color);
+
+            &.btn-success {
+                background-color: #1E7E34;
+                color: white;
+            }
+        }
+
+        &.clear {
+            background-color: var(--dark-background-color-second-alternative);
+            color: black;
+
+            &:disabled {
+                color: var(--dark-text-color);
+            }
+        }
+    }
+
+    .table-success > td {
+        background-color: var(--dark-background-color-alternative);
+    }
+
+    .notifications > .notification {
+        background: var(--dark-background-color);
+        border: 1px solid var(--dark-text-color);
+    }
+}
+
+/* LOADING */
 
 .loading {
     position: absolute;
@@ -199,4 +264,4 @@ img.navbar-icon {
     margin-right: 6px;
 }
 
-/* END NOTIFICATIONS */
+/* END NOTIFICATIONS */