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;
+    }
+  }
+  i {
     color: $fg-color;
     cursor: pointer;
     &:hover,
     &:focus {
-        color: $link-color
+      color: $link-color;
-      }
     }
   }
 }

assets/scss/_navigation_dark.scss

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

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

@@ -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,8 +4,13 @@
       {{ .Site.Title }}
     </a>
     {{ if or .Site.Menus.main .Site.IsMultiLingual }}
+      <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"></i></label>
+      <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 . }}
@@ -31,6 +36,9 @@
             {{ end }}
           {{ end }}
         {{ end }}
+        <li class="navigation-item separator">
+          <span>|</span>
+        </li>
       </ul>
     {{ end }}
   </section>

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.content

@@ -0,0 +1 @@
+body.colorscheme-dark{color:#dadada;background-color:#212121}body.colorscheme-dark a{color:#42a5f5}body.colorscheme-dark h1,body.colorscheme-dark h2,body.colorscheme-dark h3,body.colorscheme-dark h4,body.colorscheme-dark h5,body.colorscheme-dark h6{color:#dadada}body.colorscheme-dark code{background-color:#424242;color:#dadada}body.colorscheme-dark pre code{background-color:inherit;color:inherit}body.colorscheme-dark blockquote{border-left:2px solid #424242}body.colorscheme-dark table td,body.colorscheme-dark table th{border:2px solid #dadada}@media(prefers-color-scheme:dark){body.colorscheme-auto{color:#dadada;background-color:#212121}body.colorscheme-auto a{color:#42a5f5}body.colorscheme-auto h1,body.colorscheme-auto h2,body.colorscheme-auto h3,body.colorscheme-auto h4,body.colorscheme-auto h5,body.colorscheme-auto h6{color:#dadada}body.colorscheme-auto code{background-color:#424242;color:#dadada}body.colorscheme-auto pre code{background-color:inherit;color:inherit}body.colorscheme-auto blockquote{border-left:2px solid #424242}body.colorscheme-auto table td,body.colorscheme-auto table th{border:2px solid #dadada}}body.colorscheme-dark .content .list ul li .title{color:#dadada}body.colorscheme-dark .content .list ul li .title:hover,body.colorscheme-dark .content .list ul li .title:focus{color:#42a5f5}body.colorscheme-dark .content .centered .about ul li a{color:#dadada}body.colorscheme-dark .content .centered .about ul li a:hover,body.colorscheme-dark .content .centered .about ul li a:focus{color:#42a5f5}@media(prefers-color-scheme:dark){body.colorscheme-auto .content .list ul li .title{color:#dadada}body.colorscheme-auto .content .list ul li .title:hover,body.colorscheme-auto .content .list ul li .title:focus{color:#42a5f5}body.colorscheme-auto .content .centered .about ul li a{color:#dadada}body.colorscheme-auto .content .centered .about ul li a:hover,body.colorscheme-auto .content .centered .about ul li a:focus{color:#42a5f5}}body.colorscheme-dark .navigation a,body.colorscheme-dark .navigation span{color:#dadada}body.colorscheme-dark .navigation a:hover,body.colorscheme-dark .navigation a:focus{color:#42a5f5}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .navigation-list{background-color:#212121;border-top:solid 2px #424242;border-bottom:solid 2px #424242}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .navigation-list .menu-separator{border-top:2px solid #dadada}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation #menu-toggle:checked+label>i{color:#424242}}body.colorscheme-dark .navigation i{color:#dadada}body.colorscheme-dark .navigation i:hover,body.colorscheme-dark .navigation i:focus{color:#42a5f5}@media(prefers-color-scheme:dark){body.colorscheme-auto .navigation a,body.colorscheme-auto .navigation span{color:#dadada}body.colorscheme-auto .navigation a:hover,body.colorscheme-auto .navigation a:focus{color:#42a5f5}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .navigation-list{background-color:#212121;border-top:solid 2px #424242;border-bottom:solid 2px #424242}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .navigation-list .menu-separator{border-top:2px solid #dadada}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation #menu-toggle:checked+label>i{color:#424242}}@media(prefers-color-scheme:dark){body.colorscheme-auto .navigation i{color:#dadada}body.colorscheme-auto .navigation i:hover,body.colorscheme-auto .navigation i:focus{color:#42a5f5}}body.colorscheme-dark .footer a{color:#42a5f5}@media(prefers-color-scheme:dark){body.colorscheme-auto .footer a{color:#42a5f5}}

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="}}