frontPanel/src/ui_kit/CustomSwitch.tsx

import {Switch, SwitchProps} from "@mui/material";
import {styled} from "@mui/material/styles";

export default styled((props: SwitchProps) => (
        <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />))
(() => ({
        width: 52,
        height: 31,
        padding: 0,
        '& .MuiSwitch-switchBase': {
            padding: 0,
            margin: 2,
            transitionDuration: '300ms',
            '&.Mui-checked': {
                transform: 'translateX(21px)',
                color: '#fff',
                '& + .MuiSwitch-track': {
                    backgroundColor: '#7E2AEA',
                    opacity: 1,
                    border: 0,
                },
            },
            '&.Mui-disabled .MuiSwitch-thumb': {
                color: '#9A9AAF',
                boxShadow: 'none'
            },
        },
        '& .MuiSwitch-thumb': {
            boxSizing: 'border-box',
            width: 27,
            height: 27,
        },
        '& .MuiSwitch-track': {
            borderRadius: 40 / 2,
            backgroundColor: '#9A9AAF'
        },
    }));