React Material Theme Chooser - reactjs

Question

So I've been working with react material on my application. Everything until now it's fine but I want to make application in which themes can be stored on the back-end and I can load them based on user choice.
So until now, I know I can create multiple themes and store them as stated here
but I want to store them to the back-end and I don't have Idea how that would work
So I need help for an idea or some kind of tutorial which can point me in the right direction?

Answer 1

You just need to store the attributes that you are allowing the user to change/specify. For instance, you might only allow them to choose a primary and secondary color. You would then save those two pieces of information in your DB and then recreate the theme using createMuiTheme.
Here's some sample code demonstrating this:
import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "#material-ui/core/CssBaseline";
import AppBar from "#material-ui/core/AppBar";
import Button from "#material-ui/core/Button";
import { createMuiTheme, MuiThemeProvider } from "#material-ui/core/styles";
const themeDB = {
a: {
primaryColor: "#0f0",
secondaryColor: "#f0f"
},
b: {
primaryColor: "#ff0",
secondaryColor: "#0ff"
}
};
const createThemeFromThemeDBEntry = themeDBEntry => {
return createMuiTheme({
palette: {
primary: {
main: themeDBEntry.primaryColor
},
secondary: {
main: themeDBEntry.secondaryColor
}
}
});
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = { currentTheme: createMuiTheme() };
}
switchToThemeA = () => {
const themeA = createThemeFromThemeDBEntry(themeDB.a);
this.setState({ currentTheme: themeA });
};
switchToThemeB = () => {
const themeB = createThemeFromThemeDBEntry(themeDB.b);
this.setState({ currentTheme: themeB });
};
useDefaultTheme = () => {
this.setState({ currentTheme: createMuiTheme() });
};
render() {
return (
<>
<CssBaseline />
<MuiThemeProvider theme={this.state.currentTheme}>
<AppBar position="static">AppBar using Primary Color</AppBar>
<AppBar position="static" color="secondary">
AppBar using Secondary Color
</AppBar>
<br />
<Button
onClick={this.switchToThemeA}
variant="contained"
color="primary"
>
Use Theme A
</Button>
<Button
onClick={this.switchToThemeB}
variant="contained"
color="secondary"
>
Use Theme B
</Button>
<Button onClick={this.useDefaultTheme} color="secondary">
Use Default Theme
</Button>
</MuiThemeProvider>
</>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);