♻️ Use .dark globally for dark theme

upptime · Dec 10, 2020 · bf21f20 · bf21f20
1 parent 6907e45
commit bf21f20
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 16 deletions.
diff --git a/src/components/ActiveIncidents.svelte b/src/components/ActiveIncidents.svelte
@@ -53,10 +53,8 @@
     background-color: #dcffeb;
     color: #003300;
   }
-  @media (prefers-color-scheme: dark) {
-    article {
-      background-color: #700000;
-    }
+  :global(.dark) article {
+    background-color: #700000;
   }
 </style>
 

diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
@@ -14,10 +14,8 @@
     overflow-x: auto;
   }
 
-  @media (prefers-color-scheme: dark) {
-    nav {
-      background-color: #002b29;
-    }
+  :global(.dark) nav {
+    background-color: #002b29;
   }
 
   ul {

diff --git a/static/global.css b/static/global.css
@@ -129,12 +129,10 @@ dl dd {
   margin: 0 0 1rem 0;
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: #001716;
-    color: #f0ffff;
-  }
-  article {
-    background-color: #002b29;
-  }
+.dark body {
+  background-color: #001716;
+  color: #f0ffff;
+}
+.dark article {
+  background-color: #002b29;
 }