Currently, I am utilizing an external template with MUI and would like to change the primary color palette in a project configuration file. My goal is to replicate the existing theme along with all of its configurations (such as typography, breakpoints, etc.) while only making modifications to a few specific values, such as primary and secondary colors. Moreover, I seek a scalable solution that allows for easy addition of more configurations in the future.
I have explored using different ThemeProviders within my application by passing the theme config. To achieve this, I considered creating a customThemeProvider where I could retrieve the current theme and merge it deeply with my customization options. For instance:
import { pink, yellow } from "@mui/material/colors";
const appTheme = {
palette: {
primary: yellow,
secondary: pink,
}
};
export default appTheme;
The code snippet above illustrates how my themeProvider could potentially function:
import {ThemeProvider, useTheme} from "@mui/material";
import {Theme} from "@mui/material/styles";
import {deepmerge} from "@mui/utils";
import {ThemeOptions} from "@mui/material/styles/createTheme";
const CustomThemeProvider = (props : {customThemeOptions: Partial<ThemeOptions>, children : React.ReactNode})=>{
const appTheme = useTheme()
const customTheme = deepmerge(appTheme,props.customThemeOptions)
return(
<ThemeProvider theme={customTheme}>
{props.children}
</ThemeProvider>
)
}
export default CustomThemeProvider
Unfortunately, the implementation described above does not yield the desired outcome as the new palette fails to take effect. I have also tried passing a theme rather than a themeOptions or using CreateTheme({palette: {...}}), yet those attempts proved unsuccessful as well.
If you have any insight into what may be causing this issue, or if there exists an alternative solution that can produce similar results, please do share your thoughts.
Thank you for your assistance.