feat(ui): persist ui settings and use system theme as default

.github/workflows/package_armv7.yml

@@ -55,8 +55,8 @@ jobs:
           mkdir -p ~/.cache/pkg
           export PKG_CACHE_PATH=~/.cache/pkg
           export PKG_IGNORE_TAG=true
-          curl https://github.com/yao-pkg/pkg-binaries/releases/download/node16/built-v16.16.0-linux-armv7 -LOJ
-          mv built-v16.16.0-linux-armv7 $PKG_CACHE_PATH/built-v${{ matrix.node-version }}-linux-armv7
+          curl https://github.com/yao-pkg/pkg-binaries/releases/download/node16/built-v16.20.2-linux-armv7 -LOJ
+          mv built-v16.20.2-linux-armv7 $PKG_CACHE_PATH/built-v${{ matrix.node-version }}-linux-armv7
           yarn pkg --skip-build --arch=armv7
 
       - name: Upload artifacts

src/App.vue

@@ -432,6 +432,9 @@ export default {
 			this.title = value.name || ''
 			this.startSocket()
 		},
+		darkMode(val) {
+			this.$vuetify.theme.dark = val || false
+		},
 		controllerNode(node) {
 			if (!node) return
 
@@ -535,7 +538,7 @@ export default {
 			'init',
 			'initNodes',
 			'setAppInfo',
-			'setUser',
+			'onUserLogged',
 			'updateValue',
 			'setValue',
 			'removeValue',
@@ -566,7 +569,7 @@ export default {
 				)
 				if (response.success) {
 					this.closePasswordDialog()
-					this.setUser(response.user)
+					this.onUserLogged(response.user)
 				}
 			} catch (error) {
 				this.showSnackbar(
@@ -729,23 +732,6 @@ export default {
 				)
 			}
 		},
-		changeThemeColor: function () {
-			const metaThemeColor = document.querySelector(
-				'meta[name=theme-color]',
-			)
-			const metaThemeColor2 = document.querySelector(
-				'meta[name=msapplication-TileColor]',
-			)
-
-			metaThemeColor.setAttribute(
-				'content',
-				this.darkMode ? '#000' : '#fff',
-			)
-			metaThemeColor2.setAttribute(
-				'content',
-				this.darkMode ? '#000' : '#fff',
-			)
-		},
 		importFile: function (ext) {
 			const self = this
 			// Check for the various File API support.
@@ -1394,9 +1380,17 @@ export default {
 			this.hideTopbar = true
 		}
 
-		this.$vuetify.theme.dark = this.darkMode
+		const settings = useBaseStore().settings
 
-		this.changeThemeColor()
+		// system dark mode
+		const systemThemeDark = !!window.matchMedia(
+			'(prefers-color-scheme: dark)',
+		).matches
+
+		// set the dark mode to the system dark mode if it's different
+		if (settings.load('dark') === undefined) {
+			useBaseStore().setDarkMode(systemThemeDark)
+		}
 
 		useBaseStore().$onAction(({ name, args }) => {
 			if (name === 'showSnackbar') {

src/modules/Settings.js

@@ -45,6 +45,9 @@ export class Settings {
 						? val
 						: defaultVal
 				break
+			case 'undefined':
+				val = valStr || valStr === '' ? valStr : defaultVal
+				break
 		}
 		return val
 	}

src/router/index.js

@@ -167,7 +167,7 @@ router.beforeEach(async (to, from, next) => {
 					logged = false
 					localStorage.removeItem('logged')
 				} else {
-					store.setUser(response.user)
+					store.onUserLogged(response.user)
 				}
 			} else user = {}
 		} catch (error) {

src/stores/base.js

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { $set, deepEqual } from '../lib/utils'
 import logger from '../lib/logger'
 
-import { Settings } from '@/modules/Settings'
+import { Settings } from '../modules/Settings'
 
 const settings = new Settings(localStorage)
 
@@ -106,6 +106,9 @@ const useBaseStore = defineStore('base', {
 		controllerNode() {
 			return this.controllerId ? this.getNode(this.controllerId) : null
 		},
+		settings() {
+			return settings
+		},
 	},
 	actions: {
 		getNode(id) {
@@ -132,8 +135,8 @@ const useBaseStore = defineStore('base', {
 		updateMeshGraph(node) {
 			// empty mutation, will be caught in Mesh.vue $onAction
 		},
-		setUser(data) {
-			Object.assign(this.user, data)
+		onUserLogged(user) {
+			Object.assign(this.user, user)
 		},
 		setControllerStatus(data) {
 			this.appInfo.controllerStatus = data
@@ -445,6 +448,7 @@ const useBaseStore = defineStore('base', {
 				Object.assign(this.mqtt, conf.mqtt || {})
 				Object.assign(this.gateway, conf.gateway || {})
 				Object.assign(this.backup, conf.backup || {})
+				Object.assign(this.ui, conf.ui || {})
 			}
 		},
 		initPorts(ports) {
@@ -492,7 +496,18 @@ const useBaseStore = defineStore('base', {
 		},
 		setDarkMode(value) {
 			settings.store('dark', value)
+			// the `darkMode` watcher in App.vue will change vuetify theme
 			this.ui.darkMode = value
+
+			const metaThemeColor = document.querySelector(
+				'meta[name=theme-color]',
+			)
+			const metaThemeColor2 = document.querySelector(
+				'meta[name=msapplication-TileColor]',
+			)
+
+			metaThemeColor.setAttribute('content', value ? '#000' : '#fff')
+			metaThemeColor2.setAttribute('content', value ? '#000' : '#fff')
 		},
 		setNavTabs(value) {
 			settings.store('navTabs', value)

src/views/Login.vue

@@ -131,7 +131,6 @@ export default {
 			},
 			set(value) {
 				this.setDarkMode(value)
-				this.$vuetify.theme.dark = value
 			},
 		},
 	},
@@ -204,7 +203,7 @@ export default {
 						user.rememberMe = this.rememberMe
 						localStorage.setItem('user', JSON.stringify(user))
 						localStorage.setItem('logged', 'true')
-						useBaseStore().setUser(user)
+						useBaseStore().onUserLogged(user)
 
 						if (this.$route.params.nextUrl != null) {
 							this.$router.push(this.$route.params.nextUrl)

src/views/Settings.vue

@@ -1425,7 +1425,6 @@ export default {
 			},
 			set(value) {
 				this.setDarkMode(value)
-				this.$vuetify.theme.dark = value
 			},
 		},
 		internalNavTabs: {
@@ -1505,6 +1504,7 @@ export default {
 			'devices',
 			'serial_ports',
 			'scales',
+			'ui',
 		]),
 		...mapState(useBaseStore, {
 			darkMode: (store) => store.ui.darkMode,
@@ -1790,6 +1790,7 @@ export default {
 				gateway: this.newGateway,
 				zwave: this.newZwave,
 				backup: this.newBackup,
+				ui: this.ui,
 			}
 		},
 		async editJob(item) {