Can change theme

remote_frontend/src/hooks/providers/ThemeProvider.tsx

@@ -0,0 +1,55 @@
+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>("highcontrast");
+
+  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)!;
+}