fix darkmode bug

frontend/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.enableFiletypes": [
+        "!javascript"
+    ]
+}

frontend/src/store/modules/userSettings.js

@@ -1,11 +1,22 @@
-
 import api from "../../api";
 import Vuetify from "../../plugins/vuetify";
 
+function inDarkMode(payload) {
+  let isDark;
+
+  if (payload === "system") {
+    //Get System Preference from browser
+    const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    isDark = darkMediaQuery.matches;
+  } else if (payload === "dark") isDark = true;
+  else if (payload === "light") isDark = false;
+
+  return isDark;
+}
+
 const state = {
   activeTheme: {},
-  darkMode: 'system'
-
+  darkMode: "system",
 };
 
 const mutations = {
@@ -15,17 +26,7 @@ const mutations = {
     state.activeTheme = payload;
   },
   setDarkMode(state, payload) {
-    let isDark;
-
-    if (payload === 'system') {
-      //Get System Preference from browser
-      const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-      isDark = darkMediaQuery.matches;
-    }
-    else if (payload === 'dark')
-      isDark = true;
-    else if (payload === 'light')
-      isDark = false;
+    let isDark = inDarkMode(payload);
 
     if (isDark !== null) {
       Vuetify.framework.theme.dark = isDark;
@@ -40,31 +41,30 @@ const actions = {
     if (defaultTheme.colors) {
       Vuetify.framework.theme.themes.dark = defaultTheme.colors;
       Vuetify.framework.theme.themes.light = defaultTheme.colors;
-      commit('setTheme', defaultTheme)
+      commit("setTheme", defaultTheme);
     }
   },
 
   async initTheme({ dispatch, getters }) {
     //If theme is empty resetTheme
     if (Object.keys(getters.getActiveTheme).length === 0) {
-      await dispatch('resetTheme')
-    }
-    else {
+      await dispatch("resetTheme");
+    } else {
+      Vuetify.framework.theme.dark = inDarkMode(getters.getDarkMode);
       Vuetify.framework.theme.themes.dark = getters.getActiveTheme.colors;
       Vuetify.framework.theme.themes.light = getters.getActiveTheme.colors;
     }
   },
-
-}
+};
 
 const getters = {
   getActiveTheme: (state) => state.activeTheme,
-  getDarkMode: (state) => state.darkMode
-}
+  getDarkMode: (state) => state.darkMode,
+};
 
 export default {
   state,
   mutations,
   actions,
-  getters
-}
+  getters,
+};