#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 [email protected].
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.
