From 6ad4d0dd1fb71a1615c32b7757601ef33884a935 Mon Sep 17 00:00:00 2001
From: Daniel Lando <daniel.sorridi@gmail.com>
Date: Mon, 30 Oct 2023 13:49:34 +0100
Subject: [PATCH] fix(ui): ensure theme is in sync with local storage to
 prevent flickering

---
 src/App.vue        | 5 ++++-
 src/stores/base.js | 4 ++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 653235a89f1..17ff1298974 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1391,7 +1391,10 @@ export default {
 		if (settings.load('dark') === undefined) {
 			useBaseStore().setDarkMode(systemThemeDark)
 		} else {
-			// default to white
+			// 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)
 		}
 
diff --git a/src/stores/base.js b/src/stores/base.js
index e09c4731e96..640668d7afd 100644
--- a/src/stores/base.js
+++ b/src/stores/base.js
@@ -449,6 +449,10 @@ 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)
 			}
 		},
 		initPorts(ports) {