ThemeDecorator.tsx

import { createMuiTheme } from "@material-ui/core";
import red from "@material-ui/core/colors/red";
import ThemeProvider from "@material-ui/styles/ThemeProvider";
import React from "react";

const themes = {
  default: createMuiTheme({}),
  red: createMuiTheme({
    palette: {
      primary: red
    }
  })
};

const Decorator: React.FC<{ children: any; theme?: string }> = ({
  children
}) => {
  const [theme, setTheme] = React.useState(
    localStorage.getItem("theme") || "default"
  );

  return (
    <ThemeProvider theme={themes[theme]}>
      <header>
        <select
          onChange={e => {
            setTheme(e.target.value);
            localStorage.setItem("theme", e.target.value);
          }}
          value={theme}
        >
          <option value="default">Default</option>
          <option value="red">Red</option>
        </select>
      </header>
      {children}
    </ThemeProvider>
  );
};

export default Decorator;