Theming

src/hooks/useToggleColorMode.js

@@ -1,31 +1,44 @@
-import { useState, useMemo } from 'react';
-import { createTheme } from '@mui/material/styles';
+import { useState, useMemo } from "react";
+import { createTheme } from "@mui/material/styles";
 import {
-	authScopeSetHelper,
-	authScopeStringGetHelper,
-} from '../util/helpers/authScopeHelpers';
+  authScopeSetHelper,
+  authScopeStringGetHelper,
+} from "../util/helpers/authScopeHelpers";
+import selectedTheme from "../themes";
 
 const useToggleColorMode = () => {
-	const currentColorMode = authScopeStringGetHelper('colorMode') || 'light';
-	const [mode, setMode] = useState(currentColorMode);
+  const currentColorMode = authScopeStringGetHelper("colorMode") || "light";
+  const [mode, setMode] = useState(currentColorMode);
 
-	const toggleColorMode = () => {
-		const nextMode = mode === 'light' ? 'dark' : 'light';
-		setMode(nextMode);
-		authScopeSetHelper('colorMode', nextMode);
-	};
+  const toggleColorMode = () => {
+    const nextMode = mode === "light" ? "dark" : "light";
+    setMode(nextMode);
+    authScopeSetHelper("colorMode", nextMode);
+  };
 
-	const theme = useMemo(
-		() =>
-			createTheme({
-				palette: {
-					mode,
-				},
-			}),
-		[mode]
-	);
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode,
+          primary: {
+            main:
+              mode === "light"
+                ? selectedTheme.colors.primaryLight
+                : selectedTheme.colors.primaryDark,
+          },
+          secondary: {
+            main:
+              mode === "light"
+                ? selectedTheme.colors.secondaryLight
+                : selectedTheme.colors.secondaryDark,
+          },
+        },
+      }),
+    [mode]
+  );
 
-	return [toggleColorMode, theme];
+  return [toggleColorMode, theme];
 };
 
 export default useToggleColorMode;

src/themes/index.js

@@ -0,0 +1,13 @@
+import primary from "./primaryTheme/primaryTheme";
+
+let selectedThemeNumber = 0;
+
+const getTheme = () => {
+    if (selectedThemeNumber === 0) {
+        return {...primary}
+    }
+}
+
+const selectedTheme = getTheme();
+
+export default selectedTheme;

src/themes/primaryTheme/primaryTheme.js

@@ -0,0 +1,7 @@
+import { primaryThemeColors } from "./primaryThemeColors";
+
+const primary = {
+  colors: primaryThemeColors,
+};
+
+export default primary;

src/themes/primaryTheme/primaryThemeColors.js

@@ -0,0 +1,6 @@
+export const primaryThemeColors = {
+  primaryLight: "#673ab7",
+  primaryDark: "#009688",
+  secondaryLight: "#212121",
+  secondaryDark: "#f5f5f5",
+};