v4.0.27-beta

public/CHANGELOG.md

@@ -2,6 +2,7 @@
 ## Core
 - replacer %n option noLocaleNumber deprecated -> removed!
 - bugfix for update readings directly
+- bugfix for change imageGradient in case of changing theme
 ## Panel
 - bugfix for hide/show Levels
 # v4.0.26-beta (13.03.2024)

src/components/OptionsMenu.vue

@@ -2,13 +2,10 @@
     import { computed } from 'vue'    
     import { useFhemStore } from '@/stores/fhem'
     import router from '@/router'
-    import { useTheme } from 'vuetify'
     import { useI18n } from 'vue-i18n'
 
     const fhem = useFhemStore()
 
-    const theme = useTheme()
-
     const i18n = useI18n()
 
     const options = computed(() => {
@@ -40,10 +37,8 @@
 
         if(option.name === 'settings') router.push({ name: 'settings', query: router.currentRoute.value.query })
 
-        if(option.name === 'darkMode') {
-            theme.global.name.value = theme.global.name.value === 'dark' ? 'light' : 'dark'
-        }
-
+        if(option.name === 'darkMode') fhem.changeDarkMode()
+        
         if(option.cmd) fhem.request('text', option.cmd)
     }
 </script>

src/stores/fhem.js

@@ -142,14 +142,28 @@ export const useFhemStore = defineStore('fhem', () => {
         window.open(app.helpURL + anchor, '_blank')
     }
 
+    //coreFunction to switch darkMode
+    function changeDarkMode(mode) {
+        let primaryColor
+
+        if(mode !== theme.global.name.value) {
+            theme.global.name.value = theme.global.name.value === 'dark'? 'light' : 'dark'
+
+            if(!app.config.header.imageGradient) {
+                primaryColor = theme.global.current.value.colors.primary        
+                app.header.imageGradient = "to top ," + hexToRgbA(primaryColor, 0.6) + ", " + hexToRgbA(primaryColor, 0.6)
+            }
+        }
+    }
+
     //coreFunction to change darkMode
     function initDarkMode() {
         let darkMode = window.matchMedia('(prefers-color-scheme: dark')
 
-        theme.global.name.value = darkMode.matches ? 'dark' : 'light'
+        changeDarkMode(darkMode.matches ? 'dark' : 'light')
 
         darkMode.addEventListener('change', (obj) => {
-            if(!app.settings.dark) theme.global.name.value = obj.matches ? 'dark' : 'light'
+            if(!app.settings.dark) changeDarkMode(obj.matches ? 'dark' : 'light')
         })
     } 
 
@@ -945,7 +959,7 @@ export const useFhemStore = defineStore('fhem', () => {
             let res = handleURL(to)
 
             if(res.langChanged) i18n.locale.value = app.settings.lang
-            if(res.darkChanged) theme.global.name.value = app.settings.dark === '0' ? 'light' : 'dark'
+            if(res.darkChanged) changeDarkMode(app.settings.dark === '0' ? 'light' : 'dark')
             if(res.connChanged || !app.isReady) return createSession(true)
             if(res.configChanged) return location.reload()
             if(res.routeChanged) loadPanelView()
@@ -955,5 +969,5 @@ export const useFhemStore = defineStore('fhem', () => {
     //FHEMApp entryPoint
     router.isReady().then(init())
 
-    return { app, getEl, handleDefs, getIcon, replacer, createSession, request, thread, stringToJson, log, help }
+    return { app, getEl, handleDefs, getIcon, replacer, createSession, request, thread, stringToJson, log, help, changeDarkMode }
 })

www/fhemapp4/CHANGELOG.md

@@ -2,6 +2,7 @@
 ## Core
 - replacer %n option noLocaleNumber deprecated -> removed!
 - bugfix for update readings directly
+- bugfix for change imageGradient in case of changing theme
 ## Panel
 - bugfix for hide/show Levels
 # v4.0.26-beta (13.03.2024)