Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Lit & Dark Mode not usable with "class" mode #512

Open
kadoshms opened this issue May 30, 2024 · 1 comment
Open

[Bug]: Lit & Dark Mode not usable with "class" mode #512

kadoshms opened this issue May 30, 2024 · 1 comment
Labels
🐞 Bug Bug or Bug fixes

Comments

@kadoshms
Copy link

kadoshms commented May 30, 2024

Reproduction

https://lit.dev/playground/#gist=4966b12310c22a412c1cfc2381a6248a

Describe the bug

For systems that enable users to toggle themes (dark/light) - seems like it is not possible to use the "class" mode for darkMode.
This makes sense to some extent due to Shadow DOM, I wonder though if we can maybe have some discussion around it and perhaps workaround it.
Maybe for a start an update to the documentation is needed + excluding this mode from the allowed modes for web-components.

For "media" based configuration - this works perfectly fine, as the configuration is not derived from a specific selector.

One possible workaround is disabling the Shadow DOM for the element, however this is probably not the best approach, in addition to losing key features such as slots.

Severity

blocking all usage of Twind

System Info

Latest

Additional Information

No response

@kadoshms kadoshms added the 🐞 Bug Bug or Bug fixes label May 30, 2024
@kadoshms
Copy link
Author

One way I thought of resolving this was to use Lit context provider, and consume it in every component.
This works, however this obviously adds overhead and boilerplate to each component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 Bug Bug or Bug fixes
Projects
None yet
Development

No branches or pull requests

1 participant