support `dark:` variant for custom dark themes (eg. `xmas-dark`)

[pvinis]

What happened?

We have a custom "yellow" theme in our app, but we could call it "xmas" theme. To support both light and dark modes for it, we created yellow-light and yellow-dark variants. We apply these via ScopedTheme:

<ScopedTheme theme="yellow-dark">
  <Card /> {/* uses dark: utility classes */}
</ScopedTheme>

The problem is that dark: utility classes (like dark:bg-card) don't apply inside ScopedTheme theme="yellow-dark" correctly. They use the colors from the regular dark theme, but not the scoped dark theme.

This means we can use dark: without a ScopedTheme, but not with one that has a custom dark theme name.

Steps to Reproduce

1. Define custom themes yellow-light and yellow-dark in your CSS with dark mode overrides, and put it in the metro config too.
2. Use different values for bg-card for light, dark, yellow-light, yellow-dark themes.
3. Wrap a component in <ScopedTheme theme="yellow-dark">.
4. Any dark: utility classes (e.g. dark:bg-card) inside that tree will not take the value of the yellow-dark theme. Instead it wiill use the regular dark theme value for bg-card

Snack or Repository Link

https://github.com/pvinis/repro-uniwind-dark-themes

Uniwind version

1.6.0

React Native Version

0.83.2

Platforms

iOS, Android

Expo

Yes

Additional information

• I've searched for similar issues in this repository and found none

[Brentlok]

It's not an issue, it's intended behavior. dark: is for dark theme only, we don't support "custom dark themes"

[pvinis]

alright. i guess ill keep that as a patch on my repo then. feels kinda weird though. im sure eventually this will be needed, as we go on with light/dark and custom themes.

alright, thank you for the reply.

[jpudysz]

You need to think broader than your use case.

What if user has 5 themes that start or end with dark?

We follow tailwind rules: light is light theme and dark is dark theme. We can't randomly select other themes because it will be hard to understand and it will be a breaking change for web users.