createGlobalTheme

Creates a theme attached to a global selector, but with locally scoped variable names.

🎨  New to theming in vanilla-extract? Make sure you’ve read the theming overview first.
theme.css.ts
import { createGlobalTheme } from '@vanilla-extract/css';  export const vars = createGlobalTheme(':root', {  color: {  brand: 'blue'  },  font: {  body: 'arial'  } });
CSS
:root {  --color-brand__z05zdf0: blue;  --font-body__z05zdf1: arial; }

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

Importing this stylesheet as a side effect to include the styles in your CSS bundle.

app.ts
import './theme.css.ts';

Implementing a Theme Contract

An existing theme contract can be implemented by passing it as the second argument.

theme.css.ts
import {  createThemeContract,  createGlobalTheme } from '@vanilla-extract/css';  export const vars = createThemeContract({  color: {  brand: null  },  font: {  body: null  } });  createGlobalTheme(':root', vars, {  color: {  brand: 'blue'  },  font: {  body: 'arial'  } });
CSS
:root {  --color-brand__z05zdf0: blue;  --font-body__z05zdf1: arial; }

@layer

Global 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.
theme.css.ts
import {  createGlobalTheme,  layer } from '@vanilla-extract/css';  export const themeLayer = layer();  export const vars = createGlobalTheme(':root', {  '@layer': themeLayer,  color: {  brand: 'blue'  },  font: {  body: 'arial'  } });
CSS
@layer theme_themeLayer__z05zdf0; @layer theme_themeLayer__z05zdf0 {  :root {  --color-brand__z05zdf1: blue;  --font-body__z05zdf2: arial;  } }