text: import React from 'react';
  import { useColorMode, useColorModeValue, IconButton } from '@chakra-ui/react';
  import { FaMoon, FaSun } from 'react-icons/fa';
  import style from "./ColorModeSwitcher.module.css"
  export const ColorModeSwitcher = props => {
    const { toggleColorMode } = useColorMode();
    const text = useColorModeValue('dark', 'light');
    const SwitchIcon = useColorModeValue(FaMoon, FaSun);
  
    return (
      <div
        className={style.toggleColorButton}
      >
        <IconButton
          size="md"
          fontSize="lg"
          aria-label={`Switch to ${text} mode`}
          variant="ghost"
          color="current"
          marginLeft="2"
          onClick={toggleColorMode}
          icon={<SwitchIcon />}
          {...props}
        />
      </div>
    );
  };
  