Themes

Overview

Themes work like design systems. They give you a place to store and access common style values, allowing you to create a more consistent and coherent visual experience.

Chances are, if you're using a CSS-in-JS library, it's going to supply you with a ThemeProvider component. This can be used to share a custom theme with the rest of your application through React's Context API.

Adding a custom theme

To get started, create a theme.ts/.js file that exports a theme object.

/* theme.ts */

export const theme = {}

From within the theme object, create a colors scale and add your color variables to it (or use the values below).

/* theme.ts */

export const theme = {
  colors: {
    red: '#F2335D',
    orange: '#FE8400',
    yellow: '#FFCC00',
    green: '#7CD420',
    blue: '#12A5EC',
    purple: '#7753F8'
  }
}

Then, in the root of your project, wrap your entire application with the ThemeProvider and pass it your custom theme.

/* App.ts */
import { ThemeProvider } from 'styled-components'
import { theme } from '../theme.ts'

const App: React.FC = props => (
    <ThemeProvider theme={theme}>
      {/* application content */}
    </ThemeProvider>
  )

export default App

Now, any prop that uses the colors scale will have access to your custom color values.

/* `theme.colors.red` */
<Component color='red' />


/* `theme.colors.green` */
<Component bgColor='green' />


/* Using responsive styles */
<Component color={['blue', 'orange', 'yellow']} />

<Component bgColor={{_: 'purple', sm: 'green', lg: 'blue'}} />

With your theme set up, you can now expand it to fit your needs. Head to the theme config page for details on taking your theme to the next level.