Variable ThemeProvider`Const`

ThemeProvider: FC<ThemeProviderProps> = ...

Wraps the app in MUI's ThemeProvider plus a local ThemeContext, and keeps the root <html> font-size in sync with userSettings.fontSize (small = 14px, medium = 16px, large = 18px). Because every styled component in the project uses rem, changing the root size rescales the whole UI proportionally.

Param: props

Component props.

Param: props.children

App tree to render under the theme.

Returns

The children wrapped in ThemeContext.Provider and MUI's theme.

Example

<AppContext.Provider value={appValue}>
  <ThemeProvider>
    <App />
  </ThemeProvider>
</AppContext.Provider>
// Mounting with userSettings.fontSize === "large" sets
// <html style="font-size: 18px"> and picks the light/dark theme based on
// userSettings.theme.

Source

export const ThemeProvider: FC<ThemeProviderProps> = ({ children }) => {
  const { userSettings, setUserSettings } = useAppContext();

  useEffect(() => {
    const size = userSettings.fontSize;
    document.documentElement.style.fontSize =
      (size !== undefined && FONT_SIZE_PX[size]) || FONT_SIZE_PX.medium;
  }, [userSettings.fontSize]);

  const mode: ThemeMode = userSettings.theme === "dark" ? "dark" : "light";

  const toggleTheme = () => {
    setUserSettings({ ...userSettings, theme: mode === "light" ? "dark" : "light" });
  };

  const currentTheme = mode === "light" ? lightTheme : darkTheme;
  const currentPalette = mode === "light" ? lightPalette : darkPalette;

  const themeContextValue: ThemeContextType = {
    mode,
    toggleTheme,
    currentTheme,
    currentPalette,
  };

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