#34399 closed Bug (invalid)

dark-mode-vars block is overwritten by extrastyles

Reported by: Timothy Fiss Owned by: nobody
Component: contrib.admin Version: 4.1
Severity: Normal Keywords: dark-mode-vars
Cc: Sarah Boyce Triage Stage: Unreviewed
Has patch: no Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no

Description

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.

Change History (2)

comment:1 by Mariusz Felisiak, 21 months ago

Cc: Sarah Boyce added

comment:2 by Mariusz Felisiak, 21 months ago

Resolution: invalid
Status: newclosed
Summary: admin site: dark-mode-vars block is overwritten by extrastylesdark-mode-vars block is overwritten by extrastyles

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.

Note: See TracTickets for help on using tickets.
Back to Top