Use prefers-color-scheme only when checking for dark theme

We had an issue where on some browsers, many elements wouldn't appear. This was because when we used prefers-color-scheme, we were checking for both light and dark themes specifically. If a device didn't support it, then neither would be chosen. The solution was to only use prefers-color-scheme when checking for a dark theme, and providing the light theme as default.
cuhacking · Nov 11, 2019 · 6f1a3f0 · 6f1a3f0
1 parent decbe17
commit 6f1a3f0
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 42 deletions.
diff --git a/src/components/navbar.module.css b/src/components/navbar.module.css
@@ -1,12 +1,5 @@
-@media (prefers-color-scheme: light) {
-  * {
-    --navLogo: url('../assets/shortLogo.svg');
-  }
-}
-@media (prefers-color-scheme: dark) {
-  * {
-    --navLogo: url('../assets/shortLogo-dark.svg');
-  }
+* {
+  --navLogo: url('../assets/shortLogo.svg');
 }
 
 #container {
@@ -43,3 +36,9 @@
     justify-content: flex-start;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  * {
+    --navLogo: url('../assets/shortLogo-dark.svg');
+  }
+}
diff --git a/src/index.css b/src/index.css
@@ -1,27 +1,12 @@
-@media (prefers-color-scheme: light) {
-  * {
-    --textColour: #000000;
-    --secondTextColour: #FFFFFF; 
-    --lightPrimaryColour: #9756D8; 
-    --primaryColour: #5827B8;
-    --darkPrimaryColour: #280749;
-    --secondaryColour: #00D0FE;
-    --background: url('./assets/bkg.svg');
-    --backgroundColour: white; 
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  * {
-    --textColour: #ffffff;
-    --secondTextColour: #FFFFFF; 
-    --lightPrimaryColour: #9756D8; 
-    --primaryColour: #5827B8;
-    --darkPrimaryColour: #280749;
-    --secondaryColour: #00D0FE;
-    --background: url('./assets/bkg-dark.svg'); 
-    --backgroundColour: black; 
-  }
+* {
+  --textColour: #000000;
+  --secondTextColour: #FFFFFF; 
+  --lightPrimaryColour: #9756D8; 
+  --primaryColour: #5827B8;
+  --darkPrimaryColour: #280749;
+  --secondaryColour: #00D0FE;
+  --background: url('./assets/bkg.svg');
+  --backgroundColour: white; 
 }
 
 a {
@@ -63,3 +48,16 @@ h2 {
   background-position: bottom;
   min-height: 100vh;
 }
+
+@media (prefers-color-scheme: dark) {
+  * {
+    --textColour: #ffffff;
+    --secondTextColour: #FFFFFF; 
+    --lightPrimaryColour: #9756D8; 
+    --primaryColour: #5827B8;
+    --darkPrimaryColour: #280749;
+    --secondaryColour: #00D0FE;
+    --background: url('./assets/bkg-dark.svg'); 
+    --backgroundColour: black; 
+  }
+}
diff --git a/src/pages/home/index.module.css b/src/pages/home/index.module.css
@@ -1,12 +1,5 @@
-@media (prefers-color-scheme: light) {
-  * {
-    --dateSvg: url('../../assets/dateStamp.svg');
-  }
-}
-@media (prefers-color-scheme: dark) {
-  * {
-    --dateSvg: url('../../assets/dateStamp-dark.svg');
-  }
+* {
+  --dateSvg: url('../../assets/dateStamp.svg');
 }
 
 #content {
@@ -246,3 +239,9 @@
     flex-direction: row;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  * {
+    --dateSvg: url('../../assets/dateStamp-dark.svg');
+  }
+}