From cf681bcd635a1ccb3f4688c9f67c7ede114ad9f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Wed, 31 May 2023 08:57:07 +0200
Subject: [PATCH] Improve color modes JS (#374)

---
 src/assets/js/color-modes.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/assets/js/color-modes.js b/src/assets/js/color-modes.js
index 49c5ad982..2f7fab98f 100644
--- a/src/assets/js/color-modes.js
+++ b/src/assets/js/color-modes.js
@@ -5,9 +5,11 @@
  */
 
 (() => {
-  const storedTheme = localStorage.getItem('theme')
+  const getStoredTheme = () => localStorage.getItem('theme')
+  const setStoredTheme = theme => localStorage.setItem('theme', theme)
 
   const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme()
     if (storedTheme) {
       return storedTheme
     }
@@ -15,7 +17,7 @@
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
   }
 
-  const setTheme = function (theme) {
+  const setTheme = theme => {
     if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
       document.documentElement.setAttribute('data-bs-theme', 'dark')
     } else {
@@ -54,7 +56,8 @@
   }
 
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-    if (storedTheme !== 'light' || storedTheme !== 'dark') {
+    const storedTheme = getStoredTheme()
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
       setTheme(getPreferredTheme())
     }
   })
@@ -66,7 +69,7 @@
       .forEach(toggle => {
         toggle.addEventListener('click', () => {
           const theme = toggle.getAttribute('data-bs-theme-value')
-          localStorage.setItem('theme', theme)
+          setStoredTheme(theme)
           setTheme(theme)
           showActiveTheme(theme, true)
         })