Auto selects the color default color scheme based on the system preference (openhab#263)

Signed-off-by: digitaldan <dan@digitaldan.com>

Author: digitaldan

bundles/org.openhab.ui/web/src/components/app.vue

@@ -247,6 +247,7 @@ export default {
         // theme: (document.documentURI && document.documentURI.indexOf('?theme=ios') > 0) ? 'ios'
         //   : (document.documentURI && document.documentURI.indexOf('?theme=md') > 0) ? 'md'
         //     : 'auto', // Automatic theme detection
+        autoDarkTheme: !(localStorage.getItem('openhab.ui:theme.dark')),
         // App root data
         data () {
           return {
@@ -406,14 +407,16 @@ export default {
         this.$f7.preloader.hide()
         this.$f7.dialog.alert('Error while signing out: ' + err)
       })
+    },
+    updateThemeOptions () {
+      this.themeOptions.dark = localStorage.getItem('openhab.ui:theme.dark') || (this.$f7.darkTheme ? 'dark' : 'light')
+      this.themeOptions.bars = localStorage.getItem('openhab.ui:theme.bars') || ((!this.$theme.ios) || (!this.$f7.darkTheme) ? 'filled' : 'light')
+      this.themeOptions.homeNavbar = localStorage.getItem('openhab.ui:theme.home.navbar') || 'default'
+      this.themeOptions.expandableCardAnimation = localStorage.getItem('openhab.ui:theme.home.cardanimation') || 'default'
+      this.themeOptions.pageTransitionAnimation = localStorage.getItem('openhab.ui:theme.home.pagetransition') || 'default'
     }
   },
   created () {
-    this.themeOptions.dark = localStorage.getItem('openhab.ui:theme.dark') || 'light'
-    this.themeOptions.bars = localStorage.getItem('openhab.ui:theme.bars') || ((!this.$theme.ios) ? 'filled' : 'light')
-    this.themeOptions.homeNavbar = localStorage.getItem('openhab.ui:theme.home.navbar') || 'default'
-    this.themeOptions.expandableCardAnimation = localStorage.getItem('openhab.ui:theme.home.cardanimation') || 'default'
-    this.themeOptions.pageTransitionAnimation = localStorage.getItem('openhab.ui:theme.home.pagetransition') || 'default'
     // this.loginScreenOpened = true
     const refreshToken = this.getRefreshToken()
     if (refreshToken) {
@@ -432,6 +435,7 @@ export default {
   },
   mounted () {
     this.$f7ready((f7) => {
+      this.updateThemeOptions()
       this.$f7.data.themeOptions = this.themeOptions
 
       // Init cordova APIs (see cordova-app.js)
@@ -471,6 +475,10 @@ export default {
       this.$f7.on('sidebarRefresh', () => {
         this.loadSidebarPages()
       })
+
+      this.$f7.on('darkThemeChange', () => {
+        this.updateThemeOptions()
+      })
     })
   }
 }

bundles/org.openhab.ui/web/src/components/theme-switcher.vue

@@ -8,14 +8,11 @@
       <f7-button round color="blue" raised :fill="theme === 'aurora'" @click="switchTheme('aurora')">Aurora</f7-button>
     </f7-segmented>
     <f7-block-title>Dark mode</f7-block-title>
-    <f7-row>
-      <f7-col width="50" class="bg-color-white demo-theme-picker" @click="setThemeDark('light')">
-        <f7-checkbox checked disabled v-if="darkMode === 'light'" />
-      </f7-col>
-      <f7-col width="50" class="bg-color-black demo-theme-picker" @click="setThemeDark('dark')">
-        <f7-checkbox checked disabled v-if="darkMode === 'dark'" />
-      </f7-col>
-    </f7-row>
+    <f7-segmented>
+      <f7-button round color="blue" raised :fill="darkMode === 'auto'" @click="setThemeDark('auto')">Auto</f7-button>
+      <f7-button round color="blue" raised :fill="darkMode === 'light'" @click="setThemeDark('light')">Light</f7-button>
+      <f7-button round color="blue" raised :fill="darkMode === 'dark'" @click="setThemeDark('dark')">Dark</f7-button>
+    </f7-segmented>
     <f7-block-title>Navigation bars style</f7-block-title>
     <f7-row>
       <f7-col width="50" class="demo-bars-picker demo-bars-picker-fill" @click="setBarsStyle('filled')">
@@ -58,7 +55,8 @@ export default {
       // document.location = document.location.origin + document.location.pathname + '?theme=' + theme
     },
     setThemeDark (value) {
-      localStorage.setItem('openhab.ui:theme.dark', value)
+      value === 'auto'
+        ? localStorage.removeItem('openhab.ui:theme.dark') : localStorage.setItem('openhab.ui:theme.dark', value)
       localStorage.setItem('openhab.ui:theme.bars', 'light') // dark theme with filled bars is ugly, switch to light bars too
       location.reload()
     },
@@ -84,7 +82,7 @@ export default {
       return localStorage.getItem('openhab.ui:theme') || 'auto'
     },
     darkMode () {
-      return localStorage.getItem('openhab.ui:theme.dark') || 'light'
+      return localStorage.getItem('openhab.ui:theme.dark') || 'auto'
     },
     barsStyle () {
       return localStorage.getItem('openhab.ui:theme.bars') || ((!this.$theme.ios) ? 'filled' : 'light')
@@ -102,24 +100,6 @@ export default {
 }
 </script>
 <style>
-.demo-theme-picker {
-  cursor: pointer;
-  padding: 30px;
-  border-radius: 10px;
-  box-shadow: 0px 5px 20px rgba(0,0,0,0.1);
-  border: 1px solid rgba(255,255,255,0.2);
-  box-sizing: border-box;
-  position: relative;
-}
-.demo-theme-picker .checkbox {
-  position: absolute;
-  left: 10px;
-  bottom: 10px;
-}
-.demo-color-picker-button {
-  margin-bottom: 1em;
-  text-transform: capitalize;
-}
 .demo-bars-picker {
   height: 200px;
   border-radius: 10px;