react-switch icon indicating copy to clipboard operation
react-switch copied to clipboard

Can one set custom background transition?

Open sunknudsen opened this issue 3 years ago • 3 comments

Trying to time switch toggle with dark mode transition… thanks so much for component!

sunknudsen avatar May 27 '22 19:05 sunknudsen

Hi, if I understand you correctly you want the color transition of the switch to have the same duration as the dark mode transition? I don't think it's a good idea to mess with since the transition property is already set to match the speed of the toggling. From the source code:

transition: $isDragging ? null : "background 0.25s"

markusenglund avatar Jun 09 '22 12:06 markusenglund

Hey @markusenglund,

If you go to https://sunknudsen.com/privacy-guides and click account icon (bottom right), you can switch between light and dark modes (used react-switch, thanks!).

I wanted switch transition from light to dark mode (hardcoded to 0.25s in react-switch) to match transitions of website (which, at the time, were set to 0.3s… ended up using same delay as react-switch given delay cannot be changed using props).

Would be nice if transition delay, timing function, etc… could be user-configurable using props.

Thanks again for component!

sunknudsen avatar Jun 09 '22 12:06 sunknudsen

Got it. That could absolutely be implemented as a prop, but maybe it's a bit too rare of a use-case to be added to the API, I'm not sure.

markusenglund avatar Jun 09 '22 12:06 markusenglund