Move dark mode media queries into own blocks

Author: oliverfencott

static/css/docpage.css

@@ -110,12 +110,6 @@
     color: #888;
 }
 
-@media (prefers-color-scheme: dark) {
-    .binding-type {
-        color: #ccc;
-    }
-}
-
 .binding-sym {
     font-family: serif;
     font-weight: 600;
@@ -127,24 +121,12 @@
     font-family: 'Dosis', 'Helvetica', sans-serif;
 }
 
-@media (prefers-color-scheme: dark) {
-    .binding-text {
-        color: unset;
-    }
-}
-
 .example-title {
     margin-top: 28px;
     color: #888;
     font-family: 'Dosis', 'Helvetica', sans-serif;
 }
 
-@media (prefers-color-scheme: dark) {
-    .example-title {
-        color: #ccc;
-    }
-}
-
 /* Toc Toggle */
 
 #toc-toggle {
@@ -198,4 +180,18 @@
 
 .next .prevnext-text::after {
     content: ' >';
+}
+
+@media (prefers-color-scheme: dark) {
+    .binding-type {
+        color: #ccc;
+    }
+
+    .binding-text {
+        color: unset;
+    }
+
+    .example-title {
+        color: #ccc;
+    }
 }

static/css/landing.css

@@ -74,14 +74,6 @@
     overflow-y: auto;
 }
 
-@media (prefers-color-scheme: dark) {
-    #replterm {
-        border-color: #333;
-        background: #333;
-        color: #ccc;
-    }
-}
-
 #replinbar {
     border-radius: 0 0 2px 2px;
     border: solid #ccc 1px;
@@ -92,14 +84,6 @@
     background: #f8f8f8;
 }
 
-@media (prefers-color-scheme: dark) {
-    #replinbar {
-        border-color: #333;
-        color: unset;
-        background: #1a1a1a;
-    }
-}
-
 #replprompt {
     padding: 10px;
     display: inline-block;
@@ -123,12 +107,6 @@
     background: #f0f0f0;
 }
 
-@media (prefers-color-scheme: dark) {
-    #replin:focus {
-        background: unset;
-    }
-}
-
 #replin br {
     display: none;
 }
@@ -169,4 +147,22 @@
     .github-corner .octo-arm {
         animation: octocat-wave 560ms ease-in-out;
     }
+}
+
+@media (prefers-color-scheme: dark) {
+    #replterm {
+        border-color: #333;
+        background: #333;
+        color: #ccc;
+    }
+
+    #replinbar {
+        border-color: #333;
+        color: unset;
+        background: #1a1a1a;
+    }
+
+    #replin:focus {
+        background: unset;
+    }
 }

static/css/main.css

@@ -57,13 +57,6 @@ body {
     color: #222;
 }
 
-@media (prefers-color-scheme: dark) {
-    body {
-        background-color: #222;
-        color: #eee;
-    }
-}
-
 .content-wrapper {
     margin: 0 auto;
     max-width: 800px;
@@ -92,25 +85,13 @@ a {
     color: #2674d3;
 }
 
-@media (prefers-color-scheme: dark) {
-    a {
-        color: #09a5b8;
-    }
-}
-
 h1, h2, h3, h4 {
     margin-left: 15px;
     margin-right: 15px;
     font-family: 'Dosis', 'Helvetica', sans-serif;
     color: #111;
 }
 
-@media (prefers-color-scheme: dark) {
-    h1, h2, h3, h4 {
-        color: #f8f8f2;
-    }
-}
-
 h1 {
     font-size: 3rem;
     padding-top: 3rem;
@@ -137,16 +118,6 @@ h4 {
     padding-bottom: 10px;
 }
 
-@media (prefers-color-scheme: dark) {
-    h3 {
-        color: #e3e0e0;
-    }
-
-    h4 {
-        color: #cccccc;
-    }
-}
-
 @media (max-width: 700px) {
     h1 {
         font-size: 2.5rem;
@@ -299,12 +270,6 @@ code {
     white-space: nowrap;
 }
 
-@media (prefers-color-scheme: dark) {
-    .mendoza-code {
-        background: #333;
-    }
-}
-
 .mendoza-codeblock {
     color: white;
     padding: 14px;
@@ -377,4 +342,32 @@ code {
 .cm-s-monokai .CodeMirror-matchingbracket {
     text-decoration: underline;
     color: white !important;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #222;
+        color: #eee;
+    }
+
+    h1, h2, h3, h4 {
+        color: #f8f8f2;
+    }
+
+    h3 {
+        color: #e3e0e0;
+    }
+
+    h4 {
+        color: #cccccc;
+    }
+
+    a {
+        color: #09a5b8;
+    }
+
+    .mendoza-code {
+        background: #333;
+    }
+
 }