Colors

List of color tokens available for customization.

Modify colors

If you want to customize the colors of the theme, you have to override the color tokens use in the theme system. To do that, you can use the theme.colors tailwind configuration file.

module.exports = {
    ...,
    content: [
        "./node_modules/@andore-ui/**/*.{js,ts,jsx,tsx}",
    ],
    plugins: [
        require('@andore-ui/theme')({
            theme: {
                colors: {
                    primary: {
                        DEFAULT: '#65558F',
                    }
                }
            }
        }),
    ],
};

How does it work?

The theme system uses the color tokens to apply the colors to the components. When you override a color token, the theme system will apply the new color to the components that use that token.

For example, let's take this component and modify color:

Color tokens

The following table lists all the color tokens available in the theme system.