Dynamic global stylesheet (CSS theming)

[michaelByrne]

My app (a messageboard) has or will have a theming feature. Users will be able to set the colors etc. What I've built works by loading the themes from a database, converting them into maps, and using Go's native text templating to generate stylesheets. I'd hoped to just be able to inject them into a <style> element in the element of the app, like this:

templ Styles(styles string) {
	<style type="text/css">
        { styles }
    </style>
}

But that doesn't work ofc. I'm wondering what the best alternative would be. CSS components don't seem like a great alternative because I'm talking about things like this:

body
{
  font-family: {{ index . "font" }};
  background-color: {{ index . "body" }};
  color: {{ index . "bodyfont" }};
}
html { font-size: {{ index . "fontsize" }}em; }
a { color: {{ index . "bodyfont" }}; }
.even,div.dp-popup,table.jCalendar td.other-month
{
  background-color: {{ index . "even" }};
  color: {{ index . "evenfont" }};
}

Also important to note is that all of the HTML is already written with styles attached in the conventional way, which makes it extra difficult to imagine CSS components working well.