search

davidhu2000 / react-spinners

A collection of loading spinner components for react
https://www.davidhu.io/react-spinners
MIT License
3k stars 260 forks source link

Is It Possible To add a variable CSS Color as Color? #572

Open ljs19923 opened 9 months ago

ljs19923 commented 9 months ago

Hi, I would like to know if it's possible to do this? and if not, how

<BarLoader width={"70%"} height={2} color={"var(--textColor)"} />

I would like to be able to change the color of my loaders from a Css var. If for example I have a dark/white theme, controlled by a css variable, I would like to be able to edit my bar loader directly when the css variable change.

This code works a little bit but the background behind the bar loader disappear :/ the color bar change well

Result:

Screen Shot 2023-09-09 at 14 21 34

What I would like to have:

Screen Shot 2023-09-09 at 14 21 23

Thanks a lot

davidhu2000 commented 9 months ago

https://github.com/davidhu2000/react-spinners/blob/fd4a93c6d8ef999871f46e927edd3dc54cae0ce1/src/BarLoader.tsx#L45

i'm not sure, I will need to see if this is possible. Currently it is just passed as a string

standbyoneself commented 1 month ago

Any news on this? I also need to have ability to apply color as CSS Custom Property

Mukhammadali commented 1 month ago

I can confirm that works. Just pass your css variable color like this

<SyncLoader color="var(--theme-primary-color)" />