Skip to content

Implement support for CSS light-dark() in css.defineVars#497

Open
efoken wants to merge 1 commit into
react:mainfrom
efoken:light-dark
Open

Implement support for CSS light-dark() in css.defineVars#497
efoken wants to merge 1 commit into
react:mainfrom
efoken:light-dark

Conversation

@efoken

@efoken efoken commented Jun 5, 2026

Copy link
Copy Markdown

As suggested in the StyleX docs, modern browsers should use the light-dark() CSS function instead of theme-based overrides. This simplifies the code and removes the need to explicitly define dark mode themes.

This PR adds support for light-dark() in css.defineVars:

const tokens = css.defineVars({
  lightDarkColor: 'light-dark(blue, green)'
});

For React Native, this is functionally equivalent to defining separate values and resolving them via the @media (prefers-color-scheme: dark) Media Query.

In modern browsers, light-dark() also allows the color scheme to be controlled via the color-scheme CSS property, instead of relying on custom theme logic or duplicated Media Query-based definitions.

This aligns the implementation with the current StyleX recommendation and modern CSS color-scheme handling.

@meta-cla meta-cla Bot added the cla signed label Jun 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant