Add theme toggle button feature (#358)

* Add theme toggle button feature

* Add theme toggle button feature

* Replaced svg icon with FA icon + fixed indentation + refactored css

* Added back colorsheme configurations + script moved to be process by hugo pipe

* Make release

* Fix toggle button not working when loading new page + setTheme() refactor

* Make release

* Update exampleSite/config.toml

Co-authored-by: Luiz F. A. de Prá <luizdepra@users.noreply.github.com>

assets/scss/_navigation.scss

@@ -55,6 +55,11 @@
         margin-right: 1.0rem;
       }
     }
+    .separator {
+      @media only screen and (max-width : 768px) {
+        display: none;
+      }
+    }
     .menu-separator {
       @media only screen and (max-width : 768px) {
         border-top: 2px solid $fg-color;
@@ -65,10 +70,15 @@
       }
     }
   }
+  #dark-mode-toggle {
+    margin: 1.7rem 0;
+    font-size: 2.4rem;
+    line-height: inherit;
+  }
   #menu-toggle {
     display: none;
     @media only screen and (max-width : 768px) {
-      &:checked + label {
+      &:checked + label > i {
         color: $alt-bg-color;
       }
       &:checked + label + ul {
@@ -82,15 +92,17 @@
     display: none;
     @media only screen and (max-width : 768px) {
       display: block;
+      margin: 1.8rem 0;
       font-size: 2.4rem;
       font-weight: 400;
-      line-height: 6.0rem;
-      color: $fg-color;
-      cursor: pointer;
-      &:hover,
-      &:focus {
-        color: $link-color
-      }
+    }
+  }
+  i {
+    color: $fg-color;
+    cursor: pointer;
+    &:hover,
+    &:focus {
+      color: $link-color;
     }
   }
 }

assets/scss/_navigation_dark.scss

@@ -25,18 +25,16 @@
     }
     #menu-toggle {
       @media only screen and (max-width : 768px) {
-        &:checked + label {
+        &:checked + label > i {
           color: $alt-bg-color-dark;
         }
       }
     }
-    .menu-button {
-      @media only screen and (max-width : 768px) {
-        color: $fg-color-dark;
-        &:hover,
-        &:focus {
-          color: $link-color-dark;
-        }
+    i {
+      color: $fg-color-dark;
+      &:hover,
+      &:focus {
+        color: $link-color-dark;
       }
     }
   }

exampleSite/assets/js/dark-mode.js

@@ -0,0 +1,28 @@
+const body = document.body;
+const darkModeToggle = document.getElementById('dark-mode-toggle');
+const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+// Check if user preference is set, if not check value of body class for light or dark else it means that colorsheme = auto
+if (localStorage.getItem("colorscheme")) {
+  setTheme(localStorage.getItem("colorscheme"));
+} else if (body.classList.contains('colorscheme-light') || body.classList.contains('colorscheme-dark')) {
+  setTheme(body.classList.contains("colorscheme-dark") ? "dark" : "light");
+} else {
+  setTheme(darkModeMediaQuery.matches ? "dark" : "light");
+}
+
+darkModeToggle.addEventListener('click', () => {
+  setTheme(body.classList.contains("colorscheme-dark") ? "light" : "dark");
+});
+
+darkModeMediaQuery.addListener((event) => {
+  setTheme(event.matches ? "dark" : "light");
+});
+
+function setTheme(theme) {
+  body.classList.remove('colorscheme-auto');
+  inverse = theme === 'dark' ? 'light' : 'dark';
+  localStorage.setItem('colorscheme', theme);
+  body.classList.remove('colorscheme-' + inverse);
+  body.classList.add('colorscheme-' + theme);
+}

exampleSite/config.toml

@@ -41,7 +41,7 @@ disqusShortname = "yourdiscussshortname"
     # "auto" (use preference set by browser)
     # "dark" (dark background, light foreground)
     # "light" (light background, dark foreground) (default)
-    colorscheme = "light"
+    colorscheme = "auto"
 
     # Series see also post count
     maxSeeAlsoItems = 5

layouts/_default/baseof.html

@@ -89,7 +89,7 @@
 
     {{ hugo.Generator }}
   </head>
-
+  
   {{ $csClass := "colorscheme-light" }}
   {{ if eq .Site.Params.colorscheme "dark" }}
     {{ $csClass = "colorscheme-dark" }}
@@ -109,6 +109,14 @@
       {{ partial "footer.html" . }}
     </main>
 
+    {{ if .Site.IsServer }}
+      {{ $script := resources.Get "js/dark-mode.js" }}
+      <script src="{{ $script.RelPermalink }}"></script>
+    {{ else }}
+      {{ $script := resources.Get "js/dark-mode.js" | minify | fingerprint }}
+      <script src="{{ $script.RelPermalink }}"></script>
+    {{ end }}
+
     {{ range .Site.Params.custom_js }}
       <script src="{{ . | relURL }}"></script>
     {{ end }}

layouts/partials/header.html

@@ -4,34 +4,42 @@
       {{ .Site.Title }}
     </a>
     {{ if or .Site.Menus.main .Site.IsMultiLingual }}
-    <input type="checkbox" id="menu-toggle" />
-    <label class="menu-button float-right" for="menu-toggle"><i class="fas fa-bars"></i></label>
-    <ul class="navigation-list">
-      {{ with .Site.Menus.main}}
-        {{ range sort . }}
-          <li class="navigation-item">
-            <a class="navigation-link" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
-          </li>
+      <span id="dark-mode-toggle" class="float-right">
+        <i class="fas fa-adjust fa-fw"></i>
+      </span>
+      <input type="checkbox" id="menu-toggle" />
+      <label class="menu-button float-right" for="menu-toggle">
+        <i class="fas fa-bars fa-fw"></i>
+      </label>
+      <ul class="navigation-list">
+        {{ with .Site.Menus.main}}
+          {{ range sort . }}
+            <li class="navigation-item">
+              <a class="navigation-link" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
+            </li>
+          {{ end }}
         {{ end }}
-      {{ end }}
-      {{ if .Site.IsMultiLingual }}
-        {{ $node := . }}
-        {{ .Scratch.Set "separator" true }}
-        {{ range (default .Site.Home.AllTranslations .Translations) }}
-          {{ if ne $.Site.Language .Language }}
-            {{ if $node.Scratch.Get "separator" }}
-              <li class="navigation-item menu-separator">
-                <span>|</span>
+        {{ if .Site.IsMultiLingual }}
+          {{ $node := . }}
+          {{ .Scratch.Set "separator" true }}
+          {{ range (default .Site.Home.AllTranslations .Translations) }}
+            {{ if ne $.Site.Language .Language }}
+              {{ if $node.Scratch.Get "separator" }}
+                <li class="navigation-item menu-separator">
+                  <span>|</span>
+                </li>
+                {{ $node.Scratch.Set "separator" false }}
+              {{ end }}
+              <li class="navigation-item">
+                <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
               </li>
-              {{ $node.Scratch.Set "separator" false }}
             {{ end }}
-            <li class="navigation-item">
-              <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
-            </li>
           {{ end }}
         {{ end }}
-      {{ end }}
-    </ul>
+        <li class="navigation-item separator">
+          <span>|</span>
+        </li>
+      </ul>
     {{ end }}
   </section>
 </nav>

resources/_gen/assets/js/js/dark-mode.js_d11fe7b62c27961c87ecd0f2490357b9.content

@@ -0,0 +1,2 @@
+const body=document.body;const darkModeToggle=document.getElementById('dark-mode-toggle');const darkModeMediaQuery=window.matchMedia('(prefers-color-scheme: dark)');if(localStorage.getItem("colorscheme")){setTheme(localStorage.getItem("colorscheme"));}else if(body.classList.contains('colorscheme-light')||body.classList.contains('colorscheme-dark')){setTheme(body.classList.contains("colorscheme-dark")?"dark":"light");}else{setTheme(darkModeMediaQuery.matches?"dark":"light");}
+darkModeToggle.addEventListener('click',()=>{setTheme(body.classList.contains("colorscheme-dark")?"light":"dark");});darkModeMediaQuery.addListener((event)=>{setTheme(event.matches?"dark":"light");});function setTheme(theme){body.classList.remove('colorscheme-auto');inverse=theme==='dark'?'light':'dark';localStorage.setItem('colorscheme',theme);body.classList.remove('colorscheme-'+inverse);body.classList.add('colorscheme-'+theme);}

resources/_gen/assets/js/js/dark-mode.js_d11fe7b62c27961c87ecd0f2490357b9.json

@@ -0,0 +1 @@
+{"Target":"js/dark-mode.min.0213e1773e6d1c5a644f847c67a6f8abac49a3776e2976f6008038af8c5b76a1.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-AhPhdz5tHFpkT4R8Z6b4q6xJo3duKXb2AIA4r4xbdqE="}}

resources/_gen/assets/scss/scss/coder-dark.scss_1fcd9040f1144c65015c77e7b93bc5ac.json

@@ -0,0 +1 @@
+{"Target":"css/coder-dark.min.717236c74e0a5208ef73964a9f44c6b443b689a95b270d8b2a40d0c012460dac.css","MediaType":"text/css","Data":{"Integrity":"sha256-cXI2x04KUgjvc5ZKn0TGtEO2ialbJw2LKkDQwBJGDaw="}}

resources/_gen/assets/scss/scss/coder.scss_5e1eb8e37c42cdfb6215b61e44dcfa5f.json

@@ -1 +1 @@
-{"Target":"css/coder.min.3219ef62ae52679b7a9c19043171c3cd9f523628c2a65f3ef247ee18836bc90b.css","MediaType":"text/css","Data":{"Integrity":"sha256-MhnvYq5SZ5t6nBkEMXHDzZ9SNijCpl8+8kfuGINryQs="}}
+{"Target":"css/coder.min.0e5ce5b959a68dfe0232c6ddcec1e8ef154517c968464707f3181c437fe611c0.css","MediaType":"text/css","Data":{"Integrity":"sha256-DlzluVmmjf4CMsbdzsHo7xVFF8loRkcH8xgcQ3/mEcA="}}