feat(ui): support system preference color scheme (#4266)

joneshf · web-flow · commit 03bad6cadf4d · 2025-07-07T10:36:23.000+02:00
diff --git a/src/App.vue b/src/App.vue
@@ -465,7 +465,7 @@ export default {
 			'inited',
 		]),
 		...mapState(useBaseStore, {
-			darkMode: (store) => store.ui.darkMode,
+			darkMode: (store) => store.uiState.darkMode,
 			navTabs: (store) => store.ui.navTabs,
 		}),
 		menu() {
@@ -1646,23 +1646,13 @@ export default {
 			{ once: true },
 		)
 
-		const settings = useBaseStore().settings
-
 		// 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)
-		} else {
-			// load the theme from localstorage
-			// this is needed to prevent the theme switch on load
-			// this will be overriden by settings value once `initSettings`
-			// base store method is called
-			this.$vuetify.theme.dark = settings.load('dark', false)
-		}
+		const darkMode = useBaseStore().uiState.darkMode
+
+		// this is needed to prevent the theme switch on load
+		// this will be overriden by settings value once `initSettings`
+		// base store method is called
+		this.$vuetify.theme.dark = darkMode
 
 		useBaseStore().$onAction(({ name, args }) => {
 			if (name === 'showSnackbar') {
diff --git a/src/components/custom/ColorScheme.vue b/src/components/custom/ColorScheme.vue
@@ -0,0 +1,52 @@
+<template>
+	<v-select
+		hint="Force dark/light mode or select color scheme automatically based on the system preference"
+		persistent-hint
+		label="Color scheme"
+		:hide-details="hideDetails"
+		:items="colorSchemes"
+		:prepend-icon="prependIcon"
+		v-model="internalColorScheme"
+	></v-select>
+</template>
+
+<script>
+import { colorSchemes } from '../../lib/colorScheme'
+import useBaseStore from '../../stores/base.js'
+
+import { mapState, mapActions } from 'pinia'
+
+export default {
+	props: {
+		hideDetails: {
+			type: Boolean,
+		},
+		prependIcon: {
+			type: String,
+		},
+	},
+	data() {
+		return {
+			colorSchemes,
+		}
+	},
+	computed: {
+		...mapState(useBaseStore, {
+			colorScheme: (store) => store.ui.colorScheme,
+		}),
+		internalColorScheme: {
+			get() {
+				return this.colorScheme
+			},
+			set(value) {
+				this.setColorScheme(value)
+			},
+		},
+	},
+	methods: {
+		...mapActions(useBaseStore, ['setColorScheme']),
+	},
+}
+</script>
+
+<style></style>
diff --git a/src/lib/colorScheme.js b/src/lib/colorScheme.js
@@ -0,0 +1,70 @@
+/**
+ * @typedef {('dark' | 'light' | 'system')} ColorScheme
+ */
+
+/**
+ * @typedef {boolean} DarkMode
+ */
+
+/**
+ * The valid {@link ColorScheme}s that can be used.
+ */
+export const colorSchemes = ['dark', 'light', 'system']
+
+/**
+ * Maps a {@link ColorScheme} to its corresponding {@link DarkMode} value.
+ * Will lookup the preferred value when {@link colorScheme} is `'system'`
+ *
+ * @param {ColorScheme} colorScheme
+ * @returns {DarkMode}
+ */
+export const colorSchemeToDarkMode = (colorScheme) => {
+	switch (colorScheme) {
+		case 'dark':
+			return true
+
+		case 'light':
+			return false
+
+		case 'system':
+			return prefersColorSchemeDark.matches
+	}
+}
+
+/**
+ * Loads the {@link ColorScheme} from the {@link settings}.
+ *
+ * If {@link ColorScheme} is not in the {@link settings},
+ * this will fallback to migrating from {@link DarkMode}.
+ *
+ * @param {Settings} settings
+ * @returns {ColorScheme}
+ */
+export const loadColorScheme = (settings) => {
+	const darkMode = settings.load('dark', undefined)
+	let defaultColorScheme
+	switch (darkMode) {
+		case 'false':
+			defaultColorScheme = 'light'
+			break
+
+		case 'true':
+			defaultColorScheme = 'dark'
+			break
+
+		case undefined:
+			defaultColorScheme = 'system'
+			break
+	}
+
+	return settings.load('colorScheme', defaultColorScheme)
+}
+
+/**
+ * Tracks whether the current color scheme should be dark.
+ *
+ * @type {MediaQueryList}
+ */
+export const prefersColorSchemeDark = window.matchMedia(
+	'(prefers-color-scheme: dark)',
+)
diff --git a/src/stores/base.js b/src/stores/base.js
@@ -1,4 +1,9 @@
 import { defineStore } from 'pinia'
+import {
+	colorSchemeToDarkMode,
+	loadColorScheme,
+	prefersColorSchemeDark,
+} from '../lib/colorScheme'
 import { $set, deepEqual } from '../lib/utils'
 import logger from '../lib/logger'
 
@@ -141,11 +146,14 @@ const useBaseStore = defineStore('base', {
 			lrChannelConfig: false,
 		},
 		ui: {
-			darkMode: settings.load('dark', false),
+			colorScheme: loadColorScheme(settings),
 			navTabs: settings.load('navTabs', false),
 			compactMode: settings.load('compact', false),
 			streamerMode: settings.load('streamerMode', false),
 		},
+		uiState: {
+			darkMode: colorSchemeToDarkMode(loadColorScheme(settings)),
+		},
 	}),
 	getters: {
 		controllerNode() {
@@ -510,12 +518,28 @@ const useBaseStore = defineStore('base', {
 				Object.assign(this.gateway, conf.gateway || {})
 				Object.assign(this.backup, conf.backup || {})
 				Object.assign(this.ui, conf.ui || {})
-
-				// ensure local storage is in sync with the store
-				// to prevent theme switch on startup
-				this.setDarkMode(this.ui.darkMode)
 			}
 		},
+		/**
+		 * Initialize the color scheme by:
+		 * - Setting up an event listener for preferred color scheme changes.
+		 *     This will set the dark mode only if `ui.colorScheme` is `'system'`.
+		 * - Setting the color scheme and dark mode to the value in settings.
+		 */
+		initColorScheme() {
+			prefersColorSchemeDark.addEventListener('change', (event) => {
+				// Bail if the color scheme is not set by the system.
+				if (this.ui.colorScheme !== 'system') {
+					return
+				}
+
+				this.setDarkMode(event.matches)
+			})
+
+			// ensure local storage is in sync with the store
+			// to prevent theme switch on startup
+			this.setColorScheme(this.ui.colorScheme)
+		},
 		initPorts(ports) {
 			if (ports) {
 				this.serial_ports = ports || []
@@ -574,17 +598,26 @@ const useBaseStore = defineStore('base', {
 				}
 
 				this.initSettings(data.settings)
+				this.initColorScheme()
 				this.initPorts(data.serial_ports)
 				this.initScales(data.scales)
 				this.initDevices(data.devices)
 
 				this.inited = true
 			}
 		},
+		/**
+		 * Sets the {@link ColorScheme} and updates the {@link DarkMode} accordingly.
+		 * @param {ColorScheme} value
+		 */
+		setColorScheme(value) {
+			settings.store('colorScheme', value)
+			this.ui.colorScheme = value
+			this.setDarkMode(colorSchemeToDarkMode(value))
+		},
 		setDarkMode(value) {
-			settings.store('dark', value)
 			// the `darkMode` watcher in App.vue will change vuetify theme
-			this.ui.darkMode = value
+			this.uiState.darkMode = value
 
 			const metaThemeColor = document.querySelector(
 				'meta[name=theme-color]',
diff --git a/src/views/Login.vue b/src/views/Login.vue
@@ -56,13 +56,10 @@
 							hide-details
 							label="Remember Me"
 						></v-checkbox>
-						<v-checkbox
+						<color-scheme
 							prepend-icon="null"
 							hide-details
-							persistent-hint
-							label="Dark mode"
-							v-model="internalDarkMode"
-						></v-checkbox>
+						></color-scheme>
 					</v-form>
 				</v-card-text>
 				<v-card-actions class="justify-center">
@@ -99,11 +96,14 @@ import { Routes } from '@/router'
 import useBaseStore from '../stores/base.js'
 import logger from '../lib/logger'
 
-import { mapState, mapActions } from 'pinia'
+import { mapActions } from 'pinia'
 
 const log = logger.get('Login')
 
 export default {
+	components: {
+		ColorScheme: () => import('@/components/custom/ColorScheme.vue'),
+	},
 	data() {
 		return {
 			username: '',
@@ -121,19 +121,6 @@ export default {
 			},
 		}
 	},
-	computed: {
-		...mapState(useBaseStore, {
-			darkMode: (store) => store.ui.darkMode,
-		}),
-		internalDarkMode: {
-			get() {
-				return this.darkMode
-			},
-			set(value) {
-				this.setDarkMode(value)
-			},
-		},
-	},
 	watch: {
 		error: function (newValue) {
 			if (newValue) {
@@ -159,14 +146,16 @@ export default {
 			} else {
 				localStorage.removeItem('user')
 			}
+
+			this.initColorScheme()
 		} else {
 			this.error = true
 			this.error_type = 'error'
 			this.error_text = 'Local storage not supported'
 		}
 	},
 	methods: {
-		...mapActions(useBaseStore, ['setDarkMode']),
+		...mapActions(useBaseStore, ['initColorScheme']),
 		isLocalStorageSupported() {
 			const testKey = 'test'
 			const storage = window.localStorage
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -33,12 +33,7 @@
 					<v-expansion-panel-content>
 						<v-row class="mb-5">
 							<v-col cols="12" sm="6">
-								<v-switch
-									hint="Enable dark mode"
-									persistent-hint
-									label="Dark mode"
-									v-model="internalDarkMode"
-								></v-switch>
+								<color-scheme />
 							</v-col>
 							<v-col cols="12" sm="6">
 								<v-switch
@@ -2079,7 +2074,7 @@
 			space-be
 			class="sticky-buttons py-3 px-4"
 			:style="{
-				backgroundColor: internalDarkMode ? '#272727' : '#f5f5f5',
+				backgroundColor: darkMode ? '#272727' : '#f5f5f5',
 			}"
 		>
 			<v-btn class="mr-2" small color="error" @click="resetConfig">
@@ -2134,6 +2129,7 @@ export default {
 	name: 'Settings',
 	mixins: [InstancesMixin],
 	components: {
+		ColorScheme: () => import('@/components/custom/ColorScheme.vue'),
 		DialogGatewayValue: () =>
 			import('@/components/dialogs/DialogGatewayValue.vue'),
 		fileInput: () => import('@/components/custom/file-input.vue'),
@@ -2147,12 +2143,12 @@ export default {
 		},
 	},
 	computed: {
-		internalDarkMode: {
+		internalColorScheme: {
 			get() {
-				return this.darkMode
+				return this.colorScheme
 			},
 			set(value) {
-				this.setDarkMode(value)
+				this.setColorScheme(value)
 			},
 		},
 		internalNavTabs: {
@@ -2262,7 +2258,8 @@ export default {
 			'ui',
 		]),
 		...mapState(useBaseStore, {
-			darkMode: (store) => store.ui.darkMode,
+			colorScheme: (store) => store.ui.colorScheme,
+			darkMode: (store) => store.uiState.darkMode,
 			navTabs: (store) => store.ui.navTabs,
 			streamerMode: (store) => store.ui.streamerMode,
 		}),
@@ -2418,7 +2415,7 @@ export default {
 	},
 	methods: {
 		...mapActions(useBaseStore, [
-			'setDarkMode',
+			'setColorScheme',
 			'setNavTabs',
 			'setStreamerMode',
 			'initSettings',
@@ -2730,7 +2727,7 @@ export default {
 			this.newBackup = copy(this.backup)
 
 			if (this.prevUi) {
-				this.internalDarkMode = this.prevUi.darkMode
+				this.internalColorScheme = this.prevUi.colorScheme
 				this.internalNavTabs = this.prevUi.navTabs
 				this.internalStreamerMode = this.prevUi.streamerMode
 			} else {
