velvet mirage
I need to dynamically generate some CSS at build time from JS including the CSS selectors so I don't think define:vars will work. Basically I want to create:
html[data-theme="some-theme"] { ... }
html[data-theme="another-theme"] { ... }
/* more themes if necessary... */
where "some-theme" and "another-theme" are derived from a variable length list in the site config file. I want to put this generated CSS in a global style tag. Is this even possible?
heady pebble
Yes, it's possible. This is one way you could do it
---
import theme from "/path/to/theme/config"
const CSS = `p{color: ${theme.color}}`
---
<style set:html={CSS} />
olive bane
Yes, it's possible. This is one way you could do it
```tsx
---
import theme from...
What's the p for?
glass fern
What's the `p` for?
I think it's just an example selector?
olive bane
Ohhh that would make sense, it threw me off for sure
heady pebble
I think it's just an example selector?
yep that's it