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>

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