Add automatic dark/light theme switching based on os

README.md

@@ -1,6 +1,6 @@
 # Hello Friend NG
 
-![Hello Friend NG](https://dsh.re/2bd45)
+![Hello Friend NG](https://dsh.re/d914c)
 
 ## General informations
 
@@ -27,7 +27,7 @@ This theme was highly inspired by the [hello-friend](https://github.com/panr/hug
 ---
 ## Features
 
-- Theming: **dark/light mode**, depending on your preferences (dark is default, but you can change it)
+- Theming: **dark/light mode**, depending on your system preferences
 - Great reading experience thanks to [**Inter UI font**](https://rsms.me/inter/), made by [Rasmus Andersson](https://rsms.me/about/)
 - Nice code highlighting thanks to [**PrismJS**](https://prismjs.com)
 - An easy way to modify the theme with Hugo tooling
@@ -86,9 +86,6 @@ paginate     = 10
   keywords = "homepage, blog"
   images = [""]
 
-  # Default theme "light" or "dark"
-  defaultTheme = "dark"
-
 [taxonomies]
     category = "blog"
     tag      = "tags"

assets/js/theme.js

@@ -1,27 +0,0 @@
-// Toggle theme
-
-const theme = window.localStorage && window.localStorage.getItem("theme");
-const themeToggle = document.querySelector(".theme-toggle");
-const isDark = theme === "dark";
-var metaThemeColor = document.querySelector("meta[name=theme-color]");
-
-if (theme !== null) {
-  document.body.classList.toggle("dark-theme", isDark);
-  isDark
-    ? metaThemeColor.setAttribute("content", "#1b1c1d")
-    : metaThemeColor.setAttribute("content", "#fafafa");
-}
-
-themeToggle.addEventListener("click", () => {
-  document.body.classList.toggle("dark-theme");
-
-  window.localStorage &&
-    window.localStorage.setItem(
-      "theme",
-      document.body.classList.contains("dark-theme") ? "dark" : "light"
-    );
-
-  document.body.classList.contains("dark-theme")
-    ? metaThemeColor.setAttribute("content", "#1b1c1d")
-    : metaThemeColor.setAttribute("content", "#fafafa");
-});

assets/scss/_buttons.scss

@@ -23,20 +23,18 @@ a.button {
   cursor: pointer;
   outline: none;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     background: $dark-background-secondary;
     color: inherit;
   }
 
-  /* variants */
-
   &.outline {
     background: transparent;
     border-color: $light-background-secondary;
     box-shadow: none;
     padding: 8px 18px;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
       border-color: $dark-background-secondary;
       color: inherit;
     }
@@ -91,7 +89,7 @@ a.button {
     cursor: pointer;
     outline: none;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
       background: $dark-background-secondary;
       color: inherit;
     }

assets/scss/_header.scss

@@ -1,13 +1,13 @@
 .header {
-  background: #fafafa;
+  background: $light-background-header;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   padding: 20px;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
-    background: #1b1c1d;
+    background: $dark-background-header;
   }
 
   &__right {

assets/scss/_list.scss

@@ -12,7 +12,7 @@
   &:not(:last-of-type) {
     border-bottom: 1px solid $light-border-color;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
       border-color: $dark-border-color;
     }
   }

assets/scss/_main.scss

@@ -35,7 +35,7 @@ body {
     font-size: 1rem;
   }
 
-  &.dark-theme {
+  @media (prefers-color-scheme: dark) {
     background-color: $dark-background;
     color: $dark-color;
   }
@@ -175,7 +175,7 @@ figure {
 em, i, strong {
   color: black;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     color: white;
   }
 }
@@ -190,7 +190,7 @@ code {
   border-radius: 5px;
   font-size: 0.95rem;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     background: $dark-background-secondary;
   }
 }
@@ -214,7 +214,7 @@ pre {
     padding: 0;
     font-size: inherit;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
       color: inherit;
     }
   }
@@ -290,7 +290,7 @@ hr {
   background: $light-border-color;
   height: 1px;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     background: $dark-border-color;
   }
 }

assets/scss/_menu.scss

@@ -1,11 +1,9 @@
 .menu {
-  background: #fafafa;
+  background: $light-background-header;
-  border-right: 1px solid;
-  margin-right: 18px;
   z-index: 9999;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
-    background: #1b1c1d;
+    background: $dark-background-header;
   }
 
   @media #{$media-size-phone} {

assets/scss/_single.scss

@@ -118,7 +118,7 @@
       letter-spacing: 0.1em;
       z-index: 1;
 
-      .dark-theme & {
+      @media (prefers-color-scheme: dark) {
         background: $dark-background;
         color: $dark-color-secondary;
       }
@@ -160,7 +160,7 @@
   cursor: pointer;
   appearance: none;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     background: $dark-background-secondary;
   }
 

assets/scss/_tables.scss

@@ -11,7 +11,7 @@
       padding: 12px 15px;
       border: 1px solid $light-table-color;
 
-      .dark-theme & {
+      @media (prefers-color-scheme: dark) {
         border: 1px solid $dark-table-color;
       }
     }
@@ -22,7 +22,7 @@
         color: $light-color;
         text-align: left;
 
-        .dark-theme & {
+        @media (prefers-color-scheme: dark) {
           background-color: $dark-table-color;
           color: $dark-color;
         }
@@ -32,7 +32,8 @@
     tbody {
       tr {
         border: 1px solid $light-table-color;
-        .dark-theme & {
+        
+        @media (prefers-color-scheme: dark) {
           border: 1px solid $dark-table-color;
         }
       }

assets/scss/_variables.scss

@@ -3,6 +3,7 @@
 /* Light theme color */
 $light-background: #fff;
 $light-background-secondary: #eaeaea;
+$light-background-header: #fafafa;
 $light-color: #222;
 $light-color-secondary: #999;
 $light-border-color: #dcdcdc;
@@ -11,6 +12,7 @@ $light-table-color: #dcdcdc;
 /* Dark theme colors */
 $dark-background: #232425;
 $dark-background-secondary: #3b3d42;
+$dark-background-header: #1b1c1d;
 $dark-color: #a9a9b3;
 $dark-color-secondary: #b3b3bd;
 $dark-border-color: #4e4e57;

exampleSite/config.toml

@@ -100,11 +100,6 @@ disableHugoGeneratorInject = false
   #
   justifyContent = false  # Set "text-align: justify" to .post-content.
 
-  # Default theme "light" or "dark"
-  #
-  defaultTheme = "dark"
-  themeColor = "#1b1c1d"
-
   # Custom footer 
   # If you want, you can easily override the default footer with your own content. 
   #

layouts/_default/baseof.html

@@ -5,7 +5,7 @@
     </head>
 
     {{ block "body" . }}
-        <body class="{{ if ne $.Site.Params.defaultTheme "light" -}} dark-theme {{- end -}}">
+        <body>
     {{ end }}
     
         <div class="container">

layouts/index.html

@@ -1,5 +1,5 @@
 {{ define "body" }}
-    <body class="{{ if ne $.Site.Params.defaultTheme "light" -}} dark-theme {{- end -}} {{ if .Site.Params.background_image }} background-image" style="background-image: url('{{ .Site.Params.backgroundImage }}');" {{ else }}"{{ end }}>
+    <body class="{{ if .Site.Params.background_image }} background-image" style="background-image: url('{{ .Site.Params.backgroundImage }}');" {{ else }}"{{ end }}>
 {{ end }}
 
 {{ define "main" }}

layouts/partials/header.html

@@ -12,8 +12,6 @@
                     </svg>
                 </span>
             {{ end }}
-
-            <span class="theme-toggle unselectable">{{ partial "theme-icon.html" . }}</span>
         </span>
     </span>
 </header>

layouts/partials/javascript.html

@@ -1,8 +1,7 @@
 {{ $main := resources.Get "js/main.js" }}
 {{ $menu := resources.Get "js/menu.js" }}
 {{ $prism := resources.Get "js/prism.js" }}
-{{ $theme := resources.Get "js/theme.js" }}
+{{ $secureJS := slice $main $menu $prism | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
-{{ $secureJS := slice $main $menu $prism $theme | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
 <script type="text/javascript" src="{{ $secureJS.RelPermalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
 
 {{- if .Site.GoogleAnalytics }}

layouts/partials/theme-icon.html

@@ -1,5 +0,0 @@
-<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>