search

josefaidt / svelte-themer

A theming engine for your Svelte apps using CSS Variables, persisted.
https://svelte-themer.vercel.app/
MIT License
140 stars 14 forks source link

per container theme? #7

Closed zahachtah closed 3 years ago

zahachtah commented 3 years ago

This is super useful!

I have a very special case where I might want to theme within containers. Do you know if it's possible to add a container flag such as

.container > :global(svg)

I am not sure how one would inject the .container > :global part...

The exampIe got this from is here:

https://svelte.dev/repl/4e04a629ab934863b09c4ee3f69d99a1?version=3.8.1

I'll try to check out your code to see if I can solve it but if you have a quick idea how to do it I'd appreciate it!!

Cheers, /Jon

josefaidt commented 3 years ago

Hi @zahachtah apologies for the delay! I do have theme classes set up, however they only apply to the html tag. Let me see if I can back this out to create the theme utility classes. This should overwrite the theme CSS vars

josefaidt commented 3 years ago

Hi @zahachtah this is now possible through the use of adding a theme class such as theme--dark or theme--light to apply the new CSS variables. The only caveat being the color properties will have to be set on the component in order to consume the updated CSS variables.

https://codesandbox.io/s/musing-moon-7uvyi?file=/Box.svelte