Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 4x 4x 4x 4x 3x 1x 4x 4x 4x 2x 2x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x | import { useCallback } from 'react';
import { c } from '../../helpers';
import Switcher from '../Form/Switcher/Switcher';
import { IconDark, IconLight } from '../Icons';
import { ColorSchemeSwitcherProps } from './ColorScheme';
import { COLOR_SCHEMES } from './colorSchemeConstants';
import useColorScheme from './useColorScheme';
export default function ColorSchemeSwitcher({
className,
}: ColorSchemeSwitcherProps): JSX.Element {
const [colorSchema, setColorScheme] = useColorScheme();
const oppositeColorSchema =
colorSchema === COLOR_SCHEMES.LIGHT
? COLOR_SCHEMES.DARK
: COLOR_SCHEMES.LIGHT;
const handleToggleColorSchema = useCallback(
(switchOn: boolean): void => {
setColorScheme(switchOn ? COLOR_SCHEMES.DARK : COLOR_SCHEMES.LIGHT);
},
[setColorScheme]
);
const title = `Switch to ${oppositeColorSchema} mode`;
const switchOn = colorSchema === COLOR_SCHEMES.DARK;
return (
<Switcher
className={c(className)}
title={title}
labelLeft="color scheme"
IconOff={IconLight}
IconOn={IconDark}
value={switchOn}
onChange={handleToggleColorSchema}
/>
);
}
|