search

gluestack / gluestack-ui

React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))
https://gluestack.io/
MIT License
2.38k stars 114 forks source link

Dark mode props overwriting light props #2058

Closed jordmccord closed 3 months ago

jordmccord commented 5 months ago

Description

While styling my button spinner I've noticed that the dark mode styles, when applied via the prop color value, overwrite the light mode styles

CodeSandbox/Snack link

No response

Steps to reproduce

  1. Apply styles to the button component via the config
  2. Update the spinner styles by adding prop -> color -> value
  3. Update the dark styles
  4. The light mode has the dark mode styles

gluestack-ui Version

1.1.22

Platform

Other Platform

No response

Additional Information

Screenshot 2024-04-09 at 14 33 13 Screenshot 2024-04-09 at 14 33 44 Screenshot 2024-04-09 at 14 42 44 Screenshot 2024-04-09 at 14 42 51

surajahmed commented 5 months ago

@jordmccord Thanks for reporting this. We're working on it.

surajahmed commented 3 months ago

Closing this issue since it has been resolved in the latest version. If the problem continues, please feel free to reopen it. Please update @gluestack-ui/themed and @gluestack-style/react to the latest version.

sashahilton00 commented 3 months ago

This is still an issue on the nativewind alpha - setting mode="light" on GluestackUIProvider then having classnames such as className="bg-background-light dark:bg-background-dark" on a view element will render the dark background.