41 lines
849 B
TypeScript
41 lines
849 B
TypeScript
import { useStoreState } from '@/state'
|
|
import {
|
|
createEmotionCache,
|
|
MantineProvider,
|
|
useMantineColorScheme,
|
|
} from '@mantine/core'
|
|
import { ReactNode, useEffect } from 'react'
|
|
|
|
const emotionCache = createEmotionCache({
|
|
key: 'mantine',
|
|
prepend: false,
|
|
})
|
|
|
|
interface Props {
|
|
children: ReactNode
|
|
}
|
|
|
|
const ThemeProvider = ({ children }: Props) => {
|
|
const theme = useStoreState((state) => state.settings.data?.theme)
|
|
|
|
useEffect(() => {
|
|
if (theme === 'dark') {
|
|
document.documentElement.classList.add('dark')
|
|
} else {
|
|
document.documentElement.classList.remove('dark')
|
|
}
|
|
}, [theme])
|
|
|
|
return (
|
|
<MantineProvider
|
|
emotionCache={emotionCache}
|
|
theme={{
|
|
colorScheme: theme === 'dark' ? 'dark' : 'light',
|
|
}}
|
|
>
|
|
{children}
|
|
</MantineProvider>
|
|
)
|
|
}
|
|
|
|
export default ThemeProvider
|