stylex.createTheme

defineVars() で作成した変数セットと、それらの変数の値を上書きするために使用するオブジェクトを受け取ります。props() に渡してテーマを要素のルートに適用できる StyleXStyles オブジェクトを返します。

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

使用例:

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>
  );
}