Change primary color dynamically in MUI theme - reactjs

Question

There is requirement, I want to give access to user can select their primary color from list like Blue, Orange Green. I have used latest MUI for front-end.
Now I am able to change light to dark theme but my requirement is change primary color also. please help me for same how to code for same.
Please check attached screen:

Answer 1

import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
import Root from './Root';
import lightTheme from 'your-light-theme-path';
import darkTheme from 'your-dark-them-path';
const theme1 = createMuiTheme(lightTheme);
const theme2 = createMuiTheme(darkTheme)
class App extends React.Component {
state = {
isThemeLight: true;
}
onChange = () => {
this.setState=({ isThemeLight: false })
}
render() {
const { isThemeLight } = this.state;
return (
<MuiThemeProvider theme={isThemeLight ? theme1 : theme2}>
<Root /> // your app here
<button onClick={this.onChange}>Change Dark</button>
</MuiThemeProvider>
);
}
}
render(<App />, document.querySelector('#app'));
Where your lightTheme or darkTheme can be a file like this
export default {
direction: 'ltr',
palette: {
type: 'light',
primary: {
main: '#37b44e',
},
secondary: {
main: '#000',
},
},
};
You can see all the list of theme configurable in Material UI Docs Theme Configuration
Approach 2 (For Theme Change Runtime)
import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
import Root from './Root';
const theme1 = createMuiTheme(lightTheme);
const theme2 = createMuiTheme(darkTheme)
class App extends React.Component {
state = {
theme1: {
palette: {
type: 'light',
primary: { main: '#37b44e' },
secondary: { main: '#000' },
},
};
theme2: {
palette: {
type: 'light',
primary: { main: '#37b44e' },
secondary: { main: '#000' },
},
};
isThemeLight: true;
}
onChange = () => {
this.setState=({ isThemeLight: false })
}
onChangeTheme1 = () => {
this.setState(({theme1}) => ({
theme1: {
...theme1,
primary: { main: 'red' },
}
}));
}
render() {
const { theme1, theme2, isThemeLight } = this.state;
return (
<MuiThemeProvider
theme={isThemeLight ? createMuiTheme(theme1) : createMuiTheme(theme2)}
>
<Root /> // your app here
<button onClick={this.onChange}>Change Dark</button>
<button onClick={this.onChangeTheme1}>Change Palette Theme 1</button>
</MuiThemeProvider>
);
}
}
render(<App />, document.querySelector('#app'));

Answer 2

You can use useMemo to compute the theme object whenever the primaryColor state changes. The state can be updated with setPrimaryColor() after the user chose an option in the UI:
const [primaryColor, setPrimaryColor] = React.useState(defaultColor);
const theme = React.useMemo(
() =>
createTheme({
palette: {
primary: {
main: primaryColor,
},
},
}),
[primaryColor],
);
Here is a minimal working example:
const defaultColor = '#f44336';
const [primaryColor, setPrimaryColor] = React.useState(defaultColor);
const theme = React.useMemo(
() =>
createTheme({
palette: {
primary: { main: primaryColor },
},
}),
[primaryColor],
);
return (
<ThemeProvider theme={theme}>
<Box m={2}>
<TextField
select
sx={{ width: 100 }}
label="Primary color"
defaultValue={defaultColor}
onChange={(e) => setPrimaryColor(e.target.value)}
>
<MenuItem value="#f44336">Red</MenuItem>
<MenuItem value="#2196f3">Blue</MenuItem>
<MenuItem value="#4caf50">Green</MenuItem>
</TextField>
<Checkbox defaultChecked />
</Box>
</ThemeProvider>
);
Live Demo