Skip to main content

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