Add a theme toggle

8 files changed, 259 insertions, 27 deletions

diff --git a/assets/js/main.js b/assets/js/main.js
index f4a810a..dc302a1 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1 +1,51 @@
-// Some code could be here ...
+/**
+ * Theming.
+ *
+ * Supports the preferred color scheme of the operation system as well as
+ * the theme choice of the user.
+ *
+ */
+const themeToggle = document.querySelector(".theme-toggle");
+const chosenTheme = window.localStorage && window.localStorage.getItem("theme");
+const chosenThemeIsDark = chosenTheme == "dark";
+const chosenThemeIsLight = chosenTheme == "light";
+
+// Detect the color scheme the operating system prefers.
+function detectOSColorTheme() {
+  if (chosenThemeIsDark) {
+    document.documentElement.setAttribute("data-theme", "dark");
+  } else if (chosenThemeIsLight) {
+    document.documentElement.setAttribute("data-theme", "light");
+  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    document.documentElement.setAttribute("data-theme", "dark");
+  } else {
+    document.documentElement.setAttribute("data-theme", "light");
+  }
+}
+
+// Switch the theme.
+function switchTheme(e) {
+  if (chosenThemeIsDark) {
+    localStorage.setItem("theme", "light");
+  } else {
+    localStorage.setItem("theme", "dark");
+  }
+
+  detectOSColorTheme();
+  window.location.reload();
+}
+
+// Event listener
+if (themeToggle) {
+  themeToggle.addEventListener("click", switchTheme, false);
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", (e) => e.matches && detectOSColorTheme());
+  window
+    .matchMedia("(prefers-color-scheme: light)")
+    .addEventListener("change", (e) => e.matches && detectOSColorTheme());
+
+  detectOSColorTheme();
+} else {
+  localStorage.removeItem("theme");
+}
diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss
index 73e72a4..3e59e48 100644
--- a/assets/scss/_buttons.scss
+++ b/assets/scss/_buttons.scss
@@ -13,7 +13,6 @@ a.button {
   justify-content: center;
   padding: 8px 18px;
   margin-bottom: 5px;
-  background: $light-background-secondary;
   text-decoration: none;
   text-align: center;
   font-weight: 500;
@@ -24,13 +23,25 @@ a.button {
   outline: none;
 
   @media (prefers-color-scheme: dark) {
-    background: $dark-background-secondary;
+    background: $dark-background-header;
     color: inherit;
   }
 
+  @media (prefers-color-scheme: light) {
+    background: $light-background-header;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-header;
+    color: inherit;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-header;
+  }
+
   &.outline {
     background: transparent;
-    border-color: $light-background-secondary;
     box-shadow: none;
     padding: 8px 18px;
 
@@ -38,6 +49,19 @@ a.button {
       border-color: $dark-background-secondary;
       color: inherit;
     }
+  
+    @media (prefers-color-scheme: light) {
+      border-color: $light-background-secondary;
+    }
+  
+    [data-theme=dark] & {
+      border-color: $dark-background-secondary;
+      color: inherit;
+    }
+  
+    [data-theme=light] & {
+      border-color: $light-background-secondary;
+    }
 
     :hover {
       transform: none;
@@ -78,7 +102,6 @@ a.button {
     justify-content: center;
     padding: 3px 8px;
     margin-bottom: 5px;
-    background: $light-background-secondary;
     text-decoration: none;
     text-align: center;
     font-size: 13px;
@@ -93,5 +116,18 @@ a.button {
       background: $dark-background-secondary;
       color: inherit;
     }
+  
+    @media (prefers-color-scheme: light) {
+      background: $light-background-secondary;
+    }
+  
+    [data-theme=dark] & {
+      background: $dark-background-secondary;
+      color: inherit;
+    }
+  
+    [data-theme=light] & {
+      background: $light-background-secondary;
+    }
   }
 }
diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss
index fe0af42..e3cdc16 100644
--- a/assets/scss/_header.scss
+++ b/assets/scss/_header.scss
@@ -1,5 +1,4 @@
 .header {
-  background: $light-background-header;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,6 +9,18 @@
     background: $dark-background-header;
   }
 
+  @media (prefers-color-scheme: light) {
+    background: $light-background-header;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-header;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-header;
+  }
+
   &__right {
     display: flex;
     flex-direction: row;
@@ -42,7 +53,7 @@
   fill: currentColor;
 }
 
-.unselectable {
+.not-selectable {
   user-select: none;
   -webkit-user-select: none;  
   -moz-user-select: none;    
diff --git a/assets/scss/_list.scss b/assets/scss/_list.scss
index c77b0f9..7b45769 100644
--- a/assets/scss/_list.scss
+++ b/assets/scss/_list.scss
@@ -10,10 +10,20 @@
   }
 
   &:not(:last-of-type) {
-    border-bottom: 1px solid $light-border-color;
-
     @media (prefers-color-scheme: dark) {
-      border-color: $dark-border-color;
+      border-bottom: 1px solid $dark-border-color;
+    }
+  
+    @media (prefers-color-scheme: light) {
+      border-bottom: 1px solid $light-border-color;
+    }
+  
+    [data-theme=dark] & {
+      border-bottom: 1px solid $dark-border-color;
+    }
+  
+    [data-theme=light] & {
+      border-bottom: 1px solid $light-border-color;
     }
   }
 
diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss
index e59a4d5..f771218 100644
--- a/assets/scss/_main.scss
+++ b/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 {
diff --git a/assets/scss/_menu.scss b/assets/scss/_menu.scss
index 5fc75fb..77ecfde 100644
--- a/assets/scss/_menu.scss
+++ b/assets/scss/_menu.scss
@@ -1,11 +1,22 @@
 .menu {
-  background: $light-background-header;
   z-index: 9999;
 
   @media (prefers-color-scheme: dark) {
     background: $dark-background-header;
   }
 
+  @media (prefers-color-scheme: light) {
+    background: $light-background-header;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-header;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-header;
+  }
+
   @media #{$media-size-phone} {
     position: absolute;
     top: 50px;
diff --git a/assets/scss/_single.scss b/assets/scss/_single.scss
index dd478a9..381d422 100644
--- a/assets/scss/_single.scss
+++ b/assets/scss/_single.scss
@@ -110,8 +110,6 @@
       text-align: center;
       margin: 0 auto;
       padding: 5px 10px;
-      background: $light-background;
-      color: $light-color-secondary;
       font-size: 0.8rem;
       text-transform: uppercase;
       text-decoration: none;
@@ -122,6 +120,21 @@
         background: $dark-background;
         color: $dark-color-secondary;
       }
+    
+      @media (prefers-color-scheme: light) {
+        background: $light-background;
+        color: $light-color-secondary;
+      }
+    
+      [data-theme=dark] & {
+        background: $dark-background;
+        color: $dark-color-secondary;
+      }
+    
+      [data-theme=light] & {
+        background: $light-background;
+        color: $light-color-secondary;
+      }
     }
 
     hr {
@@ -151,7 +164,6 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: $light-background-secondary;
   font-size: 1rem;
   font-weight: 600;
   border-radius: 8px;
@@ -164,6 +176,18 @@
     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;
+  }
+
   + .button {
     margin-left: 10px;
   }
diff --git a/assets/scss/_tables.scss b/assets/scss/_tables.scss
index 986ee41..e0d58a2 100644
--- a/assets/scss/_tables.scss
+++ b/assets/scss/_tables.scss
@@ -9,33 +9,67 @@
     th,
     td {
       padding: 12px 15px;
-      border: 1px solid $light-table-color;
-
+      
       @media (prefers-color-scheme: dark) {
         border: 1px solid $dark-table-color;
       }
+    
+      @media (prefers-color-scheme: light) {
+        border: 1px solid $light-table-color;
+      }
+    
+      [data-theme=dark] & {
+        border: 1px solid $dark-table-color;
+      }
+    
+      [data-theme=light] & {
+        border: 1px solid $light-table-color;
+      }
     }
 
     thead {
       tr {
-        background-color: $light-table-color;
-        color: $light-color;
         text-align: left;
 
         @media (prefers-color-scheme: dark) {
           background-color: $dark-table-color;
           color: $dark-color;
         }
+      
+        @media (prefers-color-scheme: light) {
+          background-color: $light-table-color;
+          color: $light-color;
+        }
+      
+        [data-theme=dark] & {
+          background-color: $dark-table-color;
+          color: $dark-color;
+        }
+      
+        [data-theme=light] & {
+          background-color: $light-table-color;
+          color: $light-color;
+        }
       }
     }
 
     tbody {
       tr {
-        border: 1px solid $light-table-color;
-        
         @media (prefers-color-scheme: dark) {
           border: 1px solid $dark-table-color;
         }
+      
+        @media (prefers-color-scheme: light) {
+          border: 1px solid $light-table-color;
+        }
+      
+        [data-theme=dark] & {
+          border: 1px solid $dark-table-color;
+        }
+      
+        [data-theme=light] & {
+          border: 1px solid $light-table-color;
+        }
       }
     }
   }