Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment