Skip to content

Commit e2da5cc

Browse files
authored
Auto selects the color default color scheme based on the system preference (openhab#263)
Signed-off-by: digitaldan <[email protected]>
1 parent 344fd6c commit e2da5cc

File tree

2 files changed

+21
-33
lines changed

2 files changed

+21
-33
lines changed

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

+13-5
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,7 @@ export default {
247247
// theme: (document.documentURI && document.documentURI.indexOf('?theme=ios') > 0) ? 'ios'
248248
// : (document.documentURI && document.documentURI.indexOf('?theme=md') > 0) ? 'md'
249249
// : 'auto', // Automatic theme detection
250+
autoDarkTheme: !(localStorage.getItem('openhab.ui:theme.dark')),
250251
// App root data
251252
data () {
252253
return {
@@ -406,14 +407,16 @@ export default {
406407
this.$f7.preloader.hide()
407408
this.$f7.dialog.alert('Error while signing out: ' + err)
408409
})
410+
},
411+
updateThemeOptions () {
412+
this.themeOptions.dark = localStorage.getItem('openhab.ui:theme.dark') || (this.$f7.darkTheme ? 'dark' : 'light')
413+
this.themeOptions.bars = localStorage.getItem('openhab.ui:theme.bars') || ((!this.$theme.ios) || (!this.$f7.darkTheme) ? 'filled' : 'light')
414+
this.themeOptions.homeNavbar = localStorage.getItem('openhab.ui:theme.home.navbar') || 'default'
415+
this.themeOptions.expandableCardAnimation = localStorage.getItem('openhab.ui:theme.home.cardanimation') || 'default'
416+
this.themeOptions.pageTransitionAnimation = localStorage.getItem('openhab.ui:theme.home.pagetransition') || 'default'
409417
}
410418
},
411419
created () {
412-
this.themeOptions.dark = localStorage.getItem('openhab.ui:theme.dark') || 'light'
413-
this.themeOptions.bars = localStorage.getItem('openhab.ui:theme.bars') || ((!this.$theme.ios) ? 'filled' : 'light')
414-
this.themeOptions.homeNavbar = localStorage.getItem('openhab.ui:theme.home.navbar') || 'default'
415-
this.themeOptions.expandableCardAnimation = localStorage.getItem('openhab.ui:theme.home.cardanimation') || 'default'
416-
this.themeOptions.pageTransitionAnimation = localStorage.getItem('openhab.ui:theme.home.pagetransition') || 'default'
417420
// this.loginScreenOpened = true
418421
const refreshToken = this.getRefreshToken()
419422
if (refreshToken) {
@@ -432,6 +435,7 @@ export default {
432435
},
433436
mounted () {
434437
this.$f7ready((f7) => {
438+
this.updateThemeOptions()
435439
this.$f7.data.themeOptions = this.themeOptions
436440
437441
// Init cordova APIs (see cordova-app.js)
@@ -471,6 +475,10 @@ export default {
471475
this.$f7.on('sidebarRefresh', () => {
472476
this.loadSidebarPages()
473477
})
478+
479+
this.$f7.on('darkThemeChange', () => {
480+
this.updateThemeOptions()
481+
})
474482
})
475483
}
476484
}

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

+8-28
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,11 @@
88
<f7-button round color="blue" raised :fill="theme === 'aurora'" @click="switchTheme('aurora')">Aurora</f7-button>
99
</f7-segmented>
1010
<f7-block-title>Dark mode</f7-block-title>
11-
<f7-row>
12-
<f7-col width="50" class="bg-color-white demo-theme-picker" @click="setThemeDark('light')">
13-
<f7-checkbox checked disabled v-if="darkMode === 'light'" />
14-
</f7-col>
15-
<f7-col width="50" class="bg-color-black demo-theme-picker" @click="setThemeDark('dark')">
16-
<f7-checkbox checked disabled v-if="darkMode === 'dark'" />
17-
</f7-col>
18-
</f7-row>
11+
<f7-segmented>
12+
<f7-button round color="blue" raised :fill="darkMode === 'auto'" @click="setThemeDark('auto')">Auto</f7-button>
13+
<f7-button round color="blue" raised :fill="darkMode === 'light'" @click="setThemeDark('light')">Light</f7-button>
14+
<f7-button round color="blue" raised :fill="darkMode === 'dark'" @click="setThemeDark('dark')">Dark</f7-button>
15+
</f7-segmented>
1916
<f7-block-title>Navigation bars style</f7-block-title>
2017
<f7-row>
2118
<f7-col width="50" class="demo-bars-picker demo-bars-picker-fill" @click="setBarsStyle('filled')">
@@ -58,7 +55,8 @@ export default {
5855
// document.location = document.location.origin + document.location.pathname + '?theme=' + theme
5956
},
6057
setThemeDark (value) {
61-
localStorage.setItem('openhab.ui:theme.dark', value)
58+
value === 'auto'
59+
? localStorage.removeItem('openhab.ui:theme.dark') : localStorage.setItem('openhab.ui:theme.dark', value)
6260
localStorage.setItem('openhab.ui:theme.bars', 'light') // dark theme with filled bars is ugly, switch to light bars too
6361
location.reload()
6462
},
@@ -84,7 +82,7 @@ export default {
8482
return localStorage.getItem('openhab.ui:theme') || 'auto'
8583
},
8684
darkMode () {
87-
return localStorage.getItem('openhab.ui:theme.dark') || 'light'
85+
return localStorage.getItem('openhab.ui:theme.dark') || 'auto'
8886
},
8987
barsStyle () {
9088
return localStorage.getItem('openhab.ui:theme.bars') || ((!this.$theme.ios) ? 'filled' : 'light')
@@ -102,24 +100,6 @@ export default {
102100
}
103101
</script>
104102
<style>
105-
.demo-theme-picker {
106-
cursor: pointer;
107-
padding: 30px;
108-
border-radius: 10px;
109-
box-shadow: 0px 5px 20px rgba(0,0,0,0.1);
110-
border: 1px solid rgba(255,255,255,0.2);
111-
box-sizing: border-box;
112-
position: relative;
113-
}
114-
.demo-theme-picker .checkbox {
115-
position: absolute;
116-
left: 10px;
117-
bottom: 10px;
118-
}
119-
.demo-color-picker-button {
120-
margin-bottom: 1em;
121-
text-transform: capitalize;
122-
}
123103
.demo-bars-picker {
124104
height: 200px;
125105
border-radius: 10px;

0 commit comments

Comments
 (0)