Backgrounds

How to use ?

The styles generated by the backgrounds section of the theme configuration are designed to apply background colors to your components. To access these styles, you can use the following code:

const { backgrounds } = useTheme()

Generated backgrounds

Here is the representation of the generated styles for a given BackgroundConfig like the one below:

export const config = {
    //...
    backgrounds: {
        [colorName]: colorValue,
        //...
    },
    //...
}

The generated styles take the following form:

background name	Generated style
backgrounds.colorName	{ backgroundColor: colorValue }

These styles enable you to easily apply background colors to your components as needed.

Static backgrounds styles

Some background styles, don't require dynamic generation. To accommodate this, we offer the staticBackgroundStyles object that houses static styles for background. You can use this file as-is or customize it to your preferences. These styles will be seamlessly merged with the generated ones, making them accessible through the backgrounds object of the useTheme hook.

Playground

Here's a simple playground that provides a visual representation of the objects generated from a given backgrounds configuration:

export const config = { 
  //... 
  backgrounds: {
    : ,
    : ,
    // you can add more key/value here
  },
  //...
}

Generated classes

Property	Value
backgrounds.primary	{ backgroundColor: #ff0000 }
backgrounds.secondary	{ backgroundColor: #00ff00 }