Add an example of how to use CSS Variables

[bebraw]

Since using CSS Variables complements an approach like this in a cool way, likely it would be worth it to write a small example (or include in the current one) on how to use the technique to provide limited theming for a specific token.

[lukejacksonn]

I haven't actually started using CSS variables with oceanwind. Not like Tailwind does in their implementation at least. Could you provide some demonstration of how you are or intend them to be used?

[bebraw]

I think the underlying question is, how to implement features like dark mode on top of Oceanwind. CSS variables would also allow us to replace entire themes while running.

https://levelup.gitconnected.com/tailwindcss-with-css-variables-513abe2e9a5 seems like a nice reference on how to do it in vanilla Tailwind.

[lukejacksonn]

Interesting. I guess that because we are already in JS land here and thus can control the theme (colors, fonts, etc.) at runtime anyway, that this approach seems less beneficial.

That said, dark mode is a good candidate for testing out this theory. I will look into it a bit more!

[bebraw]

Interesting. I guess that because we are already in JS land here and thus can control the theme (colors, fonts, etc.) at runtime anyway, that this approach seems less beneficial.

Yeah, that's true.

Note that my use case is in SSR so ideally there would be some way to inject CSS variables where needed and then toggle through JS. Maybe there's some overlap between fully in runtime and SSR.

[lukejacksonn]

So @rschristian added this #35 which sets a precedence for some rules with css variables. I'm not sure that using CSS variables outside of directives is how Tailwind is meant to be used.

So I'm going to close this here but if you come up with a more concrete example of what you want the feel free to create a new issue!

[bebraw]

Sure, I think that's a good example. Thanks. 👍