···

       
1
       
1
       
+
       
import { useFacet } from "@/lib/facet";

     

       
2
       
2
       
+
       
import type { Facet } from "@/lib/facet/src/facet";

     

       
3
       
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
       
19
       
+
       
    currentPalette: FacetPalette;

     

       
16
       
20
       
 
       
}

     

       
17
       
21
       
 
       


     

       
18
       
22
       
 
       
const ThemeContext = createContext<ThemeContextValue | null>(null);

     
···

       
36
       
40
       
 
       
    return setColorMode;

     

       
37
       
41
       
 
       
};

     

       
38
       
42
       
 
       


     

       
43
       
43
       
+
       
export const useCurrentPalette = () => {

     

       
44
       
44
       
+
       
    const { currentPalette } = useThemeProvider();

     

       
45
       
45
       
+
       
    return currentPalette;

     

       
46
       
46
       
+
       
};

     

       
47
       
47
       
+
       


     

       
39
       
48
       
 
       
export const ThemeProvider = ({ children }: { children: ReactNode }) => {

     

       
40
       
49
       
 
       
    const [colorMode, setColorMode] = useState<ColorMode>(ColorMode.DARK);

     

       
50
       
50
       
+
       
    const facet = useFacet();

     

       
51
       
51
       
+
       
    const currentPalette =

     

       
52
       
52
       
+
       
        colorMode === "dark"

     

       
53
       
53
       
+
       
            ? facet.variants.obsidian

     

       
54
       
54
       
+
       
            : // TODO: temporary. will remove the null coalesce when pearl is defined.

     

       
55
       
55
       
+
       
              (facet.variants.pearl ?? facet.variants.obsidian);

     

       
56
       
56
       
+
       


     

       
57
       
57
       
+
       
    // TODO: remove nullability with obsidian and pearl palettes.

     

       
58
       
58
       
+
       
    // instead, these are provided as defaults and if we add more themes

     

       
59
       
59
       
+
       
    // in the future, they can just be tacked on.

     

       
60
       
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
       
65
       
+
       
        currentPalette,

     

       
45
       
66
       
 
       
    };

     

       
46
       
67
       
 
       
    return <ThemeContext value={value}>{children}</ThemeContext>;

     

       
47
       
68
       
 
       
};