Add a theme toggle

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");
+}

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;
+    }
   }
 }

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;    

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;
     }
   }
 

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 {

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;

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;
   }

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;
+        }
       }
     }
   }

exampleSite/config.toml

@@ -59,6 +59,8 @@ disableHugoGeneratorInject = false
   keywords = ""
   images = [""]
 
+  # Home subtitle of the index page.
+  #
   homeSubtitle = "Hello Friend NG"
 
   # Set a background for the homepage
@@ -72,6 +74,14 @@ disableHugoGeneratorInject = false
   #
   disableReadOtherPosts = false
 
+  # Enable theme toggle
+  # 
+  # This options enables the theme toggle for the theme. 
+  # Per default, this option is off. 
+  # The theme is respecting the prefers-color-scheme of the operating systeme. 
+  # With this option on, the page user is able to set the scheme he wants. 
+  enableThemeToggle = false
+
   # Sharing buttons
   #
   # There are a lot of buttons preconfigured. If you want to change them,

layouts/partials/header.html

@@ -12,6 +12,10 @@
                     </svg>
                 </span>
             {{ end }}
+
+            {{- if .Site.Params.EnableThemeToggle }}
+                <span class="theme-toggle not-selectable">{{ partial "theme-toggle-icon.html" . }}</span>
+            {{- end}}
         </span>
     </span>
 </header>

layouts/partials/theme-toggle-icon.html

@@ -0,0 +1,5 @@
+<svg class="theme-toggler" width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+   <path d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22
+   3C11.5066 3 3 11.5066 3 22C3 32.4934 11.5066 41 22 41ZM7 22C7
+   13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z"/>
+ </svg>