Switch custom style

[grizzled pewter]

Hi , I'm trying to make the switcher take a custom color when it becomes checked but my style is not applied , how can I do it ?

[jade wyvern]

You can use color prop

<Switch 
  color={checked ? 'red' : 'green'}
/>

[grizzled pewter]

color prop takes only MantineColor , i want to use a custom color

[jade wyvern]

Ok, you need to style track element not input

[grizzled pewter]

kindly see my code I already use track and it change the switch color when it is unchecked only

@peak coral can u help please ?

[peak coral]

Use Styles API, explore component source code to find selectors that you need to use

[grizzled pewter]

I use Styles API and the selector that I need is Track but it takes the custom color only it is unchecked only when it becomes checked it takes mantine blue color

[jade wyvern]

https://codesandbox.io/s/kind-heisenberg-xgxzwx?file=/src/App.tsx

[grizzled pewter]

this helps me , may it help other with same issue : https://mantine.dev/theming/colors/