Merge pull request #420 from sylhare/js

Fix theme toggle
sylhare · Dec 17, 2023 · 2c6f6cc · 2c6f6cc
2 parents 7c6f81f + 5bf6564
commit 2c6f6cc
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 21 deletions.
diff --git a/_includes/default/head.liquid b/_includes/default/head.liquid
@@ -4,14 +4,14 @@
 
     <!-- Theme Mode-->
     <script>
-        const darkBtn = "{{ site.data.language.str_dark | default: "Dark" }}"
-        const lightBtn = "{{ site.data.language.str_light | default: "Light" }}"
-        const isAutoTheme = {% if site.color_theme == 'auto' %}true{% else %}false{% endif %}
+        const darkBtn = "{{ site.data.language.str_dark | default: "Dark" }}";
+        const lightBtn = "{{ site.data.language.str_light | default: "Light" }}";
+        const isAutoTheme = {% if site.color_theme == 'auto' %}true{% else %}false{% endif %};
         const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
         if (isAutoTheme) {
-            document.documentElement.setAttribute('data-theme', sessionStorage.getItem('theme') ?? preferredTheme)
+            document.documentElement.setAttribute('data-theme', sessionStorage.getItem('theme') ?? preferredTheme);
         } else {
-            document.documentElement.setAttribute('data-theme', "{{ site.color_theme | default: 'light' }}")
+            document.documentElement.setAttribute('data-theme', "{{ site.color_theme | default: 'light' }}");
         }
     </script>
 

diff --git a/assets/js/main.min.js b/assets/js/main.min.js
diff --git a/assets/js/partials/dark-mode.js b/assets/js/partials/dark-mode.js
@@ -11,25 +11,27 @@
 const themeButton = {
     'light': `<i class="fas fa-adjust" aria-hidden="true"></i><span class="navbar-label-with-icon"> ${darkBtn}</span>`,
     'dark': `<i class="fas fa-adjust fa-rotate-180" aria-hidden="true"></i><span class="navbar-label-with-icon"> ${lightBtn}</span>`
-}
+};
 
-const currentTheme = () => localStorage.getItem('theme')
+function currentTheme(){
+    return localStorage.getItem('theme');
+}
 
 function setMode(theme) {
-    document.documentElement.setAttribute('data-theme', theme)
-    localStorage.setItem('theme', theme)
-    const toggle = document.getElementById('theme-toggle')
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+    const toggle = document.getElementById('theme-toggle');
     if (toggle) {
-        toggle.innerHTML = themeButton[theme]
+        toggle.innerHTML = themeButton[theme];
     }
 }
 
 function themeToggle() {
-    let sessionPrefers = currentTheme()
+    let sessionPrefers = currentTheme();
     if (sessionPrefers === 'light') {
-        setMode('dark')
+        setMode('dark');
     } else {
-        setMode('light')
+        setMode('light');
     }
 }
 
@@ -40,13 +42,12 @@ function bootstrapTheme() {
             let browserPrefersDark = window.matchMedia('(prefers-color-scheme: dark)');
             if (browserPrefersDark.matches) localStorage.setItem('theme', 'dark');
             browserPrefersDark.addEventListener('change', () => {
-                if (browserPrefersDark.matches) localStorage.setItem('theme', 'dark')
+                if (browserPrefersDark.matches) localStorage.setItem('theme', 'dark');
             });
         }
-
         // Load theme
-        let sessionPrefers = currentTheme()
-        setMode(sessionPrefers ? sessionPrefers : 'light')
+        let sessionPrefers = currentTheme();
+        setMode(sessionPrefers ? sessionPrefers : 'light');
     }
 }