56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
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)!;
|
|
}
|