Opened 10 months ago

Closed 9 months ago

#35145 closed Bug (fixed)

Django admin’s dark theme should set color-scheme property for vanilla HTML components

Reported by: Thibaud Colas Owned by: Eliana Rosselli
Component: contrib.admin Version: 5.0
Severity: Normal Keywords: accessibility, color contrast, dark mode, dark theme
Cc: Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description (last modified by Thibaud Colas)

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 ​color-scheme affects the search field’s clear button color and checkboxes, before/after:

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.

Attachments (1)

color-scheme-django.gif​ (33.2 KB ) - added by Thibaud Colas 10 months ago.
Recording of color-scheme set to dark and unset in Django admin

Download all attachments as: .zip

Change History (8)

by Thibaud Colas, 10 months ago

Attachment: color-scheme-django.gif​ added

Recording of color-scheme set to dark and unset in Django admin

comment:1 by Thibaud Colas, 10 months ago

cc @erosselli who was interested in working on this (but please wait for it to be approved)

comment:2 by Thibaud Colas, 10 months ago

Description: modified (diff)

comment:3 by Mariusz Felisiak, 10 months ago

Triage Stage: Unreviewed → Accepted

comment:4 by Eliana Rosselli, 10 months ago

Owner: changed from nobody to Eliana Rosselli
Status: new → assigned

comment:5 by Natalia Bidart, 10 months ago

Has patch: set
Needs tests: set

comment:6 by Mariusz Felisiak, 9 months ago

Needs tests: unset
Triage Stage: Accepted → Ready for checkin

comment:7 by Mariusz Felisiak <felisiak.mariusz@…>, 9 months ago

Resolution: → fixed
Status: assigned → closed

In b47bdb4c:

Fixed #35145 -- Corrected color scheme of vanilla HTML widgets in admin.

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