Merge pull request sujaykundu777#190 from Apezdr/theme-toggle

Fix Theme Light/Dark Toggling
Quasto-sketc · Dec 12, 2022 · e8c8d43 · e8c8d43
2 parents 41fb346 + 8ab6556
commit e8c8d43
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 21 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -117,6 +117,7 @@
     crossorigin="anonymous"
   ></script>
   <!-- <script src="{{site.url}}{{site.baseurl}}/assets/bower_components/jquery/dist/jquery.min.js"></script> -->
+  <script src="{{site.url}}{{site.baseurl}}/assets/js/mode-switcher.js"></script>
   <script src="{{site.url}}{{site.baseurl}}/assets/bower_components/jquery.easing/jquery.easing.min.js"></script>
   <script src="{{site.url}}{{site.baseurl}}/assets/bower_components/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   <script src="{{site.url}}{{site.baseurl}}/assets/bower_components/jquery-mousewheel/jquery.mousewheel.min.js"></script>

diff --git a/_includes/header.html b/_includes/header.html
@@ -49,15 +49,13 @@
                   </a>
             </li>
 
-            <!-- <li class="nav-item">
+            <li class="nav-item"> 
               <input
-                class="nav-link switch"
-                id="theme-toggle"
-                onclick="modeSwitcher()"
+                class="nav-link switch theme-toggle"
                 type="checkbox"
                 name="checkbox"
               />
-            </li> -->
+            </li>
           </ul>
         </nav>
         <div id="progress-bar"></div>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -27,7 +27,6 @@
 
    <div hidden id="snipcart" data-api-key="Y2I1NTAyNWYtMTNkMy00ODg0LWE4NDItNTZhYzUxNzJkZTI5NjM3MDI4NTUzNzYyMjQ4NzU0"></div>
    <script src="https://cdn.snipcart.com/themes/v3.0.0-beta.3/default/snipcart.js" defer></script>
-   <script src="{{site.url}}{{site.baseurl}}/assets/js/mode-switcher.js"></script>
    <script>
     if (window.netlifyIdentity) {
       window.netlifyIdentity.on("init", user => {

diff --git a/assets/js/mode-switcher.js b/assets/js/mode-switcher.js
@@ -1,19 +1,42 @@
+$(document).ready(()=> modeSwitcher() )
 
-(()=> {	modeSwitcher()})();
-
-function modeSwitcher() {
+if ( !localStorage.getItem('color-theme') ){
 	document.documentElement.setAttribute('data-theme', 'dark');
-	sessionStorage.setItem('theme', 'dark');
 }
+else{
+	document.documentElement.setAttribute('data-theme', localStorage.getItem('color-theme'));
+}
+
+/**
+ * Page theme switching between *light* and *dark*
+ * 
+ * Initialize page theme and set event handlers
+ */
+function modeSwitcher() {
+
+	switch ( localStorage.getItem('color-theme') ){
+		case 'dark':
+			$('.theme-toggle').removeAttr('checked');
+		break;
+		case 'light':
+			$('.theme-toggle').attr('checked','');
+		break;
+	}
 
-// 	if (currentTheme === "dark") {
-// 		document.documentElement.setAttribute('data-theme', 'light');
-// 		sessionStorage.setItem('theme', 'light');
-// 	}	else if (currentTheme === "light") {
-// 		document.documentElement.setAttribute('data-theme', 'dark');
-// 		sessionStorage.setItem('theme', 'dark');
-// 	}else{
-// 		document.documentElement.setAttribute('data-theme', 'dark');
-// 		sessionStorage.setItem('theme', 'dark');
-// 	}
-// }
+    /* 
+     * dark-light mode-switcher
+     * Change the icons inside the button based on previous settings
+     */
+    $('.theme-toggle').off('click').on('click', function() {
+
+        // if exists and set via local storage previously
+		if ($(document.documentElement).attr('data-theme') === "dark" ) {
+			document.documentElement.setAttribute('data-theme', 'light');
+			localStorage.setItem('color-theme', 'light');
+		} else {
+			document.documentElement.setAttribute('data-theme', 'dark');
+			localStorage.setItem('color-theme', 'dark');
+		}
+
+    });
+}