diff --git a/src/App.vue b/src/App.vue
index 64643dff6e4..3b6fc405d2d 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"
 		>
@@ -595,8 +595,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()
@@ -669,6 +672,8 @@ export default {
 			hideTopbar: false,
 			title: '',
 			messages: [],
+			systemDark: false,
+			mq_system_dark: null,
 		}
 	},
 	methods: {
@@ -1573,6 +1578,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)
@@ -1590,22 +1603,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)
@@ -1615,6 +1632,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 d217eae8767..22457d93942 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),
 			streamerMode: settings.load('streamerMode', false),
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 8ac34cb436f..c523317f01e 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -33,12 +33,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
@@ -1986,12 +2003,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: {