React Material Theme Chooser

Вам просто нужно сохранить атрибуты, которые вы разрешаете пользователю изменять / указывать. Например, вы можете позволить им выбрать только основной и дополнительный цвет. Затем вы должны сохранить эти две части информации в вашей БД и затем воссоздать тему, используя createMuiTheme.

Вот пример кода, демонстрирующего это:

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);