How can I apply gradient color for both light and dark mode?

[h0lme3]

Hi everyone,

I would love to apply gradient color for light and dark mode respectively. But I dont know how to do.

Here is my code snippet.

<Marquee
      autoFill
      pauseOnHover
      gradient={true}
      gradientColor={[0, 0, 0]}
      gradientWidth={80}
      speed={30}
>
// images
</Marquee>

Here is screenshot for dark mode. :)

Here is screenshot for light mode. :(

Please givmme good idea and suggestion. Thanks in advance!

[mh-jsx]

It depends on how you handle your theme, are you using some kinda context for switching themes. You can dynamically change the gradient color value "conditionally"

const {theme} = useThemeContext()

<Marquee autoFill pauseOnHover gradient={true} gradientColor={theme === "light" ? [0, 0, 0] : [255, 255, 255]} gradientWidth={80} speed={30}

Can you tell how you handle your theme.

[h0lme3]

Yes, you're right. I already handled it like your way lol. I think I can close this issue as completed. Thanks for your reply @mh-jsx !

[junwen-k]

It seems like setting just using mask css property will make it work across both dark / light theme based on this Codepen by Kevin Powell.

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

I am using Tailwind CSS and I am able to implement the gradient using this class name.

className="[mask:linear-gradient(90deg,_transparent,_white_20%,_white_80%,_transparent)]"

@justin-chu Do you want to consider implementing the gradient with this approach so that we don't have to explicitly set the gradient color? :)