Merge pull request #44 from remotemobprogramming/improve-darkmode

hollesse · web-flow · commit 2f287e7c1d9b · 2023-03-19T12:41:03.000+01:00
adjust darkmode javscript
diff --git a/src/main/resources/public/darkmode.js b/src/main/resources/public/darkmode.js
@@ -7,18 +7,12 @@
 (() => {
     'use strict'
 
-    const storedTheme = localStorage.getItem('theme')
-
     const getPreferredTheme = () => {
-        if (storedTheme) {
-            return storedTheme
-        }
-
         return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
     }
 
     const setTheme = function (theme) {
-        if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
             document.documentElement.setAttribute('data-bs-theme', 'dark')
         } else {
             document.documentElement.setAttribute('data-bs-theme', theme)
@@ -27,36 +21,7 @@
 
     setTheme(getPreferredTheme())
 
-    const showActiveTheme = theme => {
-        const activeThemeIcon = document.querySelector('.theme-icon-active use')
-        const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
-        const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
-
-        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-            element.classList.remove('active')
-        })
-
-        btnToActive.classList.add('active')
-        activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-    }
-
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-        if (storedTheme !== 'light' || storedTheme !== 'dark') {
-            setTheme(getPreferredTheme())
-        }
-    })
-
-    window.addEventListener('DOMContentLoaded', () => {
-        showActiveTheme(getPreferredTheme())
-
-        document.querySelectorAll('[data-bs-theme-value]')
-            .forEach(toggle => {
-                toggle.addEventListener('click', () => {
-                    const theme = toggle.getAttribute('data-bs-theme-value')
-                    localStorage.setItem('theme', theme)
-                    setTheme(theme)
-                    showActiveTheme(theme)
-                })
-            })
+        setTheme(getPreferredTheme())
     })
 })()
