Change callout color based on light/dark theme

[midnightoli]

What I’m trying to do:

I want to change the colors of my custom callouts, based on the system appearance (light/dark). For example, if the system is in light mode, I want to have a blue callout background, if the system is in dark mode a grey callout background.

What have I tried:

.callout[data-callout=“example callout”] .callout-theme-light {
–callout-color: 51, 204, 25;
–callout-icon: lucide-book;
background: rgba(38, 237, 255, 0.2);
}

This does not work.

.callout[data-callout=“example callout”] .theme-light {
…
}
Does not work either.

[holroy]

@midnightoli

This does not work.

.callout[data-callout=“example callout”] .theme-light {
…
}

The order matter when doing CSS selectors so try:

.theme-light .callout[data-callout=“example callout”] {
  ...
}