1
 2import { IconButton, chakra, useColorMode } from '@chakra-ui/react';
 3import { MoonIcon, SunIcon } from '@heroicons/react/24/outline';
 4import { updateThemeColor } from 'utils/themeColor';
 5
 6const iconProps = {
 7  baseStyle: {
 8    w: 4,
 9    h: 4,
10  },
11};
12
13const DarkThemeIcon = chakra(MoonIcon, iconProps);
14const LightThemeIcon = chakra(SunIcon, iconProps);
15
16export const ThemeToggle = () => {
17  const { colorMode, toggleColorMode } = useColorMode();
18  return (
19    <IconButton
20      size="sm"
21      variant="solid"
22      colorScheme="gray"
23      aria-label="switch theme"
24      onClick={() => {
25        updateThemeColor(colorMode == 'dark' ? 'light' : 'dark');
26        toggleColorMode();
27      }}
28    >
29      {colorMode === 'light' ? <DarkThemeIcon /> : <LightThemeIcon />}
30    </IconButton>
31  );
32};