frontend client for gemstone. decentralised workplace app
feat: better palette hook
+21
+21
src/providers/ThemeProvider.tsx
+21
src/providers/ThemeProvider.tsx
···
1
+
import { useFacet } from "@/lib/facet";
2
+
import type { Facet } from "@/lib/facet/src/facet";
3
+
import type { FacetPalette } from "@/lib/facet/src/palette";
1
4
import type { Enumify } from "@/lib/utils/types";
2
5
import type { Dispatch, ReactNode, SetStateAction } from "react";
3
6
import { createContext, useContext, useState } from "react";
···
13
16
interface ThemeContextValue {
14
17
colorMode: ColorMode;
15
18
setColorMode: Dispatch<SetStateAction<ColorMode>>;
19
+
currentPalette: FacetPalette;
16
20
}
17
21
18
22
const ThemeContext = createContext<ThemeContextValue | null>(null);
···
36
40
return setColorMode;
37
41
};
38
42
43
+
export const useCurrentPalette = () => {
44
+
const { currentPalette } = useThemeProvider();
45
+
return currentPalette;
46
+
};
47
+
39
48
export const ThemeProvider = ({ children }: { children: ReactNode }) => {
40
49
const [colorMode, setColorMode] = useState<ColorMode>(ColorMode.DARK);
50
+
const facet = useFacet();
51
+
const currentPalette =
52
+
colorMode === "dark"
53
+
? facet.variants.obsidian
54
+
: // TODO: temporary. will remove the null coalesce when pearl is defined.
55
+
(facet.variants.pearl ?? facet.variants.obsidian);
56
+
57
+
// TODO: remove nullability with obsidian and pearl palettes.
58
+
// instead, these are provided as defaults and if we add more themes
59
+
// in the future, they can just be tacked on.
60
+
if (!currentPalette) throw new Error("Don't use light mode for now.");
41
61
42
62
const value: ThemeContextValue = {
43
63
colorMode,
44
64
setColorMode,
65
+
currentPalette,
45
66
};
46
67
return <ThemeContext value={value}>{children}</ThemeContext>;
47
68
};