Somewhat working dark-mode theme and a toggle

_includes/_footer.liquid

@@ -1,3 +1,14 @@
+<aside>
+  <button id="theme-toggle">
+    <span class="block-light d-none">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+    </span>
+    <span class="block-dark d-none">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+    </span>
+  </button>
+</aside>
+
 <footer>
   <hr>
   <p>
@@ -8,3 +19,5 @@
   </p>
   <br />
 </footer>
+
+<script src="/theme.js"></script>

_includes/_menu.liquid

@@ -8,5 +8,4 @@
   <a class="menu-item" href="/feed.xml">feed</a>
   <a class="menu-item" href="https://hachyderm.io/@jer">@jer</a>
   <a class="menu-item" href="https://github.com/badboy/">github</a>
-  <hr>
 </nav>

style.css

@@ -30,10 +30,48 @@ html{
   line-height:1.5rem
 }
 
+:root,
+html[data-theme='light'] {
+  --main-bg-color: white;
+  --text-color: #111;
+  --alt-text-color: black;
+  --code-bg: rgba(0,0,0,.05);;
+  --border-color: rgba(0,0,0,.05);
+  --link-color: #00e;
+  --link-color-visited: #60b;
+  --inline-code: #111;
+}
+
+html[data-theme='dark'] {
+  --main-bg-color: #111;
+  --text-color: #b3b3b3;
+  --alt-text-color: #999999;
+  --code-bg: #ccc;
+  --border-color: #414141;
+  --link-color: #478be6;
+  --link-color-visited: #c988ff;
+  --inline-code: #323232;
+}
+
+.d-none {
+  display: none;
+}
+[data-theme='light'] .block-light,
+[data-theme='dark'] .block-dark {
+    display: block !important;
+}
+
 html,
 body {
   margin: 0;
   padding: 0;
+  background-color: var(--main-bg-color);
+  color: var(--text-color);
+}
+
+code {
+  color: var(--inline-code);
+  background-color: var(--code-bg);
 }
 
 pre {
@@ -44,16 +82,16 @@ pre {
   line-height: 1.2rem;
 
   /* cobalt's highlighting sets inline values, so we need to overwrite them */
-  background-color: #f7f7f7 !important;
+  background-color: var(--code-bg) !important;
 }
 
 pre > span {
   /* cobalt's highlighting sets inline values, so we need to overwrite them */
-  background-color: #f7f7f7 !important;
+  background-color: var(--code-bg) !important;
 }
 
 time {
-  color: #1a1a1a;
+  color: var(--alt-text-color);
 }
 
 nav {
@@ -82,12 +120,27 @@ nav .menu-item.icon {
 }
 
 nav a.menu-item {
-  color: #000;
+  color: var(--alt-text-color);
+}
+
+aside {
+  font-family: sans-serif;
+  position: fixed;
+  right: 0;
+  top: 0;
+  padding: 10px 10px;
+}
+
+#theme-toggle {
+  cursor: pointer;
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--text-color);
 }
 
 .menu-item.current,
 .menu-item:hover {
-  border-left: 3px solid #000;
+  border-left: 3px solid var(--alt-text-color);
 }
 
 main {
@@ -125,17 +178,24 @@ article.blog-list {
 }
 
 article.blog-list a {
-  color: black;
+  color: var(--text-color);
   text-decoration: none;
 }
+article.blog-list a:visited {
+  color: var(--text-color);
+}
 
 article .metadata a {
   text-decoration: underline;
-  color: black;
+  color: var(--alt-text-color);
 }
 
 article a {
   text-decoration: underline;
+  color: var(--link-color);
+}
+article a:visited {
+  color: var(--link-color-visited);
 }
 
 /* begin article banner */
@@ -189,6 +249,10 @@ hr {
   background-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
 }
 
+blockquote {
+  border-color: var(--border-color);
+
+}
 blockquote p {
     word-wrap: break-word;
 }

theme.js

@@ -0,0 +1,18 @@
+var toggle = document.getElementById("theme-toggle");
+
+var storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+if (storedTheme) {
+    document.documentElement.setAttribute('data-theme', storedTheme)
+}
+
+toggle.onclick = function() {
+  var currentTheme = document.documentElement.getAttribute("data-theme");
+  var targetTheme = "light";
+
+  if (currentTheme === "light") {
+    targetTheme = "dark";
+  }
+
+  document.documentElement.setAttribute('data-theme', targetTheme)
+  localStorage.setItem('theme', targetTheme);
+};