VirtWebRemote/remote_frontend/src/hooks/providers/ThemeProvider.tsx

import {
  FluentProvider,
  teamsDarkTheme,
  teamsHighContrastTheme,
  teamsLightTheme,
  webDarkTheme,
  webLightTheme,
} from "@fluentui/react-components";
import React from "react";

export type Theme =
  | "highcontrast"
  | "teamsdark"
  | "teamslight"
  | "webdark"
  | "weblight";

type ThemeContext = { theme: Theme; set: (theme: Theme) => void };

const ThemeContextK = React.createContext<ThemeContext | null>(null);

export function ThemeProvider(p: React.PropsWithChildren): React.ReactElement {
  const [theme, setTheme] = React.useState<Theme>("teamsdark");

  let fluentTheme = teamsHighContrastTheme;
  switch (theme) {
    case "teamsdark":
      fluentTheme = teamsDarkTheme;
      break;
    case "teamslight":
      fluentTheme = teamsLightTheme;
      break;
    case "highcontrast":
      fluentTheme = teamsHighContrastTheme;
      break;
    case "webdark":
      fluentTheme = webDarkTheme;
      break;
    case "weblight":
      fluentTheme = webLightTheme;
      break;
  }

  return (
    <ThemeContextK.Provider value={{ theme: theme, set: setTheme }}>
      <FluentProvider theme={fluentTheme} style={{ display: "flex", flex: 1 }}>
        {p.children}
      </FluentProvider>
    </ThemeContextK.Provider>
  );
}

export function useTheme(): ThemeContext {
  return React.useContext(ThemeContextK)!;
}