Add dark mode scss

Author: apiraino

src/styles/app.scss

@@ -281,7 +281,7 @@ h3, .post h2, header h2 {
   h2 {
     font-size: 2em;
   }
-  
+
   h3 {
     display: block;
   }
@@ -324,3 +324,58 @@ header h1 {
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  $yellow: #835f00;
+  $body-bg: #181a1b;
+  $body-fg: #e8e6e3;
+  $font-color: #d5cbc6;
+
+  body {
+    background-color: $body-bg;
+    color: $body-fg;
+  }
+
+  .nav a {
+    color: $font-color;
+  }
+
+  div.brand a {
+    color: white;
+  }
+
+  div.brand img {
+    filter: invert(0.8);
+  }
+
+  .white {
+    color: white;
+    .highlight {
+      background-color: $yellow;
+    }
+  }
+
+  .white a {
+    color: $font-color;
+  }
+
+  .white code {
+    color: white;
+    background-color: rgba(213, 203, 198, 0.05);
+    border: 1px solid rgba(213, 203, 198, 0.25);
+  }
+
+  .white blockquote {
+    color: white;
+    background-color: rgba(213, 203, 198, 0.05);
+    border: 1px solid rgba(213, 203, 198, 0.25);
+    border-left: 8px solid $font-color;
+  }
+
+  .white a.anchor::before {
+    color: $font-color;
+  }
+
+  .publish-date-author {
+    color: $font-color;
+  }
+}