Merge pull request #406 from pocivaneuh/dark-mode-improvements

Dark mode improvements
sylhare · Nov 9, 2023 · f531e82 · f531e82
2 parents 6c9d166 + 381f74d
commit f531e82
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
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
@@ -10,11 +10,11 @@ const themeButton = {
     'dark': '<i class="fas fa-adjust fa-rotate-180" aria-hidden="true"></i>'
 }
 
-const currentTheme = () => sessionStorage.getItem('theme')
+const currentTheme = () => localStorage.getItem('theme')
 
 function setMode(theme) {
     document.documentElement.setAttribute('data-theme', theme)
-    sessionStorage.setItem('theme', theme)
+    localStorage.setItem('theme', theme)
     const toggle = document.getElementById('theme-toggle')
     if (toggle) {
         toggle.innerHTML = themeButton[theme]
@@ -30,13 +30,14 @@ function themeToggle() {
     }
 }
 
-window.onload = function bootstrapTheme() {
+function bootstrapTheme() {
     if (isAutoTheme) {
         if (!currentTheme()) {
             // Load browser's preference
             let browserPrefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+            if (browserPrefersDark.matches) localStorage.setItem('theme', 'dark');
             browserPrefersDark.addEventListener('change', () => {
-                if (browserPrefersDark.matches) sessionStorage.setItem('theme', 'dark')
+                if (browserPrefersDark.matches) localStorage.setItem('theme', 'dark')
             });
         }
 
@@ -45,3 +46,8 @@ window.onload = function bootstrapTheme() {
         setMode(sessionPrefers ? sessionPrefers : 'light')
     }
 }
+
+// Init
+(function () {
+    bootstrapTheme();
+})()