createTheme

Creates a locally scoped theme class and a theme contract which can be consumed within your styles.

🎨 New to theming in vanilla-extract? Make sure you’ve read the theming overview first.

theme.css.ts

import { createTheme, style } from '@vanilla-extract/css';

export const [themeClass, vars] = createTheme({
  color: {
    brand: 'blue'
  },
  font: {
    body: 'arial'
  }
});

export const brandText = style({
  color: vars.color.brand,
  fontFamily: vars.font.body
});

CSS

.theme_themeClass__z05zdf0 {
  --color-brand__z05zdf1: blue;
  --font-body__z05zdf2: arial;
}
.theme_brandText__z05zdf3 {
  color: var(--color-brand__z05zdf1);
  font-family: var(--font-body__z05zdf2);
}

Creating theme variants

Theme variants can be created by passing a theme contract as the first argument to createTheme.

All theme values must be provided or it’s a type error.

themes.css.ts

import { createTheme, style } from '@vanilla-extract/css';

export const [themeA, vars] = createTheme({
  color: {
    brand: 'blue'
  },
  font: {
    body: 'arial'
  }
});

export const themeB = createTheme(vars, {
  color: {
    brand: 'pink'
  },
  font: {
    body: 'comic sans ms'
  }
});

export const brandText = style({
  color: vars.color.brand,
  fontFamily: vars.font.body
});

CSS

.themes_themeA__1k6oxph0 {
  --color-brand__1k6oxph1: blue;
  --font-body__1k6oxph2: arial;
}
.themes_themeB__1k6oxph3 {
  --color-brand__1k6oxph1: pink;
  --font-body__1k6oxph2: comic sans ms;
}
.themes_brandText__1k6oxph4 {
  color: var(--color-brand__1k6oxph1);
  font-family: var(--font-body__1k6oxph2);
}

@layer

Themes can be assigned to a layer by name using the @layer key at the top-level of the theme definition.

🚧 Ensure your target browsers support layers. Vanilla Extract supports the layers syntax but does not polyfill the feature in unsupported browsers.

themes.css.ts

import { createTheme, layer } from '@vanilla-extract/css';

export const themeLayer = layer();

export const [themeA, vars] = createTheme({
  '@layer': themeLayer,
  color: {
    brand: 'blue'
  },
  font: {
    body: 'arial'
  }
});

CSS

@layer themes_themeLayer__1k6oxph0;
@layer themes_themeLayer__1k6oxph0 {
  .themes_themeA__1k6oxph1 {
    --color-brand__1k6oxph2: blue;
    --font-body__1k6oxph3: arial;
  }
}

PreviousfallbackVar

NextcreateThemeContract