[ThemeProvider] - A FluentUI React theme context provider.

ThemeProvider.tsx

import { AzureCustomizationsLight, AzureCustomizationsDark } from "@uifabric/azure-themes";
import { ThemeProvider as FluentThemeProvider } from "@fluentui/react-theme-provider";
import React, { createContext, PropsWithChildren, useContext, useState } from "react";

import { useLocalStorage } from "../hooks/useLocalStorage";

interface IThemeContext
{
  themeName: string;
  toggleTheme(): void;
}

enum themes
{
  light = "light",
  dark = "dark"
};

const NullThemeContext: IThemeContext =
{
  themeName: themes.light,
  toggleTheme: () => { throw new Error(nameof(NullThemeContext)); }
};

const ThemeContext = createContext<IThemeContext>(NullThemeContext);

export function ThemeProvider<T>({ children }: PropsWithChildren<T>)
{
  const [themeName, setThemeName] = useLocalStorage("theme", themes.light);
  const [theme, setTheme] = useState(getTheme(themeName));

  function getTheme(name: string)
  {
    const customization = name === themes.light ? AzureCustomizationsLight : AzureCustomizationsDark;
    return customization.settings.theme;
  }

  function toggleTheme()
  {
    const name = themeName === themes.light ? themes.dark : themes.light;

    setThemeName(name);
    setTheme(getTheme(name));
  }

  return (
    <ThemeContext.Provider value={{ themeName, toggleTheme }}>
      <FluentThemeProvider theme={theme}>
        {children}
      </FluentThemeProvider>
    </ThemeContext.Provider>
  );
}

export function useTheme()
{
  return useContext(ThemeContext);
}