reactjsreact-rainbow-components

React-rainbow components color theme


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?


Solution

  • 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>