From b0563de01c5e430f0af49653e30cee3e01bc0879 Mon Sep 17 00:00:00 2001
From: Zack Baldwin <zack@zackb.com>
Date: Sun, 2 Jun 2024 05:30:58 -0500
Subject: [PATCH] Updates to dark mode logic

---
 src/App.vue            | 57 ++++++++++++++++++++++++++++++------------
 src/stores/base.js     |  2 +-
 src/views/Settings.vue | 37 +++++++++++++++++++++------
 3 files changed, 71 insertions(+), 25 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9eb7f1298d..cdb855cabc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-app :dark="darkMode">
+	<v-app>
 		<div
 			v-if="$route.meta.requiresAuth && auth !== undefined && !hideTopbar"
 		>
@@ -592,8 +592,11 @@ export default {
 			this.title = value.name || ''
 			this.startSocket()
 		},
+		systemDark() {
+			this.updateDarkMode(this.darkMode)
+		},
 		darkMode(val) {
-			this.$vuetify.theme.dark = !!val
+			this.updateDarkMode(val)
 		},
 		pages() {
 			// this.verifyRoute()
@@ -666,6 +669,8 @@ export default {
 			hideTopbar: false,
 			title: '',
 			messages: [],
+			systemDark: false,
+			mq_system_dark: null,
 		}
 	},
 	methods: {
@@ -1570,6 +1575,14 @@ export default {
 				log.error(error)
 			}
 		},
+		updateSystemDark(update) {
+			this.systemDark = update.matches
+		},
+		updateDarkMode(value) {
+			// Set to system defualt if null
+			this.$vuetify.theme.dark =
+				value === null ? this.systemDark : !!value
+		},
 	},
 	beforeMount() {
 		manager.register(instances.APP, this)
@@ -1587,22 +1600,26 @@ export default {
 
 		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)
+		// Event listener to capture system dark changes.
+		if (this.mq_system_dark === null && window) {
+			this.mq_system_dark = window.matchMedia(
+				'(prefers-color-scheme: dark)',
+			)
+			this.mq_system_dark.addEventListener(
+				'change',
+				this.updateSystemDark,
+			)
 		}
 
+		// pre-load System Dark
+		this.updateSystemDark(this.mq_system_dark)
+
+		// 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.updateDarkMode(settings.load('dark', null))
+
 		useBaseStore().$onAction(({ name, args }) => {
 			if (name === 'showSnackbar') {
 				this.showSnackbar(...args)
@@ -1612,6 +1629,14 @@ export default {
 			}
 		})
 	},
+	beforeUnmount() {
+		if (this.mq_system_dark !== null) {
+			this.mq_system_dark.removeEventListener(
+				'change',
+				this.updateSystemDark,
+			)
+		}
+	},
 	beforeDestroy() {
 		if (this.socket) this.socket.close()
 	},
diff --git a/src/stores/base.js b/src/stores/base.js
index c6bbea8747..7b2a8acb92 100644
--- a/src/stores/base.js
+++ b/src/stores/base.js
@@ -134,7 +134,7 @@ const useBaseStore = defineStore('base', {
 			frequency: false,
 		},
 		ui: {
-			darkMode: settings.load('dark', false),
+			darkMode: settings.load('dark', null), // Null = System Default
 			navTabs: settings.load('navTabs', false),
 			compactMode: settings.load('compact', false),
 		},
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index adf30c2849..7be6d749c2 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -32,12 +32,29 @@
 					<v-expansion-panel-content>
 						<v-row class="mb-5">
 							<v-col cols="12" sm="6">
-								<v-switch
-									hint="Enable dark mode"
-									persistent-hint
+								<v-input
 									label="Dark mode"
-									v-model="internalDarkMode"
-								></v-switch>
+									hint="Eanble System Defined, Dark, or Light modes"
+									persistent-hint
+								>
+									<v-btn-toggle
+										v-model="btnGrpDarkMode"
+										divided
+										manditory
+									>
+										<v-btn value="auto">
+											<v-icon>laptop</v-icon>
+										</v-btn>
+
+										<v-btn value="true">
+											<v-icon>dark_mode</v-icon>
+										</v-btn>
+
+										<v-btn value="false">
+											<v-icon>light_mode</v-icon>
+										</v-btn>
+									</v-btn-toggle>
+								</v-input>
 							</v-col>
 							<v-col cols="12" sm="6">
 								<v-switch
@@ -1917,12 +1934,16 @@ export default {
 		},
 	},
 	computed: {
-		internalDarkMode: {
+		btnGrpDarkMode: {
 			get() {
-				return this.darkMode
+				if (this.darkMode === null) return 'auto'
+				if (this.darkMode === true) return 'true'
+				return 'false'
 			},
 			set(value) {
-				this.setDarkMode(value)
+				if (value === 'auto') this.setDarkMode(null)
+				else if (value === 'true') this.setDarkMode(true)
+				else this.setDarkMode(false)
 			},
 		},
 		internalNavTabs: {