Background Color

Utilities for controlling an element's background color.

Usage

Control the background color of an element using the bg={color} or backgroundColor={color} utilities.

<x.button bg="emerald-500">Button</x.button>

Changing opacity

Use color opacity variants to choose another opacity.

<x.div bg="purple-600-a100"></x.div>
<x.div bg="purple-600-a75"></x.div>
<x.div bg="purple-600-a50"></x.div>
<x.div bg="purple-600-a25"></x.div>
<x.div bg="purple-600-a0"></x.div>

Hover

Control the hover background color of an element using the bg={{ hover: color }} or backgroundColor={{ hover: color}} utilities.

<x.button bg={{ _: 'indigo-500', hover: 'indigo-800' }}>Button</x.button>

Responsive

To control the background color of an element at a specific breakpoint, use responsive object notation. For example, adding the property bg={{ md: "red-500" }} to an element would apply the bg="red-500" utility at medium screen sizes and above.

<x.button bg={{ md: 'red-500' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Customizing

Colors

If you'd like to customize your values for kind of colors, use the theme.colors section of your theme.

  // theme.js
  import { th, generateHexAlphaVariants } from '@xstyled/styled-components'

  export const theme = {
    colors: generateHexAlphaVariants({
      // ...
+     'deep-blue': '#00008b',
+     'primary': th.color('red-600'),
    }),
  }