From 899efc2e2b171dbcedb2eadc0608e561cba80718 Mon Sep 17 00:00:00 2001
From: Hayden <hay-kot@pm.me>
Date: Thu, 7 Jan 2021 21:41:14 -0900
Subject: [PATCH] fix darkmode bug

---
 frontend/.vscode/settings.json             |  5 +++
 frontend/src/store/modules/userSettings.js | 48 +++++++++++-----------
 2 files changed, 29 insertions(+), 24 deletions(-)
 create mode 100644 frontend/.vscode/settings.json

diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
new file mode 100644
index 000000000000..b0b5a72c639d
--- /dev/null
+++ b/frontend/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "cSpell.enableFiletypes": [
+        "!javascript"
+    ]
+}
\ No newline at end of file
diff --git a/frontend/src/store/modules/userSettings.js b/frontend/src/store/modules/userSettings.js
index 005e403f369c..51b922616c12 100644
--- a/frontend/src/store/modules/userSettings.js
+++ b/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
-}
\ No newline at end of file
+  getters,
+};