added the inital theme switch button

Friendscover · Sep 24, 2023 · 2e3f4d2 · 2e3f4d2
1 parent f1f3b5f
commit 2e3f4d2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/_data/navigation.yml b/_data/navigation.yml
@@ -8,5 +8,5 @@
   link: https://github.com/Friendscover
 - name: LinkedIn
   link: https://www.linkedin.com/in/tobias-kl%C3%B6pper-b054701ba/
-- name: Polywork
-  link: https://www.polywork.com/friendscover
+- name: Mastodon
+  link: https://mastodon.social/@friendscover
diff --git a/_includes/darkscript.html b/_includes/darkscript.html
@@ -1,17 +1,26 @@
 <script>
+    //initialize button to toggle styles
     const toggleButton = document.getElementById("dark-mode-button");
-    let dark = true
 
+    //load theme prefs if they exist and apply that style
+    const currentTheme = localStorage.getItem("theme") ? localStorage.getItem("theme") : null;
+    if (currentTheme) 
+    {
+        document.documentElement.setAttribute("data-theme", currentTheme);
+        currentTheme == "dark" ? toggleButton.innerText = "☀️" : toggleButton.innerText = "🌙";
+    }
+
+    // function to switch between themes with saving prefs in local storage
     function switchTheme(e) {
-        if (dark) 
+        if (currentTheme == "light") 
         {
             document.documentElement.setAttribute("data-theme", "dark");
-            dark = false;
+            localStorage.setItem("theme", "dark");
         }
         else 
         {
             document.documentElement.setAttribute("data-theme", "light");
-            dark = true;
+            localStorage.setItem("theme", "light");
         }    
     }
 

diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -4,4 +4,7 @@
    {{ item.name }}
   </a>
   {% endfor %}
+  <a href="">
+    <div id="dark-mode-button"></div>
+  </a>
 </nav>