import { ColorMode } from "@chakra-ui/react" ; export { useColorMode , useColorModeValue } from "@chakra-ui/react" ; export type { ColorMode } ; type Mode = ColorMode | "system" | undefined ; export function initializeColorMode ( initialValue ) { const mql = window . matchMedia ( "(prefers-color-scheme: dark)" ) ; const systemPreference = mql . matches ? "dark" : "light" ; let persistedPreference ; try { persistedPreference = localStorage . getItem ( "chakra-ui-color-mode" ) as Mode ; } catch ( error ) { console . log ( "Chakra UI: localStorage is not available. Color mode persistence might not work as expected" ) ; } const isInStorage = typeof persistedPreference === "string" ; let colorMode ; if ( isInStorage ) { colorMode = persistedPreference ; } else { colorMode = initialValue === "system" ? systemPreference : initialValue ; } if ( colorMode ) { const root = document . documentElement ; root . style . setProperty ( "--chakra-ui-color-mode" , colorMode ) ; } }