applying dynamic CSS styles to core markdown elements

[gureckis]

I'd like to dynamically style elements of the raw markdown code (styles with .slidev-layout classes).

For example, sat you'd like .slidev-layout h1 element to have a 1 px solid border at the bottom with a color chosen dynamically based on some logic in the <setup> function of the layout. The color I'd like to use is from the @unocss/preset-uno (e.g., color-amber-500). The problem is that unocss runs once at load so i can't do something like

<script>
const linecolor = ref('border-amber-500')
// some logic that might change linecolor
</script>
...
<style>
.slidev-layout.cover h1 {
  @apply border-b-1 v-bind(linecolor);
}
</style>

in my layout because the v-bind color will not re-evaluate or even evaluate initially, i think.

Alternatively,

<script>
const linecolor = ref('border-amber-500')
// some logic that might change linecolor
</script>
...
<style>
.slidev-layout.cover h1 {
  border-bottom: 1px solid v-bind(linecolor);
}
</style>

won't work because linecolor in this case is the atomic CSS value e.g., border-amber-500. I guess what I'm thinking is if there is a way in <script setup> to ask unocss for what the raw css is for the style border-amber-500. That might end up a unocss question. But i guess more generally, this is a question for slidev in the sense of how does one recommend dynamically styling core markdown elements. I feel this can't be that difficult but am at a loss.

Thanks!

[kermanx]

This is not the correct usage of UnoCSS classes. UnoCSS classes are just classes, so in fact, you code will become something like this:

.slidev-layout.cover h1 {
  border-bottom: 1px solid border-amber-500;
}

// Generated by UnoCSS
.border-amber-500 {
	border-color: #abcd;
}

Which doesn't work, because CSS doesn't allow a class name as a color value.

However, I don't know how to get the colors from UnoCSS presets🥲. You can get the actual color in https://unocss.dev/interactive/?s=border-amber-500.