Remember dark mode choice

Author: g3force

frontend/src/App.vue

@@ -6,6 +6,9 @@ import StoreUpdateCountStatus from "@/components/StoreUpdateCountStatus.vue";
 import ManualControlView from "@/views/ManualControlView.vue";
 import ProtocolList from "@/components/protocol/ProtocolList.vue";
 import {useQuasar} from "quasar";
+import {useUiStateStore} from "@/store/uiState";
+
+const uiState = useUiStateStore()
 
 const leftDrawerOpen = ref(false)
 const toggleLeftDrawer = () => {
@@ -19,6 +22,11 @@ const $q = useQuasar()
 const darkMode = computed(() => $q.dark.isActive)
 const toggleDarkMode = () => {
   $q.dark.toggle()
+  uiState.darkMode = $q.dark.isActive
+}
+
+if (uiState.darkMode !== undefined) {
+  $q.dark.set(uiState.darkMode)
 }
 
 const dev = computed(() => {

frontend/src/main.ts

@@ -1,5 +1,6 @@
 import {createApp} from 'vue'
 import App from './App.vue'
+import {subscribeToLocalStorage} from "@/store/uiState";
 
 import {createPinia} from "pinia";
 import router from './router'
@@ -28,3 +29,5 @@ createApp(App)
     }
   })
   .mount('#app')
+
+subscribeToLocalStorage()

frontend/src/store/uiState/index.ts

@@ -7,6 +7,7 @@ interface UiState {
   teamDetailsFoulsExpanded: boolean,
   teamDetailsYellowCardsExpanded: boolean,
   teamDetailsRedCardsExpanded: boolean,
+  darkMode?: boolean,
 }
 
 export const useUiStateStore = defineStore('uiState', {
@@ -16,6 +17,7 @@ export const useUiStateStore = defineStore('uiState', {
       teamDetailsFoulsExpanded: true,
       teamDetailsYellowCardsExpanded: true,
       teamDetailsRedCardsExpanded: true,
+      darkMode: undefined,
     }
     const storedData = localStorage.getItem('ui-state')
     if (storedData) {
@@ -25,6 +27,8 @@ export const useUiStateStore = defineStore('uiState', {
   },
 })
 
-useUiStateStore().$subscribe((mutation: SubscriptionCallbackMutation<UiState>, state: UnwrapRef<UiState>) => {
-  localStorage.setItem('ui-state', JSON.stringify(state))
-})
+export function subscribeToLocalStorage() {
+  useUiStateStore().$subscribe((mutation: SubscriptionCallbackMutation<UiState>, state: UnwrapRef<UiState>) => {
+    localStorage.setItem('ui-state', JSON.stringify(state))
+  })
+}