Allow *Color to accept css variables, not only hex-colors

[dmytro-lymarenko]

Allow offColor, onColor, offHandleColor and onHandleColor to accept css variables, not only hex-colors.

In our project we use css vars to handle themes and we use them to customize components. But react-switch component doesn't allow to do this.

I would like to use switch component like this:

<Switch
    checked={value}
    onChange={onChange}
    onColor="var(--switch-on-color)"
    offColor="var(--switch-off-color)"
/>

[DiegoDevBittencourt]

Same here, I only use variable to customize my components color, I would really like this feature.

[MrWillian]

UP! I would also like this feature.

[sec0ndhand]

As long as your variable is a hex value, you can pull the value from JS.

        window
        .getComputedStyle(document.documentElement)
        .getPropertyValue('--switch-on-color')
        .trim()

[markusenglund]

As @sec0ndhand mentioned you could extract the hex values from the CSS variables and then input them as props.

The question is whether this should be done inside the library for convenience sake and I'm leaning towards no. A couple of problems come to mind:

• The library user might not have put their CSS variables on :root, in which case @sec0ndhand's snippet will fail.
• The CSS variables might not be available when the component is first rendered which could be very difficult for the library user to debug.