[Django] #35145: Django admin’s dark theme should set color-scheme property for vanilla HTML components
Django
components
-------------------------------------+-------------------------------------
Reporter: Thibaud | Owner: nobody
Colas |
Type: Bug | Status: new
Component: | Version: 5.0
contrib.admin | Keywords: accessibility,
Severity: Normal | color contrast, dark mode, dark
Triage Stage: | theme
Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-------------------------------------+-------------------------------------
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.
--
Ticket URL: <https://code.djangoproject.com/ticket/35145>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
components
-------------------------------------+-------------------------------------
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
-------------------------------------+-------------------------------------
* Attachment "color-scheme-django.gif" added.
Recording of color-scheme set to dark and unset in Django admin
Django
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
-------------------------------------+-------------------------------------
cc @erosselli who was interested in working on this (but please wait for
it to be approved)
--
Ticket URL: <https://code.djangoproject.com/ticket/35145#comment:1>
Django
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
-------------------------------------+-------------------------------------
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
components
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
color contrast, dark mode, dark |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* stage: Unreviewed => Accepted
--
Ticket URL: <https://code.djangoproject.com/ticket/35145#comment:3>
Django
components
-------------------------------------+-------------------------------------
| Rosselli
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, dark mode, dark |
theme |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: nobody => Eliana Rosselli
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/35145#comment:4>
Django
components
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Eliana
| Rosselli
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, dark mode, dark |
theme |
Needs tests: 1 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* has_patch: 0 => 1
* needs_tests: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/35145#comment:5>
Django
components
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Eliana
| Rosselli
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
color contrast, dark mode, dark | checkin
theme |
Has patch: 1 | Needs documentation: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* needs_tests: 1 => 0
* stage: Accepted => Ready for checkin
--
Ticket URL: <https://code.djangoproject.com/ticket/35145#comment:6>
Django
components
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Eliana
| Rosselli
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution: fixed
Keywords: accessibility, | Triage Stage: Ready for
color contrast, dark mode, dark | checkin
theme |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"b47bdb4cd9149ee2a39bf1cc9996a36a940bd7d9" b47bdb4c]:
{{{#!CommitTicketReference repository=""
revision="b47bdb4cd9149ee2a39bf1cc9996a36a940bd7d9"
Fixed #35145 -- Corrected color scheme of vanilla HTML widgets in admin.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/35145#comment:7>