8
8
<f7-button round color =" blue" raised :fill =" theme === 'aurora'" @click =" switchTheme('aurora')" >Aurora</f7-button >
9
9
</f7-segmented >
10
10
<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 >
19
16
<f7-block-title >Navigation bars style</f7-block-title >
20
17
<f7-row >
21
18
<f7-col width =" 50" class =" demo-bars-picker demo-bars-picker-fill" @click =" setBarsStyle('filled')" >
@@ -58,7 +55,8 @@ export default {
58
55
// document.location = document.location.origin + document.location.pathname + '?theme=' + theme
59
56
},
60
57
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)
62
60
localStorage .setItem (' openhab.ui:theme.bars' , ' light' ) // dark theme with filled bars is ugly, switch to light bars too
63
61
location .reload ()
64
62
},
@@ -84,7 +82,7 @@ export default {
84
82
return localStorage .getItem (' openhab.ui:theme' ) || ' auto'
85
83
},
86
84
darkMode () {
87
- return localStorage .getItem (' openhab.ui:theme.dark' ) || ' light '
85
+ return localStorage .getItem (' openhab.ui:theme.dark' ) || ' auto '
88
86
},
89
87
barsStyle () {
90
88
return localStorage .getItem (' openhab.ui:theme.bars' ) || ((! this .$theme .ios ) ? ' filled' : ' light' )
@@ -102,24 +100,6 @@ export default {
102
100
}
103
101
</script >
104
102
<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
- }
123
103
.demo-bars-picker {
124
104
height : 200px ;
125
105
border-radius : 10px ;
0 commit comments