dark-mode-vars block is overwritten by extrastyles

[Timothy Fiss]

When themeing the admin site the dark-mode-vars block is overwritten by the extrastyle block. making styling both impossible

example:

{% block extrastyle %}{{ block.super }}
<style>
    :root {
      --primary: red; /*will style primary red*/
    }
</style>
{% endblock %}

{% block dark-mode-vars %}{{ block.super }}
<style>
    :root {
      --body-bg: green; /*will remain styled red in dark mode.*/
    }
</style> 
{% endblock %}

Also annoyingly styles applied in the "dark-mode-vars" block will leak to lightmode if they are not protected with the media prefers-color-scheme query.

This can be worked around by encasing the extrastyle styles in the "prefers-color-scheme: light" query, but if this is going to remain the behaviour the documentation should be updated to reflect it.

[Mariusz Felisiak]

When themeing the admin site the dark-mode-vars block is overwritten by the extrastyle block. making styling both impossible

That's not true, if you want to override both you have to use prefers-color-scheme media query. I'm not sure what we could do better here. Do you have any suggestions?

Also annoyingly styles applied in the "dark-mode-vars" block will leak to lightmode if they are not protected with the media prefers-color-scheme query.

I don't see anything wrong in it. Docs already mention that dark mode variables are in prefers-color-scheme media query.

This can be worked around by encasing the extrastyle styles in the "prefers-color-scheme: light" query.

That would be really confusing for users (as any other implicit logic). You can override colors for both (light and dark) modes in the extrastyle block now.

Thanks for the report, however, I don't see any issue here.