Is that possible to change the Arwes animate color by theme.js?

[ReactGirl]

I noticed you can for example change the primary color passing the theme object:

const myTheme = {
  animTime: 250,
    color: {
      primary: {
        base: '#be26fc',
        dark: '#8e1bbd',
        light: '#c95bf6'
    },
}

Is that possible to change the color for the animation provided by animate props of the Arwes container (the raising balls)? I noticed it get the primary base color, so if I changed it to a dark color, it will also affect the other areas.

Im wondering if there is something like:

const myTheme = {
    animated: {
    color: 'green'
   }
}

[romelperez]

Hi @ReactGirl !

You can change the color theme as you commented.

The raising balls are defined by the Puff component and it styles the balls like this:

...
puff: {
  ...
  width: 1,
  height: 1,
  backgroundColor: rgba(theme.color.primary.base, theme.alpha / 1.5),
  boxShadow: `0 0 ${shadow1}px ${shadow1}px ` + rgba(theme.color.primary.base, theme.alpha / 1.5),
  ...
},
...

Check the source code here: https://github.com/arwesjs/arwes/blob/version1-breakpoint1/src/Puffs/styles.js#L24

It uses this function to change the color alpha, from the polished library. Check it out here: https://polished.js.org/docs/#rgba

So the color depends on two things:

• theme.color.primary.base color setting
• theme.alpha color alpha setting

But if you change them, you are going to affect the whole application look.

Currently, there is not a "proper" way to set up a custom color for the balls.