Theming

With xstyled, we talk a lot about theming, but what is it? Theming is one of the core features of styled-components. It permits you to provide a theme object that is accessible by all of your styled components!

How does it work?

xstyled works without any theme, but using a theme really gives super powers! With xstyled, all css properties are directly bound to a theme value (see theme specification for more detail), so you can rely on the theme without thinking about it.

You can setup a custom theme using ThemeProvider from @xstyled/styled-components or from styled-components:

import React from 'react'
import { ThemeProvider } from '@xstyled/styled-components'
import App from './App'
const theme = {
colors: {
primary: '#bd4932',
},
}
const Root = () => (
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
)

By doing this, in all your components, you will be able to use primary as a color, the color will be replaced automatically by #bd4932.

import styled from '@xstyled/styled-components'
const Button = styled.button`
color: primary;
`

What are the theme keys?

All theme keys are described in theme specification.

Is there a default theme?

No there is no default theme, but if you don't provide one, xstyled will automatically provide default values for breakpoints, space and font-sizes:

const DEFAULT_BREAKPOINTS = {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
}
const DEFAULT_SPACE = [0, 4, 8, 16, 24, 48, 96, 144, 192, 240]
const DEFAULT_FONT_SIZES = [0, 12, 14, 16, 20, 24, 32, 48, 64, 72]

Concretely, it means that if you specify margin: 2 it will be transformed to margin: 8px without adding any theme.

If defaults don't fit your needs, just replace them in the theme.