Context Navigation

← Previous Ticket
Next Ticket →

#32018 closed New feature (fixed)

Themeing support for django.contrib.admin using CSS variables

Reported by:	Matthias Kestenholz	Owned by:	Matthias Kestenholz
Component:	contrib.admin	Version:	3.1
Severity:	Normal	Keywords:
Cc:		Triage Stage:	Ready for checkin
Has patch:	yes	Needs documentation:	no
Needs tests:	no	Patch needs improvement:	no
Easy pickings:	yes	UI/UX:	yes

Description

I propose using CSS variables for defining the colors used in the Django administration panel.

This should make it possible to replace the colors used inside the Django administration panel with a few lines of custom CSS and may also help with the further maintenance of third party apps such as https://github.com/fabiocaccamo/django-admin-interface/

The targeted browsers all support CSS variables, see https://docs.djangoproject.com/en/3.1/faq/admin/#what-browsers-are-supported-for-using-the-admin and https://caniuse.com/?search=css%20variables

This should also make it easier to reuse colors in third party apps.

Here's how this might look:
https://github.com/matthiask/django/compare/f3901b5899d746dc5b754115d94ce9a045b4db0a...matthiask:mk/admin-css-variables

(The final hunk in base.html would also belong into admin/css/base.css, but I have added the code elsewhere for the moment because it makes it easier to sed and grep my way through the changes.)

Change History (16)

comment:1 by Claude Paroz, 4 years ago

Triage Stage:	Unreviewed → Accepted

I think that's a good idea, also paving the way for future accessibility work.

comment:2 by Matthias Kestenholz, 4 years ago

Great!

I prepared a draft pull request here PR and added TODOs / discussion points.

comment:3 by Afonso Silva, 4 years ago

Owner:	changed from nobody to Afonso Silva
Status:	new → assigned

comment:4 by Afonso Silva, 4 years ago

Owner:	Afonso Silva removed
Status:	assigned → new

comment:5 by Matthias Kestenholz, 4 years ago

@Afonso Silva Feel free to chime in / review or even take over the pull request! (If you want to!)

comment:6 by Afonso Silva, 4 years ago

Thank you @Matthias Kestenholz I am new around here, should I comment here, or on the PR?

comment:7 by Matthias Kestenholz, 4 years ago

Has patch:	set
Owner:	set to Matthias Kestenholz
Status:	new → assigned

On the PR is fine (I think).

The PR is in much better shape now and I'd really like some feedback on it. I already got some (thanks!) but now would be a good time for some additional review.

I added some explanatory comments in the pull request description, too.

comment:8 by Carlton Gibson, 4 years ago

Needs documentation:	set

PR needs a squash, and rebase, and a release note — we should probably add a section showing how to apply a theme to the Admin Site docs.
I'll make Needs documentation for the moment.
Matthias please uncheck when you're done, and ready for another (last? 🙂) look.
Thanks.

comment:9 by Carlton Gibson, 4 years ago

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

comment:10 by GitHub <noreply@…>, 4 years ago

Resolution:	→ fixed
Status:	assigned → closed

In 0a80223:

Fixed #32018 -- Extracted admin colors into CSS variables.

Defined all colors used in the admin CSS as variables. Implemented the
following standardizations and accessibility improvements while at it:

Improved the contrast of text to not use ratios of less than 3:1 anymore.
Most hover states already used desaturated and darkened colors. Changed object tools to follow the same rule instead of showing the primary color on hover.

Various places used similar colors; those have been merged with the goal
of reducing the count of CSS variables. Contrasts have been improved in
a few places.

Many borders used slightly different colors (e.g. #eaeaea vs. #eee)
Help texts used #999, this has been changed to --body-quiet-color (#666) which has a better contrast.

Introduced fast color transitions on links and buttons.