Skip to main content

Merge Themes

Themes for the same VarGroup are mutually exclusive and do not merge. Any variable in a VarGroup that is not explicitly overridden in a Theme for that VarGroup is set to its default value.

However, you can reuse common constants when defining multiple themes for a particular VarGroup and avoid excessive repetition.

Example​

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

const themeBlueVars = {
  backgroundColor: 'blue',
};
const themeBlue = stylex.createTheme(vars, themeBlueVars);

const themeBigVars = {
  size: '128px',
};
const themeBig = stylex.createTheme(vars, themeBigVars);

const themeBigBlueVars = {...themeBlueVars, ...themeBigVars};
const themeBigBlue = stylex.createTheme(vars, themeBigBlueVars);

The StyleX compiler is able to resolve local object constants and merge them. This is useful to be able to define a Theme that merges the values of two or more other Themes without repetition.