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.