Text Color

Utilities for controlling the text color of an element.

Usage

Control the text color of an element using the color={color} utilities.

<x.div color="red-500">Computers have ...</x.div>
<x.div color="emerald-700">Computers have ...</x.div>
<x.div color="light-blue-700-a50">Computers have ...</x.div>
<x.div color="#f59e0b">Computers have ...</x.div>
<x.div color="rgba(4, 120, 87, 0.5)">Computers have ...</x.div>

Hover

To control the text color of an element on hover, use hoverColor={color} utility.

<x.div color="red-400" hoverColor="red-800">
  Computers have lots of memory but no imagination.
</x.div>

Focus

To control the text color of an element on hover, use focusColor={color} utility.

<x.input defaultValue="Something" color="red-600" focusColor="red-800" />

Placeholder

To control the placeholder color of an element, use placeholderColor={color} utility.

<x.input
  placeholder="Type something..."
  color="red-600"
  placeholderColor="red-300"
/>

Responsive

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

<x.div color={{ md: 'red-600' }}>{/* ... */}</x.div>

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'),
    }),
  }