Dynamic Material-UI Theme Provider Color Palette hex values from either API response or values from form

Question

i working on front end project for my company.project is based on next/reactJs with material-ui v5 as styling support. i am fairly familiar with MUIv5 ThemeProvider and its usage. As per company's latest requirements themeproviders color palette values should be coming from backend or should be coming from form where user types the color codes or names in respective fields and it should be reflected throughout the app. i provided them with dropdown with 2-3 color options but they want to give an option to their clients to customize the app (hope it technically possible! ;)). i am attaching the code snippets of themeprovider which utilize the useContext concept. i request you all guys to provide me some kind of solution/guidance to my problem

have a nice day ahead you guys are awesome.................

import { createTheme, responsiveFontSizes } from "@mui/material";
const primaryColor = "#02475B";
const secondaryColor = "#07AE8B";
const warningColor = "#FFA343";
const errorColor = "#CD4A4A";
const textColorLight = "#f5f5f5";
const textColorDark = "#001219";


 const baseTheme = createTheme({
  palette: {
    mode: "light",
    primary: {
      main: primaryColor,
    },
    secondary: {
      main: secondaryColor,
    },
    warning: {
      main: warningColor,
    },
    error: {
      main: errorColor,
    },
    neutral: {
      main: "#f2f4f3",
    },
    darkNeutral: {
      main: "#353c55",
    },
    typography: {
      fontFamily: ["Nunito Sans", "sans-serif"].join(","),
    },
  },

});
const theme = responsiveFontSizes(baseTheme);
export default theme;

i did try calling api in theme.js file but throw an error about useContext also tried making theme component to make work ... its child to data manipulation i was successful for manipulating one color from child

Answer 1

I would for example create a function that will create my theme and store that theme in the local state of my root component.

import { createTheme } from '@mui/material/styles';
    
    const createCustomTheme = (severty?: 'primary' | 'secondary' | undefined , color?: undefined | string)=>{
        return createTheme({
        palette: {
        mode: 'dark',
            primary: {
                main: (severty == 'primary' ) ? color :'#2a7696',
            },
            secondary: {
                main: (severty == 'secondary' ) ? color :'#f50057',
            },
            background: {
                default: '#0a1929',
                paper: '#0f2237',
            },
            divider: 'rgba(255,255,255,0.54)',
        },
        shape: {
            borderRadius: 4
        }
      });};
    
      export default createCustomTheme;

This way you can customize the creation of your theme. Here my function is not really developed. Once the theme is created and stored in the local state of your root component. You will only have to pass that local state to the ThemeProvider. You can then create a form that will ask the user to choose the colors and everything... once created, simply update your state by passing the user's information to your function for creating the theme.