feishin/src/renderer/components/switch/index.tsx

import type { SwitchProps as MantineSwitchProps } from '@mantine/core';

import { Switch as MantineSwitch } from '@mantine/core';
import styled from 'styled-components';

type SwitchProps = MantineSwitchProps;

const StyledSwitch = styled(MantineSwitch)`
    display: flex;

    & .mantine-Switch-track {
        background-color: var(--switch-track-bg);
        border: none;
    }

    & .mantine-Switch-input {
        &:checked + .mantine-Switch-track {
            background-color: var(--switch-track-enabled-bg);
        }
    }

    & .mantine-Switch-thumb {
        background-color: var(--switch-thumb-bg);
    }
`;

export const Switch = ({ ...props }: SwitchProps) => {
    return <StyledSwitch {...props} />;
};