From 5f0ecb8bbebda5dc90c0190ce06be83704f3fe1b Mon Sep 17 00:00:00 2001
From: Aurora Lahtela <24460436+AuroraLS3@users.noreply.github.com>
Date: Sun, 16 Apr 2023 19:54:10 +0300
Subject: [PATCH] Fix theme not applying by default

---
 Plan/react/dashboard/src/hooks/themeHook.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/Plan/react/dashboard/src/hooks/themeHook.js b/Plan/react/dashboard/src/hooks/themeHook.js
index 3b92951b6..f4ec89db3 100644
--- a/Plan/react/dashboard/src/hooks/themeHook.js
+++ b/Plan/react/dashboard/src/hooks/themeHook.js
@@ -1,4 +1,4 @@
-import {createContext, useContext, useMemo, useState} from "react";
+import {createContext, useContext, useEffect, useMemo, useState} from "react";
 import {createNightModeCss, getColors} from "../util/colors";
 import {getLightModeChartTheming, getNightModeChartTheming} from "../util/graphColors";
 import {useMetadata} from "./metadataHook";
@@ -16,7 +16,7 @@ const getDefaultTheme = (metadata) => {
         || defaultTheme === 'default'
         || defaultTheme === 'black'
         || defaultTheme === 'white'
-        || !themeColors.map(color => color.name).includes(defaultTheme)
+        || (defaultTheme !== 'night' && !themeColors.map(color => color.name).includes(defaultTheme));
 
     return invalidColor ? 'plan' : defaultTheme;
 }
@@ -38,9 +38,15 @@ export const ThemeContextProvider = ({children}) => {
     const metadata = useMetadata();
 
     const [colorChooserOpen, setColorChooserOpen] = useState(false);
-    const [selectedColor, setSelectedColor] = useState(getStoredTheme(getDefaultTheme(metadata)));
+    const [selectedColor, setSelectedColor] = useState(getStoredTheme('plan'));
     const [previousColor, setPreviousColor] = useState(undefined);
 
+    useEffect(() => {
+        if (!metadata) return;
+
+        setSelectedColor(getStoredTheme(getDefaultTheme(metadata)));
+    }, [metadata, setSelectedColor]);
+
     const sharedState = useMemo(() => {
         return {
             selectedColor, setSelectedColor,
@@ -86,7 +92,9 @@ export const useTheme = () => {
 
     const toggleNightMode = () => {
         if (isNightModeEnabled()) {
-            setTheme(previousColor ? previousColor : getDefaultTheme(metadata));
+            const defaultTheme = getDefaultTheme(metadata);
+            const lightTheme = defaultTheme === 'night' ? 'plan' : defaultTheme;
+            setTheme(previousColor ? previousColor : lightTheme);
         } else {
             setPreviousColor(selectedColor);
             setTheme('night');