I am using stencil.js to create a design system for react components. How can i add global theme utility that can make dark mode enable in every component ?
I have no idea how can i do that.
Asked
Active
Viewed 92 times
0
-
Theming is a large topic - mainly about CSS - not specific to web components, Stencil, or React. There are a lot of web resources that focus on that. But of course your components would need to be able to respond to theme changes. There is more than one way to achieve that, and whether or not your components use shadow DOM will be a factor that affects your approach. Stencil is a tool for building web components which are used within design systems - it's not clear how you intend to "create a design system" using Stencil - can you elaborate? – G. Tranter Dec 13 '22 at 16:45
-
I am using stencil and tailwind to setup dark mode. I was able to toggle dark mode in components when I use system preference (dark/light mode) in the setting of windows but was unable to toggle dark mode by button or by adding or removing a dark class in html/body tag. – Shrestha Dec 19 '22 at 16:52
-
If you shared some code samples it would help - I have no idea what your code does and don't know tailwind. – G. Tranter Dec 20 '22 at 15:50