UPDATE: Store Theme in User Cache

Also added some comments explaining ThemeContext.tsx

frontend/src/components/Layout/Theme.tsx

@@ -34,3 +34,11 @@ const Theme: React.FC = () => {
 };
 
 export default Theme;
+
+{/*
+${isMode ? 
+  `text-white bg-[#3478ef] hover:text-[#3478ef] hover:bg-[#000000]
+  border-[#3478ef] hover:border-[##3478ef]` :
+`text-yellow-400 bg-white hover:text-yellow-400 hover:bg-white 
+  border-yellow-400 hover:border-yellow-400`}
+ hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all `} */}

frontend/src/context/ThemeContext.tsx

@@ -1,27 +1,54 @@
-import React, { createContext, useContext, useState, ReactNode } from "react";
+import React, { createContext, useContext, useState, useEffect, ReactNode } from "react";
 
-// Theme context and types
+//  Defines the Theme (Colour Theme) that would be shared/used
 interface ThemeContextType {
-  theme: string;
-  setTheme: (theme: string) => void;
+    theme: string;
+    setTheme: (theme: string) => void;
 }
 
+//  Store theme and provide access to setTheme function
+//  If no provider is used, set to undefined
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
 export const ThemeProvider = ({ children }: { children: ReactNode }) => {
-  const [theme, setTheme] = useState<string>("light");
+    // Set default theme to dark
 
-  return (
-    <ThemeContext.Provider value={{ theme, setTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
+    const [theme, setTheme] = useState<string>(() => {
+        // If exist on user cache, use that instead
+        return localStorage.getItem("user-theme") || "dark";
+    });
+
+    useEffect(() => {
+        // Store current theme set by user
+        localStorage.setItem("user-theme", theme);
+
+        // Update the theme
+        document.body.setAttribute("data-theme", theme);
+    }, [theme]);
+
+    return (
+        // Sets the selected theme to child component
+        <ThemeContext.Provider value={{ theme, setTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
 };
 
+//  Custom Hook which allows any component to access theme & setTheme with "useTheme()"
 export const useTheme = () => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
+    const context = useContext(ThemeContext);   //Retrieves current value of context
+    if (!context) {
+        throw new Error("useTheme must be used within a ThemeProvider");    //If called outside of ThemeContext.tsx, errorHandle
+    }
+    return context;
 };
+
+
+{/** 
+    
+    createContext: Allow components to share data without directly passing props through multiple levels
+    useContext: Allows a component to access the current value of a context ("Hook")
+    useState: Manages state of a component ("Hook")
+    ReactNode: Allows to take in HTML / React / Arrays of Component
+    
+    */}