Theme<>

type Theme<T extends VarGroup<unknown, symbol>>

A Theme is a type that represents a style that themes a set of variables in a given VarGroup. It's the result of calling stylex.createTheme.

import type {VarGroup} from '@stylexjs/stylex';
import * as stylex from '@stylexjs/stylex';

import {vars} from './vars.stylex';

export const theme: Theme<typeof vars> = stylex.createTheme(vars, {
  color: 'red', // OK
  backgroundColor: 'blue', // OK
});

The most common use-case for Theme is to accept a theme for a particular set of variables.

While, it's not needed in most cases, Theme also accepts an optional second type type argument.

Advanced use-case: unique type identity for a `Theme`

Two themes for the same VarGroup have the same type by default. In most cases, this is the desired behavior. However, in some cases, you may want each theme to have a unique type identity to constrain the themes that can be passed into a particular component.

import * as stylex from '@stylexjs/stylex';
import type {Theme} from '@stylexjs/stylex';
import {vars} from './vars.stylex';

declare const Tag: unique symbol;
export const theme1: Theme<typeof vars, Tag> = stylex.createTheme(vars, {
  color: 'red', // OK
  backgroundColor: 'blue', // OK
});

Now, theme1 has a unique type identity and a different Theme for vars would not satisfy typeof theme1.

This advanced use-case should be rarely needed, but it's available when it is.