Grommet UI — Custom Color Schemes

Question

I\'m using grommet-ui with webpack and react. How do I set my own color options.

Is there a way to use my own custom colors/color schemes in place of predefined colo

Answer 1

Yes, there is a way to override them, but it is currently not documented. I would start checking the colors here:

https://github.com/grommet/grommet/blob/master/src/scss/grommet-core/_settings.color.scss

For example, neutral-1 is used from this array

$brand-neutral-colors: (#5d0cfb, #7026ff, #767676) !default;

In your index.scss you can replace that (!default allows replacement):

$brand-neutral-colors: (#333333, #7026ff, #767676)

We are working on adding documentation for custom theme variables.