Is that possible to change the Arwes animate color by theme.js? about arwes HOT 1 CLOSED

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.

from arwes.