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');
  }
 }