Merge pull request #173 from glaszig/dark-mode

Author: seanmitchell

_sass/base/_root.scss

@@ -49,3 +49,21 @@
   --transition-slow: 0.3s ease;
 
 }
+
+@media(prefers-color-scheme: dark) {
+
+  :root {
+    --rgb-base: 4, 6, 8;
+    --rgb-base-dark: 3, 19, 34;
+    --rgb-base-darker: 5, 63, 118;
+    --rgb-base-darkest: var(--rgb-base-darker);
+    --rgb-grey: 236, 239, 244;
+    --rgb-grey-light: 241, 244, 249;
+    --rgb-blue: 65, 146, 223;
+    --rgb-blue-light: 121, 179, 233;
+    --color-base-dark: var(--color-base);
+    --color-black: rgb(var(--rgb-white));
+    --color-white: rgb(var(--rgb-base-dark));
+  }
+
+}

_sass/base/_rouge.scss

@@ -65,3 +65,57 @@
   .il  { color: #646e78; } /* Literal.Number.Integer.Long */
 
 }
+
+@media(prefers-color-scheme: dark) {
+
+  .highlight {
+
+    background-color: #122b3b;
+
+    .gl { color: #dee5e7; background-color: #4e5d62; }
+    .gp { color: #a8e1fe; }
+    .c, .cd, .cm, .c1, .cs { color: #6c8b9f; font-style: italic; }
+    .cp { color: #b2fd6d; font-style: italic; }
+    .err { color: #fefeec; background-color: #c00; }
+    .gr { color: #c00; font-style: italic; }
+    .k, .kd, .kv { color: #f6dd62; }
+    .o, .ow { color: #4df4ff; }
+    .p, .pi { color: #4df4ff; }
+    .gd { color: #c00; }
+    .gi { color: #b2fd6d; }
+    .ge { font-style: italic; }
+    .gt { color: #dee5e7; background-color: #4e5d62; }
+    .kc { color: #f696db; }
+    .kn { color: #ffb000; }
+    .kp { color: #ffb000; }
+    .kr { color: #ffb000; }
+    .gh { color: #ffb000; }
+    .gu { color: #ffb000; }
+    .kt { color: #b2fd6d; }
+    .no { color: #b2fd6d; }
+    .nc { color: #b2fd6d; }
+    .nd { color: #b2fd6d; }
+    .nn { color: #b2fd6d; }
+    .bp { color: #b2fd6d; }
+    .ne { color: #b2fd6d; }
+    .nl { color: #ffb000; }
+    .nt { color: #ffb000; }
+    .m, .mf, .mh, .mi, .il, .mo, .mb, .mx { color: #f696db; }
+    .ld { color: #f696db; }
+    .ss { color: #f696db; }
+    .s, .sb, .sd, .s2, .sh, .sx, .sr, .s1 { color: #fff0a6; }
+    .se { color: #4df4ff; }
+    .sc { color: #4df4ff; }
+    .si { color: #4df4ff; }
+    .nb {font-weight: bold; }
+    .ni { color: #999; }
+    .w { color: #bbb; }
+    .go { color: #bbb; }
+    .nf { color: #a8e1fe; }
+    .py { color: #a8e1fe; }
+    .na { color: #a8e1fe; }
+    .nv, .vc, .vg, .vi { color: #a8e1fe; }
+
+  }
+
+}

_sass/modules/_footer.scss

@@ -50,4 +50,12 @@
 
   }
 
+  @media(prefers-color-scheme: dark) {
+
+    div ul li a img {
+      filter: invert(100%);
+    }
+
+  }
+
 }

_sass/modules/_nav.scss

@@ -8,7 +8,7 @@
 
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
-      background: rgba(var(--rgb-base), 0.7);
+      background: rgba(var(--rgb-base), 0.85);
       box-shadow:
         0 1px 0 0 rgba(var(--rgb-black), 0.025),
         0 10px 40px -20px rgba(var(--rgb-black), 0.25),

_sass/modules/_page.scss

@@ -211,6 +211,11 @@
 
     }
 
+    figure {
+      border-radius: 0.2em;
+      overflow: hidden;
+    }
+
     nav {
 
       --flow-space: 4.1em;
@@ -431,4 +436,20 @@
 
   }
 
+  @media(prefers-color-scheme: dark) {
+
+    article {
+
+      figure img {
+        filter: invert(100%);
+      }
+
+      .highlight {
+        background: var(--color-base);
+      }
+
+    }
+
+  }
+
 }

_sass/modules/_video.scss

@@ -84,7 +84,7 @@
         }
 
         &:after {
-          background-color: var(--color-white);
+          background-color: rgba(var(--rgb-white), 0.95);
           transform: scale(1.04);
         }