Opened 21 months ago
Closed 21 months ago
#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 , 21 months ago
Cc: | added |
---|
comment:2 by , 21 months ago
Resolution: | → invalid |
---|---|
Status: | new → closed |
Summary: | admin site: dark-mode-vars block is overwritten by extrastyles → dark-mode-vars block is overwritten by extrastyles |
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?I don't see anything wrong in it. Docs already mention that dark mode variables are in
prefers-color-scheme
media 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.