darkmode auto, light, dark

exampleSite/content/blogs/emoji-support.md

@@ -15,6 +15,8 @@ toc:
 
 Emoji can be enabled in a Hugo project in a number of ways. :zap:
 
+## Emoji Support
+
 The [emojify](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
 
 To enable emoji globally, set ```enableEmoji``` to ```true``` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.

layouts/_default/single.html

@@ -86,5 +86,28 @@
       </div>
     </div>
   </div>
+  <button class="p-2 px-3" onclick="topFunction()" id="topScroll">
+    <i class="fas fa-angle-up"></i>
+  </button>
 </section>
+
+<script>
+  var topScroll = document.getElementById("topScroll");
+  window.onscroll = function() {scrollFunction()};
+
+  console.log(topScroll);
+  function scrollFunction() {
+    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+      topScroll.style.display = "block";
+    } else {
+      topScroll.style.display = "none";
+    }
+  }
+
+  function topFunction() {
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+  }
+</script>
+
 {{ end }}

layouts/partials/scripts.html

@@ -1,3 +1,34 @@
+{{- if (eq .Site.Params.theme.defaultTheme "light") }}
+<script>
+    if (document.body.className.includes("dark")) {
+        document.body.classList.remove('dark');
+        localStorage.setItem("pref-theme", 'light');
+    }
+</script>
+
+{{ else if (eq .Site.Params.theme.defaultTheme "dark") }}
+{{- /* theme is dark */}}
+<script>
+    if (document.body.className.includes("light")) {
+        document.body.classList.add('dark');
+        localStorage.setItem("pref-theme", 'dark');
+    }
+</script>
+
+{{- else }}
+{{- /* theme is auto */}}
+<script>
+    if (localStorage.getItem("pref-theme") === "dark") {
+        document.body.classList.add('dark');
+    } else if (localStorage.getItem("pref-theme") === "light") {
+        document.body.classList.remove('dark')
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.body.classList.add('dark');
+    }
+
+</script>
+{{- end }}
+
 {{- if (not .Site.Params.theme.disableThemeToggle) }}
 <script>
     document.getElementById("theme-toggle").addEventListener("click", () => {

static/css/header.css

@@ -10,9 +10,11 @@ header .navbar .navbar-nav a {
 .navbar-toggler {
     border: none;
     outline: none;
+    color: var(--text-color);
 }
 .navbar-toggler svg {
     fill: currentColor;
+    color: var(--text-color);
 }
 .navbar-toggler:focus {
     box-shadow: 0 0 0 .05em;

static/css/single.css

@@ -258,3 +258,26 @@
     opacity: .8;
     color: var(--primary-color);
 }
+
+/* Top scroll */
+
+#single #topScroll {
+    display: none;
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    z-index: 99;
+    border: none;
+    outline: none;
+    background-color: var(--secondary-color);
+    color: var(--primary-color);
+    cursor: pointer;
+    border-radius: 10px;
+}
+
+#single #topScroll:hover {
+    background-color: var(--primary-color);
+    color: var(--secondary-color);
+    transition: .5s;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+}