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,60 @@ header h1 {
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --body-background-color: #181a1b;
+    --body-foreground-color: #e8e6e3;
+    --color: #d5cbc6;
+    --yellow: #835f00;
+  }
+
+  body {
+    background-color: var(--body-background-color);
+    color: var(--body-foreground-color);
+  }
+
+  .nav a {
+    color: var(--color);
+  }
+
+  div.brand a {
+    color: white;
+  }
+
+  div.brand img {
+    filter: invert(0.8);
+  }
+
+  .white {
+    color: white;
+    .highlight {
+      background-color: var(--yellow);
+    }
+  }
+
+  .white a {
+    color: var(--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 var(--color);
+  }
+
+  .white a.anchor::before {
+    color: var(--color);
+  }
+
+  .publish-date-author {
+    color: var(--color);
+  }
+}