themeContext.tsx69 lines · main

1	'use client'
2
3	import React, { createContext, useLayoutEffect, useMemo } from 'react'
4
5	import { mergeDeep } from './../../lib/utils'
6	import defaultTheme from './defaultTheme'
7
8	// import useDarkMode from './utils/useDarkMode'
9
10	interface ThemeContextInterface {
11	theme?: any
12	// mode?: 'light' | 'dark'
13	// toggleMode?: any
14	}
15
16	export const ThemeContext = createContext<ThemeContextInterface>({
17	theme: defaultTheme,
18	// mode: 'light',
19	// toggleMode: true,
20	})
21
22	interface Props extends React.HTMLAttributes<HTMLDivElement> {
23	children: React.ReactNode
24	/**
25	* Defines the styles used throughout the library
26	*/
27	theme?: object
28	/**
29	* Defines dark mode as the default theme
30	*/
31	// dark?: boolean
32	/**
33	* Allows the change of theme, reading user's preferences and saving them
34	*/
35	// usePreferences?: boolean
36	}
37
38	const themeWrapper: React.FC<Props> = ({
39	children,
40	theme: customTheme,
41	// dark,
42	// usePreferences = false,
43	}) => {
44	const mergedTheme = mergeDeep(defaultTheme, customTheme)
45	// const [mode, setMode, toggleMode] = useDarkMode(usePreferences)
46
47	// useLayoutEffect(() => {
48	// if (dark) {
49	// if (setMode != null) {
50	// setMode('dark')
51	// }
52	// document.documentElement.classList.add(`dark`)
53	// }
54	// }, [dark])
55
56	const value = useMemo(
57	() => ({
58	theme: mergedTheme,
59	// mode,
60	// toggleMode,
61	}),
62	[]
63	)
64
65	// console.log('defaultTheme', defaultTheme)
66	return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
67	}
68
69	export default themeWrapper