import { useTheme as useNextTheme } from 'next-themes' ; import { createContext , useContext , useState , useEffect } from 'react' ; import { Component } from '~/types' ; export interface ThemeContextValue { isDark : boolean ; themeReady : boolean ; toggleTheme ? : ( ) => void ; } const defaultContextState = { isDark : false , themeReady : false , } ; const ThemeContext = createContext < ThemeContextValue > ( defaultContextState ) ; export const ThemeProvider = ( props ) => { const { theme , resolvedTheme , setTheme } = useNextTheme ( ) ; const [ mounted , setMounted ] = useState ( false ) ; useEffect ( ( ) => setMounted ( true ) , [ ] ) ; const { children } = props ; const themeContextValue = { themeReady : mounted , isDark : ( resolvedTheme || theme ) === 'dark' , toggleTheme : ( ) => { setTheme ( resolvedTheme === 'dark' ? 'light' : 'dark' ) ; } , } ; return ( < ThemeContext . Provider value = { themeContextValue } > { children } < /ThemeContext.Provider>); } ; export const useTheme = ( ) : ThemeContextValue => { return useContext ( ThemeContext ) || defaultContextState ; } ;