import * as React from "react" ; import { useColorMode , useColorModeValue , IconButton , IconButtonProps , } from "@chakra-ui/react" ; import { IoMdMoon , IoMdSunny } from "react-icons/io" ; type ColorModeSwitcherProps = Omit < IconButtonProps , "aria-label" > ; export const ColorModeSwitcher = ( props ) => { const { toggleColorMode } = useColorMode ( ) ; const text = useColorModeValue ( "dark" , "light" ) ; const SwitchIcon = useColorModeValue ( IoMdMoon , IoMdSunny ) ; return ( < IconButton size = "md" fontSize = "lg" variant = "ghost" color = "current" marginLeft = "2" onClick = { toggleColorMode } icon = { < SwitchIcon / > } aria - label = { `Switch to ${ text } mode` } { ... props } />); } ;