explore/theme/components/Switch.ts

import { switchAnatomy as parts } from '@chakra-ui/anatomy';
import { defineStyle, createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';

const { defineMultiStyleConfig, definePartsStyle } =
  createMultiStyleConfigHelpers(parts.keys);

const baseStyleTrack = defineStyle((props) => {
  const { colorScheme: c } = props;

  return {
    _checked: {
      bg: mode(`${ c }.500`, `${ c }.300`)(props),
      _hover: {
        bg: mode(`${ c }.600`, `${ c }.400`)(props),
      },
    },
  };
});

const baseStyle = definePartsStyle((props) => ({
  track: baseStyleTrack(props),
}));

const Switch = defineMultiStyleConfig({
  baseStyle,
});

export default Switch;