React-rainbow components color theme

Question

I have an app that I started developing recently and I'm considering moving over to react-rainbow. Is there a way to set a color theme for all react-rainbow components?

Answer 1

Customization is allowed by using the <Application /> component as a wrapper of your entire application, the component property theme will accept an object where you can specify your palette of colors.

const theme = {
    rainbow: {
        palette: {
            brand: '#5c56b6',
        },
    },
};

<Application theme={theme}>
    <Button
        label="Button Brand"
        onClick={() => alert('clicked!')}
        variant="brand"
    />
    ...
</Application>

You can find more documentation here https://react-rainbow.io/#/Customization

Answer 2

First, you have to create an object with the customizations you want to add, then you import Application from react-rainbow-components and wrap your components with Application. Finally, you pass your customizations object as the prop theme to Application. This is an example.

import React from 'react';
import { Application, Button } from 'react-rainbow-components';

const theme = {
    rainbow: {
        palette: {
            brand: '#5c56b6',
        },
    },
};

<Application theme={theme} className="rainbow-p-vertical_xx-large rainbow-align-content_center">
    <Button
        label="Button Brand"
        onClick={() => alert('clicked!')}
        variant="brand"
    />
</Application>