[BUG] Issues with themes and modes with multiple Reshaped instances within one app

[vladoyoung]

Describe the bug In different combinations and approaches, using two <Reshaped/> instances and trying to manage their themes with invertColorMode for example, breaks the app.

To Reproduce reshaped_nested.zip Codesandbox is very slow and I could not efficiently reproduce examples in there. I've followed the Reshaped tutorial for a Vite app and created 4 different examples like four different <App/> components (in main.tsx). You will need to uncomment the one you need to see the differences when you run the project.

Notice that the child Reshaped has a scoped attribute.

(Visual examples in the attachments below)

AppOne is an example of a Reshaped parent (without <Theme>) and a dynamically loaded (to simulate lazy load) <SecondReshaped /> that tries to use the useTheme of the parent.

AppTwo is an example of a Reshaped parent (without <Theme>) and a <SecondReshaped /> that tries to use the useTheme of the parent.

AppThree is an example of a Reshaped parent (WITH <Theme>) and a <SecondReshaped /> that tries to use the useTheme of the parent.

AppFour is an example of a Reshaped parent (without<Theme>) and a dynamically loaded (to simulate lazy load) <SecondReshapedWithInnerContents /> that tries to use ITS OWN useTheme.

At the time of writing I'm realising that AppOne, AppTwo and AppThree are trying to use the parent useTheme, which might not be the proper approach, but I'll still leave it here for reference.

AppFour is the one that has identical structure to our project we have found the issue on.

Expected behavior Each Reshaped instance to manage its own themes/modes without conflicting with the other. Maybe some way of encapsulating the whole Reshaped Instance so functions don't go out of bounds or a smarter way for invertColorMode to differentiate multiple Reshaped instances?

Screenshots App One import App from "./AppOne"; https://github.com/user-attachments/assets/0be0a3b4-d435-46e3-ad52-f8f50c540eef

App Two import App from "./AppTwo"; https://github.com/user-attachments/assets/37f01968-b4d2-4cb2-940b-31eb7935141c

App Three import App from "./AppThree"; https://github.com/user-attachments/assets/91e7e5b4-6eb2-468e-872a-2ad252fb1c3e

App Four import App from "./AppFour"; https://github.com/user-attachments/assets/b89f1914-f168-40f3-918b-b6e407fbaf03

Additional context Here's a example video of how the issue is caused in our project where the parent app uses Reshaped and the child app (npm package) uses a scoped Reshaped.

https://github.com/user-attachments/assets/e79ebac5-3ccc-48ae-afa2-61264fd1adbc

And here is the temporary dirty solution I've come up with to patch things up on the parent app:

    const onClick = () => {
        invertColorMode();
        setTimeout(() => {
            document.documentElement.setAttribute('data-rs-theme', 'myx');
            document.documentElement.setAttribute('data-rs-color-mode', colorMode === 'light' ? 'dark' : 'light');
        }, 0);
    };

This unfortunately causes a glitch for a split second while the theme is loaded back, but I could not figure out another way to patch things up.

Apologies for the quick and dirty state of the code. The four app variants should be a good start for tests, but please let me know if you need more info or tests.

[blvdmitry]

Made some initial progress on this after checking the examples. Got some currently known edge cases to resolve and will see if everything from the original use cases is solved or if anything has to be adjusted

https://github.com/user-attachments/assets/64064971-287a-40e1-854a-081bacdfe404

• [x] Triggering mode change from child provider without scoped flag should change the mode on the root?
• [x] Test 4 use cases
• [x] Unit tests
• [ ] Comments

[vladoyoung]

The progress looks great so far! Let me know if you need any help at some point.

[erickcelio]

I'm not entirely sure it's directly related, but I'm experiencing some strange issues when using reshaped inside a web component, especially since the parent also uses reshaped. The web component is altering the theme of the parent. I'll try to create some examples to reproduce this issue and share them here later

[blvdmitry]

@erickcelio Thanks, in case you're using a Reshaped provider inside you might also want to try the new scoped flag. Otherwise either the new theming scoping improvements coming with this issue will help or it's something else and we can improve that separately

[blvdmitry]

@vladoyoung I've tried it with your examples too now. It seems to work with AppFour example but works differently for others because useTheme is called outside the nested Reshaped provider. I'm not sure if that was intentional for your examples or not though. You can try the same by installing 3.2.6-rc.0

[vladoyoung]

@blvdmitry This seems to fix the issue when I replace all imports from our own package based on top of the source code. Could you send me the source for with this patch so I can integrate it in our package and have a better look?

[blvdmitry]

Sent it over by email and added some additional unit tests for this use case. Going to close the issue once you confirm that it works for you

[vladoyoung]

Yep, works flawlessly. Thank you very much!