Custom theming

Set up dark mode or multiple themes in minutes.

You can create additional themes that override your default tokens.

const { styled, css } = createStitches({
  theme: {
    colors: {
      hiContrast: 'hsl(206,10%,5%)',
      loContrast: 'white',

      gray100: 'hsl(206,22%,99%)',
      gray200: 'hsl(206,12%,97%)',
      gray300: 'hsl(206,11%,92%)',
      gray400: 'hsl(206,10%,84%)',
      gray500: 'hsl(206,10%,76%)',
      gray600: 'hsl(206,10%,44%)',
    },
  },
  space: {},
  fonts: {},
});

You can create new themes with the createTheme function.

const { createTheme } = createStitches({...});

const darkTheme = createTheme({
  colors: {
    hiContrast: 'hsl(206,2%,93%)',
    loContrast: 'hsl(206,8%,8%)',

    gray100: 'hsl(206,8%,12%)',
    gray200: 'hsl(206,7%,14%)',
    gray300: 'hsl(206,7%,15%)',
    gray400: 'hsl(206,7%,24%)',
    gray500: 'hsl(206,7%,30%)',
    gray600: 'hsl(206,5%,53%)',
  },
  space: {},
  fonts: {},
});

The darkTheme const represents a hashed class, which can be added at any point in your application.

You can define the theme class to be used by passing it as the first argument:

export const darkTheme = createTheme('dark-theme', {...});

<div className={darkTheme}>
  <Box>Content nested in dark theme.</Box>
</div>

The theme is an object containing useful token data.

For example, given the following default theme and dark themes:

const { theme, createTheme } = createStitches({
  theme: {
    colors: {
      primary: 'black',
    },
  },
});

const dark = createTheme({
  colors: {
    primary: 'white',
  },
});

You can use the returned theme objects to read the tokens, like so:

// default theme
theme.colors.primary; // var(--colors-primary)
theme.colors.primary.value; // black
theme.colors.primary.token; // primary
theme.colors.primary.scale; // colors
theme.colors.primary.variable; // --colors-primary
theme.colors.primary.computedValue; // var(--colors-primary)

// dark theme
dark.colors.primary; // var(--colors-primary)
dark.colors.primary.value; // white
dark.colors.primary.token; // primary
dark.colors.primary.scale; // colors
dark.colors.primary.variable; // --colors-primary
dark.colors.primary.computedValue; // var(--colors-primary)

You can add styles based on themes by retrieving the dynamically generated theme class.

import { createStitches } from '@stitches/react';

const { styled, createTheme } = createStitches({
  theme: {},
});

const myTheme = createTheme({});

const Button = styled('button', {
  borderRadius: '9999px',
  fontSize: '13px',
  border: '0',

  [`.${myTheme} &`]: {
    backgroundColor: '$blue',
  },
});

() => (
  <div className={myTheme}>
    <Button>Button</Button>
  </div>
);