Using Stylex with Theme hook

[Amrender-Singh]

How can we use theme variables in stylex when we get our theme using a hook like, useTheme().
For example our component looks like:
`
function Button(){
const theme = useTheme();
…
}

`
Basically we use a theme context provider, to set different themes for different segments of our view, and the theme is basically a map of theme variables and their value.

[nmn]

Please use the StyleX theme APIs.

Short explanations. I'll use a theme of just a few colors as an example.

First define the "default theme".

Define all the variables you need along with default values in a file that ends with .stylex.ts.

import * as stylex from '@stylexjs/stylex'

export const colors = stylex.defineVars({
  primaryText: 'black',
  secondaryText: 'rgb(60,60,60)',
  primaryBg: 'white',
  secondaryBg: 'rgb(200,200,200)',
});

Define a bunch of themes in a separate file:

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

export const dark = stylex.createTheme(colors, {
  primaryText: 'white',
  secondaryText: 'rgb(200,200,200)',
  primaryBg: 'rgb(60,60,60)',
  secondaryBg: 'black',
});

export const rainbow = stylex.createTheme(colors, {...});
export const blue = stylex.createTheme(colors, {...});
// ...

Import and use variables directly from the vars.stylex.ts file.

Don't import variables from themes

import {colors} from './vars.stylex';

cont styles = stylex.create({
  foo: {color: colors.primaryText},
});

Use the useTheme hook to choose which theme to apply:

import {dark, rainbow, blue} from './themes';

function Button(){
  const theme = useTheme();
  return <div {...stylex.props(
    theme === 'dark' && dark,
    theme === 'rainbow' && rainbow,
    theme === 'blue' && blue,
  )}>
     {/*
        Anything here will have the correct theme applied.
         */}
  </div>
}

---

NOTE: The StyleX theming APIs will work with RSCs, but if you use a useTheme hook, that won't.

[Amrender-Singh]

Thanks for the quick response.Just wanted to clarify one more thing, we already have all the variables exported as JS variables in two files lightVars.ts and darkVars.ts, and these variables are not just limited to colors but also has composite tokens and spacing variables in them as well. Will declaring all of them as styleX variables cause any performance issues. Also does stylex support composite tokens?

[nmn]

Will declaring all of them as styleX variables cause any performance issues. Also does stylex support composite tokens?

No. It will make things faster instead. The values will be in your static CSS file and you won't using inline styles anymore.

Also does stylex support composite tokens?

I'm not sure what you mean by "composite" tokens.

We support Media queries within the values:

// You can use any `@media` or `@supports` rules. They can be nested more than one level deep.
const DARK = '@media (prefers-color-scheme: dark)';
export const colors = stylex.defineVars({
  primaryText: {default: 'black', [DARK]: 'white'},
});

[Amrender-Singh]

I'm not sure what you mean by "composite" tokens.

By composite token I mean we have a variable or token with name like:

const ProductiveHeading100 = {
  font: “1rem”,
  fontFamily:”roboto”,
  fontWeight:”bold”,
  lineHeight:”48”
   …
}

Basically these tokens are combination of different css properties.

[nmn]

You can create many different objects of variables in StyleX, so this should be possible.

export const colors = stylex.defineVars({...})
export const lengths = stylex.defineVars({...})
export const shadows = stylex.defineVars({...})

Remember, this must still be in .stylex.js files.

If you just want to share styles across components, you can simply define and export styles (from any file)

export const styles = stylex.create({
  ProductiveHeading100: {
    font: "1rem",
    fontFamily: "roboto",
    fontWeight: "bold",
    lineHeight: "48"
  }
});

You can import and use these style like you would use styles defined locally.

[fredrivett]

Thought I'd share how we're handling this, based on what @nmn has shared in this thread:

// hooks/useTheme.ts

import { useState } from "react";

export enum Theme {
  LIGHT = "light",
  DARK = "dark",
}

const useTheme = () => {
  const [currentTheme, setCurrentTheme] = useState<Theme | null>(null);

  // ...theme logic

  return currentTheme;
};

export default useTheme;

// utils/styles.ts

import * as stylex from "@stylexjs/stylex";

import { Theme } from "hooks/useTheme";

export const stylexThemed = <T extends Record<string, any>>(
  key: keyof T,
  styles: T,
  darkStyles: T,
  theme: Theme | null,
) => stylex.props(styles[key], theme === Theme.DARK ? darkStyles[key] : null);

// components/MyComponent.tsx

import useTheme from "hooks/useTheme";

import { border } from "../../styles/border.stylex";
import { colors } from "../../styles/colors.stylex";

const styles = stylex.create({
  container: {
    // ...other styles
    backgroundColor: colors.grey25,
    borderColor: border.color,
  },
});

const darkStyles = stylex.create({
  container: {
    // ...other styles
    backgroundColor: colors.grey725,
    borderColor: border.darkColor,
  },
});

const MyComponent = () => {
  const theme = useTheme();

  return (
    <div {...stylexThemed("container", styles, darkStyles, theme)}>
    </div>
  )
};

export default MyComponent;

This is "semi" type safe as if container doesn't exist on styles TS will throw up. It won't if container doesn't exist on darkStyles, though in that case it will use styles so the matching key in darkStyles isn't needed so that's probably ok.

Open to suggestions on ways to improve this (I prefer how stylex colocates the styles with default and [DARK]) but I don't think there's a way to achieve similar colocation with JS based media queries.

[nmn]

Your implementation can be much simpler. You don't need stylexThemed.

import { border } from "../../styles/border.stylex";
import { colors } from "../../styles/colors.stylex";

const styles = stylex.create({
  container: {
    // ...other styles
    backgroundColor: colors.grey25,
    borderColor: border.color,
  },
});

const darkStyles = stylex.create({
  container: {
    // ...other styles
    backgroundColor: colors.grey725,
    borderColor: border.darkColor,
  },
});

const MyComponent = () => {
  const theme = useTheme();

  return (
    <div {...stylex.props(theme === 'dark' ? darkStyles.container : styles.container)}>
    </div>
  )
};

export default MyComponent;

[fredrivett]

I want to have styles.container as a base and darkStyles.container as just dark tweaks, so it needs both combined, but only if the theme is dark, otherwise it just shows the base styles.

I guess I could do this, but I'd prefer to tidy this than have this spread throughout the app, as most components are going to need the dark styles applied:

<div {...stylex.props(styles.container, theme === 'dark' ? darkStyles.container : null)}></div>

To me this is clearer with less room for error:

<div {...stylexThemed("container", styles, darkStyles, theme)}></div>

[nmn]

FYI, please see #464 to see the discussion about supporting light-dark(), which is an upcoming native CSS feature. Going forward, this should replace @media (prefers-color-scheme: dark) queries entirely as the theme used by light-dark() can be controlled via CSS. (The color-scheme property).

Once you switch to using light-dark() for all colors, you can simply set a theme by setting color-scheme: light or color-scheme: dark. You can even use the "system" value by using color-scheme: light dark;!

[fredrivett]

Ahh very nice, will keep an eye out on when that is available, thanks @nmn.

[sinthujan-calcey]

@nmn is it possible to dynamically define variables or create a new theme? Basically we have a default colour that we use as the background colour for all elements (buttons, labels etc). Based on different user, we will need to replace the default background colour with the value returned from an API. Is there a way to achieve this?

[nmn]

You can use stylex.create and set values of variables.

const styles = stylex.create({
  dynamicTheme: (val1, val2, val3) => ({
    [vars.val1]: val1,
    [vars.val2]: val2,
    [vars.val3]: val3,
  })
});

[sinthujan-calcey]

Tried this out and this seems to work for our requirements. Thanks @nmn