search

jaredh159 / tailwind-react-native-classnames

simple, expressive API for tailwindcss + react-native
2.04k stars 82 forks source link

Default text color in twrnc Dark Mode #322

Open edsonfeimberg opened 2 weeks ago

edsonfeimberg commented 2 weeks ago

Twrnc dark mode works considerably different from the web version. I am struggling to find information regarding this specific issue.

While in the Web version tailwind invert the text color automatically when switching to dark mode, this isn't the case here. Also, the fact that CSS variables aren't available here makes it impossible to set in a single property, the values for both light and dark variants.

I wonder if there is some kind of recommended solution for this problem. Would gladly update the docs if this is the case.

jaredh159 commented 2 weeks ago

i'm not sure i'm understanding the question. i don't think of the web version as "inverting the text color automatically" at all. you have to do things like text-white dark:text-black, which is the same paradigm as this library. see here:

https://play.tailwindcss.com/PFy9570Zg2

am i misunderstanding your question?

edsonfeimberg commented 2 weeks ago

I am now also feeling confused. In my projects, I have observed that, without explicitly specifying a color, the default behavior has been for the colors to be black in light mode and white in dark mode, while text that have a specified color (text-somecolor-value) remained unaffected.

Always thought it was a tailwind feature but now i am unsure and even curious to understand how it worked. Currently it is still unclear to me.

I was wondering how TWRNC defined the default text color (when no color is specified in text component), but i guess it doesn't? In case there is no value i could override and apply it to all rendered text in the app?

If this is the case i imagine the only solution would be to create a custom text component to manage the color based on the theme. Quite a refactoring ahead, it would be.

jaredh159 commented 1 week ago

Yeah, twrnc doesn't do any default configuration of text color, all it does is pass along style objects to the underlying RN components. text in RN native is particularly confusing for folks coming from web-background (like i was) because things don't cascade like you would expect.