stylex.createTheme

stylex.createTheme

Takes a variable set created with defineVars(), and an object used to override the values of those variables. It returns a StyleXStyles object that can be passed to props() to apply the theme to an element root.

function createTheme(
  vars: Vars,
  overrides: {
    [key: keyof Vars]: string;
  },
): StyleXStyles;

Example use:

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

const theme = stylex.createTheme(colors, {
  accentColor: 'red',
  backgroundColor: 'gray',
  lineColor: 'purple',
  textPrimaryColor: 'black',
  textSecondaryColor: 'brown',
});

function App() {
  return (
    <div {...stylex.props(theme /* , ... */)}>
      <ContentToBeThemed />
    </div>
  );
}