Support for Nested Themes

[NovaBG03]

Hello,

I'm currently utilizing the UnistylesRuntime.setTheme() method for theme management in our application. At present, we have a global theme applied across the entire app. Our default global theme is named 'blue'.

However, we have encountered a scenario where we need to apply a different theme to a specific component within our application while keeping the rest of the app in the default 'blue' theme. We would like to apply a 'red' theme to this particular component.

Could you please provide guidance or suggest a method to implement nested themes within our app? Specifically, we're looking for a way to maintain our global 'blue' theme while allowing certain components to override this with a 'red' theme or any other theme.

Thank you for your assistance.

[jpudysz]

Hey! Currently such scenario is not supported. Theme is used in the entire app, there is no api to select it for single screen/stylesheet, but...

Why don't you import red theme directly in this specific component? Instead of using theme from createStyleSheet simply use it from import on top of your file. It won't be dynamic but it will cover your case ☺️

[peterjskaltsis]

Our team has been running into this issue recently as well.

We can import the darkTheme, but it won't effect the components inside the screen that use the theme itself.

Do you think it would be possible to add the ability to specify a parent element etc that defines the theme name for child components to use? (I believe Tamagui has something like this)

[jpudysz]

I can't see a way to achieve this with the current architecture. Unistyles has no components, so I can't scope the theme to something.

This is rather specific use case and I don't think it's broadly used.

[peterjskaltsis]

The use case for this is to style a particular screen in a flow in dark mode, eg. when the user requires focus on a QR code etc, all underlying components (except the QR code) should also be in dark mode so they user can focus on the QR.

I think this might be an increasingly common one and it would actually be a great differentiator for the library to have.

Good example here: https://benji.org/family-values#:~:text=Finally,%20the

Just my submission, thank you for the already great library & all the hard work making it native!

(P.S. If anything, perhaps we could have a way to force the theme that the useStyles hook should return & use in the stylesheet? Just a thought)