Add a theme toggle

assets/scss/_main.scss

@@ -19,8 +19,6 @@ body {
   font-display: auto;
   font-size: 1rem;
   line-height: 1.54;
-  background-color: $light-background;
-  color: $light-color;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
@@ -39,6 +37,21 @@ body {
     background-color: $dark-background;
     color: $dark-color;
   }
+
+  @media (prefers-color-scheme: light) {
+    background-color: $light-background;
+    color: $light-color;
+  }
+
+  [data-theme=dark] & {
+    background-color: $dark-background;
+    color: $dark-color;
+  }
+
+  [data-theme=light] & {
+    background-color: $light-background;
+    color: $light-color;
+  }
 }
 
 h2,
@@ -173,18 +186,27 @@ figure {
 }
 
 em, i, strong {
-  color: black;
-
   @media (prefers-color-scheme: dark) {
     color: white;
   }
+
+  @media (prefers-color-scheme: light) {
+    color: black;
+  }
+
+  [data-theme=dark] & {
+    color: white;
+  }
+
+  [data-theme=light] & {
+    color: black;
+  }
 }
 
 code {
   font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
   font-display: auto;
   font-feature-settings: normal;
-  background: $light-background-secondary;
   padding: 1px 6px;
   margin: 0 2px;
   border-radius: 5px;
@@ -193,6 +215,18 @@ code {
   @media (prefers-color-scheme: dark) {
     background: $dark-background-secondary;
   }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-background-secondary;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-secondary;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-secondary;
+  }
 }
 
 pre {
@@ -209,7 +243,6 @@ pre {
 
   code {
     background: none !important;
-    color: #ccc;
     margin: 0;
     padding: 0;
     font-size: inherit;
@@ -217,6 +250,18 @@ pre {
     @media (prefers-color-scheme: dark) {
       color: inherit;
     }
+  
+    @media (prefers-color-scheme: light) {
+      color: #ccc;
+    }
+  
+    [data-theme=dark] & {
+      color: inherit;
+    }
+  
+    [data-theme=light] & {
+      color: #ccc;
+    }
   }
 }
 
@@ -287,12 +332,23 @@ ol ol {
 hr {
   width: 100%;
   border: none;
-  background: $light-border-color;
   height: 1px;
 
   @media (prefers-color-scheme: dark) {
     background: $dark-border-color;
   }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-border-color;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-border-color;
+  }
+
+  [data-theme=light] & {
+    background: $light-border-color;
+  }
 }
 
 .hidden {