Building React App using Material UI with Support for Multiple Switchable Themes

App.tsx

import React, { useContext } from 'react';
import { Button } from '@material-ui/core';
import { ThemeContext} from './ThemeProvider';

const App: React.FC = () => {
  // Get the setter function from context
  const setThemeName = useContext(ThemeContext)

  return (
    <div className="App">
        <Button
          variant="contained"
          color="primary"
          onClick={() => setThemeName("lightTheme")}
        >
          Set Light Theme
        </Button>
        <Button
          variant="contained"
          color="secondary"
          onClick={() => setThemeName("darkTheme")}
        >
          Set Dark Theme
        </Button>
    </div>
  );
}

export default App;

base.ts

import { Theme } from "@material-ui/core";
import { lightTheme } from "./light";
import { darkTheme } from "./dark";

export function getThemeByName(theme: string): Theme {
  return themeMap[theme];
}

const themeMap: { [key: string]: Theme } = {
  lightTheme,
  darkTheme
};

dark.ts

import { createMuiTheme } from "@material-ui/core";

export const lightTheme = createMuiTheme({
  palette: {
    type: "dark",
    primary: {
      main: "#000"
    }
  }
});

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import ThemeProvider from './ThemeProvider';

ReactDOM.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>,
  document.getElementById("root")
);

light.ts

import { createMuiTheme } from '@material-ui/core';

export const lightTheme = createMuiTheme({
  palette: {
    type: 'light',
    primary: {
      main: '#4167B2'
    }
  }
});

ThemeProvider1.tsx

import React, { useState } from 'react';
import { MuiThemeProvider } from "@material-ui/core";
import { getThemeByName } from './themes/base';

const ThemeProvider: React.FC = (props) => {
    // State to hold the selected theme name
    const [themeName, _setThemeName] = useState('lightTheme');

    // Retrieve the theme object by theme name
    const theme = getThemeByName(themeName);

    return (
        <MuiThemeProvider theme={theme}>{props.children}</MuiThemeProvider>
    );
}

export default ThemeProvider;

ThemeProvider2.tsx

export const ThemeContext = React.createContext((themeName: string): void => {});

ThemeProvider3.tsx

return (
  <ThemeContext.Provider value={_setThemeName}>
    <MuiThemeProvider theme={theme}>{props.children}</MuiThemeProvider>
  </ThemeContext.Provider>
);

ThemeProvider4.tsx

// Read current theme from localStorage or maybe from an api
const curThemeName = localStorage.getItem("appTheme") || "lightTheme";

// State to hold the selected theme name
const [themeName, _setThemeName] = useState(curThemeName);

ThemeProvider5.tsx

// Wrap _setThemeName to store new theme names in localStorage
const setThemeName = (themeName: string): void => {
  localStorage.setItem("appTheme", themeName);
  _setThemeName(themeName);
}

return (
  <ThemeContext.Provider value={setThemeName}>
    <MuiThemeProvider theme={theme}>{props.children}</MuiThemeProvider>
  </ThemeContext.Provider>
);