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

[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:

• 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.

[Thibaud Colas]

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

[Thibaud Colas]

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