dark mode

Author: mstathers

_layouts/default.html

@@ -46,7 +46,10 @@ <h1><a class="header" href=/>Stathers.net</a></h1>
     Stathers.net
     <div>
         <a class="img_link" style="float:left" href="https://github.com/mstathers/" target="_blank">
-            <img class="social_icon" src="/css/GitHub-Mark-32px.png" alt="https://github.com/mstathers">
+            <picture class="social_icon" alt="https://github.com/mstathers">
+                <source srcset="css/GitHub-Mark-White-32px.png" media="(prefers-color-scheme: dark)" />
+                <img src="css/GitHub-Mark-32px.png" />
+            </picture>
         </a>
 
         <a class="img_link" style="float:left" href="https://www.linkedin.com/in/mstathers" target="_blank">

contact.html

@@ -18,7 +18,10 @@ <h2>Contact Information</h2>
         </a><br>
 
         <a class="img_link" href="https://github.com/mstathers/" target="_blank">
-            <img class="social_icon" src="css/GitHub-Mark-32px.png" alt="https://github.com/mstathers">
+            <picture class="social_icon" alt="https://github.com/mstathers">
+                <source srcset="css/GitHub-Mark-White-32px.png" media="(prefers-color-scheme: dark)" />
+                <img src="css/GitHub-Mark-32px.png" />
+            </picture>
         </a><br>
     </div>
 </div>

css/GitHub-Mark-White-32px.png

@@ -135,3 +135,31 @@ a.img_link {
     clear: both;
     padding: 4px;
 }
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #181a1b;
+        color: rgb(232, 230, 227);
+    }
+    .header a, .nav_bar a, a {
+        color: rgb(232, 230, 227);
+    }
+    #nav {
+        background: #202324;
+    }
+    #blog_index {
+        background: #202324;
+    }
+    blockquote {
+        background: #202324;
+    }
+
+    .highlight .o { color: #848181 } /* Operator */
+    .highlight .s { background-color: #3a3131 } /* Literal.String */
+    .highlight .sb { background-color: #3a3131 } /* Literal.String.Backtick */
+    .highlight .s2 { background-color: #3a3131 } /* Literal.String.Double */
+    .highlight .se { color: #606060; font-weight: bold; background-color: #3a3131 } /* Literal.String.Escape */
+    .highlight .sh { background-color: #3a3131 } /* Literal.String.Heredoc */
+    .highlight .sh { background-color: #3a3131 } /* Literal.String.Heredoc */
+    .highlight .s1 { background-color: #3a3131 } /* Literal.String.Single */
+}