How can I configure tailwind.config.js to support different colors for light and dark modes?

[phuocantd]

I want to configure twrnc and tailwindcss to support separate color definitions for light and dark modes, and then use a single color class that automatically applies the correct color based on the current mode.

Specifically, I want to define my colors like this:

const colors = {
  light: {
    red: {
      100: "#880808",
      // Other colors for light mode
    },
  },
  dark: {
    red: {
      100: "red",
      // Other colors for dark mode
    },
  },
};

With this setup, I want to use Tailwind CSS classes like this:

<View style={tw`bg-red-100`} >...</View>

In this example, bg-red-100 should automatically apply the appropriate color based on whether the app is in light mode or dark mode, without requiring additional classes or modifications like dark:bg-red-100.

[jaredh159]

there's not a simple way in the library to express this concept, sorry. the library is designed for the more idiomatic tailwind usage with bg-red-100 dark: bg-red-900 style usage. that's not to say that you can't pull it off, just that i don't have something simple for you. you probably can setup two different tailwind configs, (or switch between sub-objects), and then reconfigure your tw function with the create() fn the library exports when the color scheme changes, by listening with a hook from RN... something like that. should be manageable if it's really important to you, but it's not something that is built-in, and probably not something i am going to build into the library. 👍