@chakra-xui/cra-template
Version:
The official Chakra+JavaScript template for Create React App
24 lines (21 loc) • 618 B
JavaScript
import React from 'react';
import { useColorMode, useColorModeValue, IconButton } from '@chakra-xui/react';
import { FaMoon, FaSun } from 'react-icons/fa';
export const ColorModeSwitcher = props => {
const { toggleColorMode } = useColorMode();
const text = useColorModeValue('dark', 'light');
const SwitchIcon = useColorModeValue(FaMoon, FaSun);
return (
<IconButton
size="md"
fontSize="lg"
aria-label={`Switch to ${text} mode`}
variant="ghost"
color="current"
marginLeft="2"
onClick={toggleColorMode}
icon={<SwitchIcon />}
{...props}
/>
);
};