#35145: Django admin’s dark theme should set color-scheme property for vanilla
HTML
components
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
color contrast, dark mode, dark | Unreviewed
theme |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Description changed by Thibaud Colas:
Old description:
> The Django admin uses unstyled vanilla HTML widgets for a few scenarios.
> Currently in the dark theme those elements are displayed with the
> browser’s default "light" UI – it would better if we instructed the
> browser to use their dark variant with the CSS `color-scheme` property.
>
> Here’s an example, where [https://developer.mozilla.org/en-
> US/docs/Web/CSS/color-scheme color-scheme] affects the search field’s
> clear button color and checkboxes, before/after:
>
>
> - For the clear button it’s almost invisible without this so is a clear
> accessibility issue / WCAG contrast fail
> - For the checkboxes it just looks better.
>
> This also affects file inputs, multi-select widgets, scrollbars, and I’m
> sure other parts of the UI.
>
> ---
>
> My suggested solution would be to add `color-scheme: dark` at the root
> level when in dark mode, but it might be worth researching a bit to make
> sure we use the property as well as possible.
New description:
The Django admin uses unstyled vanilla HTML widgets for a few scenarios.
Currently in the dark theme those elements are displayed with the
browser’s default "light" UI – it would better if we instructed the
browser to use their dark variant with the CSS `color-scheme` property.
Here’s an example, where [https://developer.mozilla.org/en-US/docs/Web/CSS
/color-scheme color-scheme] affects the search field’s clear button color
and checkboxes, before/after:
[[Image(https://code.djangoproject.com/raw-attachment/ticket/35145/color-
scheme-django.gif)]]
- For the clear button it’s almost invisible without this so is a clear
accessibility issue / WCAG contrast fail
- For the checkboxes it just looks better.
This also affects file inputs, multi-select widgets, scrollbars, and I’m
sure other parts of the UI.
---
My suggested solution would be to add `color-scheme: dark` at the root
level when in dark mode, but it might be worth researching a bit to make
sure we use the property as well as possible.
--
--
Ticket URL: <https://code.djangoproject.com/ticket/35145#comment:2>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/0107018d42b1785e-c9f7f901-4f30-444b-a00f-c87e42fe375b-000000%40eu-central-1.amazonses.com.
