import React , { createContext , useContext , useMemo } from "react" ; import { ThemeProvider } from "styled-components" ; import useDarkMode from "use-dark-mode" ; import { lightTheme , darkTheme } from "src/theme" ; export type ThemeMode = "light" | "dark" ; export interface ISiteThemeState { curMode : ThemeMode ; toggleDarkMode : ( ) => void ; } const DEFAULT_STATE = { curMode : "light" , toggleDarkMode : ( ) => { } , } ; export const SiteThemeContext = createContext ( DEFAULT_STATE ) ; export const SiteThemeContextProvider = ( { children , ... rest } ) => { const { value : isDarkMode , toggle : toggleDarkMode } = useDarkMode ( ) ; const curMode = useMemo < ThemeMode > ( ( ) => ( isDarkMode ? "dark" : "light" ) , [ isDarkMode ] ) ; const stateValue = { curMode , toggleDarkMode , } ; const themeValue = curMode === "light" ? lightTheme : darkTheme ; return ( < SiteThemeContext . Provider value = { stateValue } { ... rest } > < ThemeProvider theme = { themeValue } > { children } < /ThemeProvider> < /SiteThemeContext.Provider>); } ; export const useSiteThemeContext = ( ) => useContext ( SiteThemeContext ) ;