Opened 4 years ago

Closed 3 years ago

Last modified 3 years ago

#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: UnreviewedAccepted

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

comment:4 by Afonso Silva, 4 years ago

Owner: Afonso Silva removed
Status: assignednew

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

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, 3 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, 3 years ago

Needs documentation: unset
Triage Stage: AcceptedReady for checkin

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

Resolution: fixed
Status: assignedclosed

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.

comment:11 by GitHub <noreply@…>, 3 years ago

In cd3019b:

Refs #32018 -- Used --header-link-color for header links in admin.

comment:12 by GitHub <noreply@…>, 3 years ago

In 16d27fb:

Refs #32018 -- Corrected color variables for paginator and header links in admin.

Follow up to cd3019bc106eed27b2f97776e4dd9ec7cbac29b2.

comment:13 by GitHub <noreply@…>, 3 years ago

In 781acf09:

Refs #32018 -- Used --darkened-bg for <pre> elements.

comment:14 by Mariusz Felisiak <felisiak.mariusz@…>, 3 years ago

In f8aeafe8:

[3.2.x] Refs #32018 -- Used --darkened-bg for <pre> elements.

Backport of 781acf0987d80b638057ed1203409e3a19944e3b from main

comment:15 by GitHub <noreply@…>, 3 years ago

In 6f5dbe9:

Refs #32018 -- Corrected color variable for toggle links in admin.

Follow up to cd3019bc106eed27b2f97776e4dd9ec7cbac29b2.

comment:16 by Mariusz Felisiak <felisiak.mariusz@…>, 3 years ago

In 3119e3c5:

[3.2.x] Refs #32018 -- Corrected color variable for toggle links in admin.

Follow up to cd3019bc106eed27b2f97776e4dd9ec7cbac29b2.
Backport of 6f5dbe9dbe45b23b3befe4f1cd2ea13b6049ab96 from main

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