Dynamic Theming with StyleX - just looking for confirmation 🙏

[BMCwebdev]

Heyo everyone,

We’re starting to introduce customization capabilities into our design system, with a small, focused goal: allowing users to choose their primary color.

Background

Currently, we have a library of tokens built with defineVars, where we use readable string keys as the names, as requested by our design team.

export const colorPrimitives = {
  "--s-color-neutral-0": "#ffffff",
  "--s-color-neutral-100": "#f8f8f9",
  // ...
};

We also define semantic tokens that point to core tokens to provide an abstraction layer:

export const colorSemantic = {
  "--s-color-primary": "--s-color-peri-500",
};

export const coreTokens = defineVars({
  ...colorPrimitives,
  ...colorSemantic,
...

The Challenge

We want to enable users to dynamically change the primary color at runtime (e.g., based on API data or user preference).

I’ve looked into using createTheme, but it seems to be intended for static values known at build time. Since our customization might come from an API or user settings, this approach doesn’t seem feasible.

One potential solution I’ve considered is directly updating the CSS variables at the html or body tag level. Since we use named variables rather than hashed ones, this might be manageable. However, it feels a bit off given StyleX’s default behavior of hashing variable names, and I wonder if there’s a more “StyleX-native” way to handle this.

Also, I’d like to avoid using inline style attributes.

Question

Has anyone tackled dynamic theme customization with StyleX, especially where the colors are not known until runtime? Are there best practices or recommended approaches for this kind of use case?

Any guidance or examples would be greatly appreciated!

Thanks!

[BMCwebdev]

The only solution I can think of, if you’re using the default StyleX hashed variable names, is that you would point your hashed variable to a named variable (—s-color-primary) and then use JS to fetch the custom color value and redefine that named variable further down the tree.

[BMCwebdev]

Just hoping someone could confirm I am not missing something more fundamental about how theming works with StyleX. Thank you!

[zaydek]

I don't remember 100% how I solved this previously but it's something like the following if I remember correctly:

// Define Theme type
type Theme = {
  Foo: string,
  ...
}

// Define theme implentation
const styles = stylex.create({
  theme: (theme: Theme) => ({
    backgroundColor: theme.Foo,
    color: ...,
  }),
});

function Component(props: ComponentProps) {
  // Initialize theme
  const [runtimeObject, setRuntimeObject] = useState(...)
  
  // Mutate theme
  useEffect(() => {
    ...
  }, [...])

  return (
    <div {...stylex.props(styles.theme(runtimeObject))}>
      ...
    </div>
  );
}

I also went super with createTheme and basically worked out that you should use them statically but you could still write a meta application to help generate the values.

Video 1: https://www.youtube.com/watch?v=GXIWZOV_QvQ
Video 2: https://www.youtube.com/watch?v=TJkfFWwhPUs

That being said, if memory serves, use something like the create thing above I think that's all you need.

[zaydek]

@BMCwebdev

[BMCwebdev]

@zaydek just wanted to say thanks, I've had fires to put out this week, but I will be diving into this tomorrow and I really appreciate the feedback and help!

[nmn]

Please don't do this:

export const colorSemantic = {
  "--s-color-primary": "--s-color-peri-500",
};

Pointing one variable to another variable is inefficient and doesn't work the way people expect in CSS. --s-color-peri-500 is usually a constant in such example, so define constants in the file instead.

---

Re: Dynamic theming

The simplest way to do this with StyleX is to use the variables as keys within stylex.create.

const styles = stylex.create({
  dynamicTheme: (theme: Theme) => ({
    [coreTokens["--s-color-primary"]]: theme.colorPrimary,
    ...
  }),
});

StyleX variables can be used as both keys and values within stylex.create calls (and also stylex.keyframes if given types)