add dark mode toggle functionality

assets/scss/_base_dark.scss

@@ -1,5 +1,4 @@
 @mixin base_dark {
-
   color: $fg-color-dark;
   background-color: $bg-color-dark;
 
@@ -32,18 +31,18 @@
     border-left: 2px solid $alt-bg-color-dark;
   }
 
-  table td, table th {
+  table td,
+  table th {
     border: 2px solid $alt-fg-color-dark;
   }
-
 }
 
 body.colorscheme-dark {
-  @include base_dark()
+  @include base_dark();
 }
 
 body.colorscheme-auto {
   @media (prefers-color-scheme: dark) {
-    @include base_dark()
+    @include base_dark();
   }
 }

assets/scss/_footer.scss

@@ -1,9 +1,32 @@
 .footer {
   width: 100%;
   text-align: center;
-  line-height: 2.0rem;
-  margin-bottom:1.0rem;
+  font-size: 0.8em;
+  line-height: 2rem;
+  margin-bottom: 1rem;
   a {
     color: $link-color;
   }
 }
+
+.cs-mode-container {
+  margin: 0 0 0 0.3em;
+}
+
+.cs-mode-button {
+  padding: 0 0.3em;
+  border: none;
+  background: transparent;
+  font-family: $heading-font-family;
+  cursor: pointer;
+
+  &:hover {
+    color: $link-color;
+    text-decoration: underline;
+  }
+}
+
+.cs-mode-state {
+  text-transform: capitalize;
+  font-weight: $heading-font-weight--bold;
+}

assets/scss/_footer_dark.scss

@@ -4,14 +4,23 @@
       color: $link-color-dark;
     }
   }
+
+  .cs-mode-button {
+    color: $fg-color-dark;
+
+    &:hover {
+      color: $link-color-dark;
+      text-decoration: underline;
+    }
+  }
 }
 
 body.colorscheme-dark {
-  @include footer_dark()
+  @include footer_dark();
 }
 
 body.colorscheme-auto {
   @media (prefers-color-scheme: dark) {
-    @include footer_dark()
+    @include footer_dark();
   }
 }

layouts/_default/baseof.html

@@ -51,7 +51,7 @@
       {{ if .Site.IsServer }}
         {{ $cssOpts := (dict "targetPath" "css/coder-dark.css" "enableSourceMap" true ) }}
         {{ $styles := resources.Get "scss/coder-dark.scss" | resources.ExecuteAsTemplate "style.coder-dark.css" . | toCSS $cssOpts }}
-        <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
+        <link id="stylesheet-dark" rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
       {{ else }}
         {{ $cssOpts := (dict "targetPath" "css/coder-dark.css" ) }}
         {{ $styles := resources.Get "scss/coder-dark.scss" | resources.ExecuteAsTemplate "style.coder-dark.css" . | toCSS $cssOpts | minify | fingerprint }}
@@ -108,6 +108,7 @@
 
     {{ template "_internal/google_analytics.html" . }}
 
+    <script src="js/script.js"></script>
   </body>
 
 </html>

layouts/partials/footer.html

@@ -15,6 +15,9 @@
       {{ if not .Site.Params.hideCopyright }} · {{ end }}
       {{ i18n "powered_by" }} <a href="https://gohugo.io/">Hugo</a> & <a href="https://github.com/luizdepra/hugo-coder/">Coder</a>.
     {{ end }}
+    <span id="cs-mode-container" class="cs-mode-container">
+      [<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
+      </span>
     {{ if .Site.Params.commit }}
       {{ if or (not .Site.Params.hideCredits) (not .Site.Params.hideCopyright) }} · {{ end }}
       [<a href="{{ .Site.Params.commit }}{{ getenv "GIT_COMMIT_SHA" }}">{{ getenv "GIT_COMMIT_SHA_SHORT" }}</a>]

static/js/script.js

@@ -0,0 +1,38 @@
+// TODO move this file into assets and use hugo pipes and babel
+
+(function(){
+  var modeBtnText = document.getElementById('cs-mode-button-state');
+  var states = ["colorscheme-dark", "colorscheme-light", "colorscheme-auto"];
+  var labels = ["On", "Off", "Auto"];
+  var activeState = -1;
+
+  function toggleColorscheme() {
+    for(var i = states.length - 1; i >= 0; i--) {
+      if (document.body.classList.contains(states[i])) {
+        document.body.classList.remove(states[activeState]);
+        activeState = activeState < states.length - 1 ? activeState + 1 : 0;
+        document.body.classList.add(states[activeState]);
+        modeBtnText.innerText = labels[activeState];
+        break;
+      }
+    }
+  }
+
+  // TODO use cookie to record state of dark mode
+
+  for(var i = states.length - 1; i >= 0; i--) {
+    if (document.body.classList.contains(states[i])) {
+      activeState = i;
+      modeBtnText.innerText = labels[activeState];
+    }
+  }
+
+  if (activeState > -1) {
+    document.getElementById('cs-mode-button').addEventListener('click', function() {
+      toggleColorscheme();
+    })
+  } else {
+    document.getElementById('cs-mode-container').style.display = "none";
+  }
+})();
+