ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Add dark mode (#33)

Browse Source 
Closes: #18

This PR adds dark mode styling and an app setting to choose light, dark, or auto mode.

Reviewed-on: Georgi_Lab/ALVINN_f7#33
This commit is contained in:
Justin Georgi
2023-12-07 20:39:10 -07:00
parent fb81ebed83
commit 056d835b7c
10 changed files with 119 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/settings.vue
View File

@@ -15,7 +15,13 @@
<f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.address" label="Server address" type="text" placeholder="127.0.0.1" />
<f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.port" label="Server port" type="text" placeholder="9001" />
</f7-list>
<f7-button @click="saveServerSettings" >Save</f7-button>
<f7-block-title medium>Dark Mode</f7-block-title>
<f7-list style="width: 100%;">
<f7-list-item title="Auto" :checked="themeSettings.darkMode == 'auto'" radio name="darkmode" radio-icon="end" @change="setDarkMode('auto')" ></f7-list-item>
<f7-list-item title="Light" :checked="themeSettings.darkMode.toString() == 'false'" radio name="darkmode" radio-icon="end" @change="setDarkMode(false)" ></f7-list-item>
<f7-list-item title="Dark" :checked="themeSettings.darkMode.toString() == 'true'" radio name="darkmode" radio-icon="end" @change="setDarkMode(true)" ></f7-list-item>
</f7-list>
<f7-button @click="saveAllSettings" >Save</f7-button>
</div>
</f7-block>
</f7-page>
@@ -27,23 +33,29 @@
export default {
data () {
return {
serverSettings: {
use: false,
address: '10.170.64.22',
port: '9001'
},
serverSettings: {
use: false,
address: '10.170.64.22',
port: '9001'
},
themeSettings: {
darkMode: 'auto'
}
}
},
created () {
var loadServerSettings = localStorage.getItem('serverSettings')
if (loadServerSettings) this.serverSettings = JSON.parse(loadServerSettings)
var loadThemeSettings = localStorage.getItem('themeSettings')
if (loadThemeSettings) this.themeSettings = JSON.parse(loadThemeSettings)
},
methods: {
saveServerSettings () {
saveAllSettings () {
let saveSetting = new Promise(
(saved,failed) => {
try {
localStorage.setItem('serverSettings',JSON.stringify(this.serverSettings))
localStorage.setItem('themeSettings',JSON.stringify(this.themeSettings))
saved()
} catch {
failed()
@@ -67,6 +79,10 @@
}
)
},
setDarkMode (mode) {
this.themeSettings.darkMode = mode
f7.setDarkMode(mode)
}
}
}
</script>