init

client/src/theme/MuiThemeProviderForNextJs.tsx

@@ -0,0 +1,12 @@
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
+import { FunctionComponent, PropsWithChildren } from 'react';
+
+/**
+ * Platform-specific ThemeProvider for Next.js
+ * @component MuiThemeProviderForNextJs
+ */
+const MuiThemeProviderForNextJs: FunctionComponent<PropsWithChildren> = ({ children }) => {
+  return <AppRouterCacheProvider>{children}</AppRouterCacheProvider>;
+};
+
+export default MuiThemeProviderForNextJs;

client/src/theme/ThemeProvider.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { FunctionComponent, PropsWithChildren, useEffect, useMemo, useState } from 'react';
+import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles';
+
+import { useAppStore } from '../store';
+import DARK_THEME from './dark';
+import LIGHT_THEME from './light';
+import MuiThemeProviderForNextJs from './MuiThemeProviderForNextJs';
+import CssBaseline from '@mui/material/CssBaseline';
+
+function getThemeByDarkMode(darkMode: boolean) {
+  return darkMode ? createTheme(DARK_THEME) : createTheme(LIGHT_THEME);
+}
+
+/**
+ * Renders composition of Emotion's CacheProvider + MUI's ThemeProvider to wrap content of entire App
+ * The Light or Dark themes applied depending on global .darkMode state
+ * @component AppThemeProvider
+ */
+const AppThemeProvider: FunctionComponent<PropsWithChildren> = ({ children }) => {
+  const [state] = useAppStore();
+  const [loading, setLoading] = useState(true);
+
+  const currentTheme = useMemo(
+    () => getThemeByDarkMode(state.darkMode),
+    [state.darkMode] // Observe AppStore and re-create the theme when .darkMode changes
+  );
+
+  useEffect(() => setLoading(false), []); // Set .loading to false when the component is mounted
+
+  if (loading) return null; // Don't render anything until the component is mounted
+
+  return (
+    <MuiThemeProviderForNextJs>
+      <MuiThemeProvider theme={currentTheme}>
+        <CssBaseline /* MUI Styles */ />
+        {children}
+      </MuiThemeProvider>
+    </MuiThemeProviderForNextJs>
+  );
+};
+
+export default AppThemeProvider;

client/src/theme/colors.ts

@@ -0,0 +1,27 @@
+import { PaletteOptions, SimplePaletteColorOptions } from '@mui/material';
+
+const COLOR_PRIMARY: SimplePaletteColorOptions = {
+  main: '#64B5F6',
+  contrastText: '#000000',
+  // light: '#64B5F6',
+  // dark: '#64B5F6',
+};
+
+const COLOR_SECONDARY: SimplePaletteColorOptions = {
+  main: '#EF9A9A',
+  contrastText: '#000000',
+  // light: '#EF9A9A',
+  // dark: '#EF9A9A',
+};
+
+/**
+ * MUI colors set to use in theme.palette
+ */
+export const PALETTE_COLORS: Partial<PaletteOptions> = {
+  primary: COLOR_PRIMARY,
+  secondary: COLOR_SECONDARY,
+  // error: COLOR_ERROR,
+  // warning: COLOR_WARNING;
+  // info: COLOR_INFO;
+  // success: COLOR_SUCCESS;
+};

client/src/theme/dark.ts

@@ -0,0 +1,18 @@
+import { ThemeOptions } from '@mui/material';
+import { PALETTE_COLORS } from './colors';
+
+/**
+ * MUI theme options for "Dark Mode"
+ */
+export const DARK_THEME: ThemeOptions = {
+  palette: {
+    mode: 'dark',
+    // background: {
+    //   paper: '#424242', // Gray 800 - Background of "Paper" based component
+    //   default: '#121212',
+    // },
+    ...PALETTE_COLORS,
+  },
+};
+
+export default DARK_THEME;

client/src/theme/index.ts

@@ -0,0 +1,10 @@
+import AppThemeProvider from './ThemeProvider';
+import DARK_THEME from './dark';
+import LIGHT_THEME from './light';
+
+export {
+  LIGHT_THEME as default, // Change to DARK_THEME if you want to use dark theme as default
+  DARK_THEME,
+  LIGHT_THEME,
+  AppThemeProvider as ThemeProvider,
+};

client/src/theme/light.ts

@@ -0,0 +1,18 @@
+import { ThemeOptions } from '@mui/material';
+import { PALETTE_COLORS } from './colors';
+
+/**
+ * MUI theme options for "Light Mode"
+ */
+export const LIGHT_THEME: ThemeOptions = {
+  palette: {
+    mode: 'light',
+    // background: {
+    //   paper: '#f5f5f5', // Gray 100 - Background of "Paper" based component
+    //   default: '#FFFFFF',
+    // },
+    ...PALETTE_COLORS,
+  },
+};
+
+export default LIGHT_THEME;