React Material Theme Chooser

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?

you can associate a theme entry/id with a profile on your backend, save an entry in your database corresponding for each of your themes (configuration to get it loaded) — dbrrt
that true but i'm interested what do i store on backend, how do i store them and lets say on load time see id? The perfet solution would be probably that i save theme, as css and load it on load time maybe? — user3187715
You can for instance start with a simple case, light/dark theme. You've got a table/collection with user_themes in which you set the value of the theme. Then, once you load your app, you get from the database this value to apply the proper theme to user — dbrrt

Ryan Cogswell Ryan Cogswell · Accepted Answer · 2019-01-19T13:21:35

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

React Material Theme Chooser

1 Answers