1  import { useMemo } from "react";
 2  import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
 3  import useSettings from "app/hooks/useSettings";
 4  import { useTeamBranding } from "app/contexts/TeamBrandingContext";
 5  
 6  const MatxTheme = ({ children }) => {
 7    const { settings } = useSettings();
 8    const { branding } = useTeamBranding();
 9  
10    const theme = useMemo(() => {
11      const baseTheme = { ...settings.themes[settings.activeTheme] };
12  
13      if (!branding || (!branding.primary_color && !branding.secondary_color)) {
14        return baseTheme;
15      }
16  
17      // Overlay team branding colors onto the active theme
18      return createTheme({
19        ...baseTheme,
20        palette: {
21          ...baseTheme.palette,
22          ...(branding.primary_color && {
23            primary: { main: branding.primary_color },
24          }),
25          ...(branding.secondary_color && {
26            secondary: { main: branding.secondary_color },
27          }),
28        },
29      });
30    }, [settings, branding]);
31  
32    return (
33      <ThemeProvider theme={theme}>
34        <CssBaseline />
35        {children}
36      </ThemeProvider>
37    );
38  };
39  
40  export default MatxTheme;