Light/dark mode formatting for shortcode for abridge theme?

the problem

I am making a site with the excellent Abridge theme. I have a simple shortcode that I want different styles for, depending on if it’s light vs dark mode. I’ve tried wrestling with it for a while but would appreciate some guidance :).

a simple example

I have a sample shortcode example.html in …/templates/shortcodes

<div class="unique_classname">
    {{ body }}
</div>

and within my …/sass directory I have its corresponding stylesheet example.scss:

.unique_classname {
    background-color: red;
}

The goal is to make the background colour different based on the light vs dark mode selected.

what I’ve tried so far (without success):

using @media doesn’t seem to work.

// Default styles for light mode
.unique_classname {
    background-color: red;
}
@media (prefers-color-scheme: dark) {
    .unique_classname {
        background-color: blue;
    }
}

Any help would be very much appreciated! Just getting into Zola and it’s been great so far.

In case anyone else encountered this, this worked for me :slight_smile:

:root:not(.switch) {
  /* Dark mode */
  --custom-bg: blue;
}

:root.switch {
  /* Light mode */
  --custom-bg: red;
}

.unique_classname {
  background-color: var(--custom-bg);
}