frontend client for gemstone. decentralised workplace app
feat: theme provider with facet library
+59
-5
+47
src/providers/ThemeProvider.tsx
+47
src/providers/ThemeProvider.tsx
···
1
+
import type { Enumify } from "@/lib/utils/types";
2
+
import type { Dispatch, ReactNode, SetStateAction } from "react";
3
+
import { createContext, useContext, useState } from "react";
4
+
5
+
export const ColorMode = {
6
+
DARK: "dark",
7
+
LIGHT: "light",
8
+
} as const;
9
+
10
+
// eslint-disable-next-line @typescript-eslint/no-redeclare -- intentional. lets us have enum-like objects without some of the weirdness
11
+
export type ColorMode = Enumify<typeof ColorMode>;
12
+
13
+
interface ThemeContextValue {
14
+
colorMode: ColorMode;
15
+
setColorMode: Dispatch<SetStateAction<ColorMode>>;
16
+
}
17
+
18
+
const ThemeContext = createContext<ThemeContextValue | null>(null);
19
+
20
+
const useThemeProvider = () => {
21
+
const value = useContext(ThemeContext);
22
+
if (!value)
23
+
throw new Error(
24
+
"Theme provider failed to initialise. Did you access this out of tree somehow? Tried to access theme values before it was initialised.",
25
+
);
26
+
return value;
27
+
};
28
+
29
+
export const useColorMode = () => {
30
+
const { colorMode } = useThemeProvider();
31
+
return colorMode;
32
+
};
33
+
34
+
export const useSetColorMode = () => {
35
+
const { setColorMode } = useThemeProvider();
36
+
return setColorMode;
37
+
};
38
+
39
+
export const ThemeProvider = ({ children }: { children: ReactNode }) => {
40
+
const [colorMode, setColorMode] = useState<ColorMode>(ColorMode.DARK);
41
+
42
+
const value: ThemeContextValue = {
43
+
colorMode,
44
+
setColorMode,
45
+
};
46
+
return <ThemeContext value={value}>{children}</ThemeContext>;
47
+
};
+12
-5
src/providers/index.tsx
+12
-5
src/providers/index.tsx
···
1
+
import { FacetProvider, generateFacet } from "@/lib/facet";
1
2
import { DebugProvider } from "@/providers/DebugProvider";
2
3
import { OAuthProvider } from "@/providers/OAuthProvider";
4
+
import { ThemeProvider } from "@/providers/ThemeProvider";
3
5
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
4
6
import type { ReactNode } from "react";
5
7
8
+
const facet = generateFacet();
6
9
const queryClient = new QueryClient();
7
10
8
11
export const RootProviders = ({ children }: { children: ReactNode }) => {
9
12
return (
10
-
<DebugProvider>
11
-
<QueryClientProvider client={queryClient}>
12
-
<OAuthProvider>{children}</OAuthProvider>
13
-
</QueryClientProvider>
14
-
</DebugProvider>
13
+
<FacetProvider facet={facet}>
14
+
<ThemeProvider>
15
+
<DebugProvider>
16
+
<QueryClientProvider client={queryClient}>
17
+
<OAuthProvider>{children}</OAuthProvider>
18
+
</QueryClientProvider>
19
+
</DebugProvider>
20
+
</ThemeProvider>
21
+
</FacetProvider>
15
22
);
16
23
};