[Django] #32018: Themeing support for django.contrib.admin using CSS variables
Django
-----------------------------------------------+------------------------
Reporter: Matthias Kestenholz | Owner: nobody
Type: New feature | Status: new
Component: contrib.admin | Version: 3.1
Severity: Normal | Keywords:
Triage Stage: Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 1
UI/UX: 1 |
-----------------------------------------------+------------------------
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.)
--
Ticket URL: <https://code.djangoproject.com/ticket/32018>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
Reporter: Matthias Kestenholz | Owner: nobody
Type: New feature | Status: new
Component: contrib.admin | Version: 3.1
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Changes (by Claude Paroz):
* stage: Unreviewed => Accepted
Comment:
I think that's a good idea, also paving the way for future accessibility
work.
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:1>
Django
Reporter: Matthias Kestenholz | Owner: nobody
Type: New feature | Status: new
Component: contrib.admin | Version: 3.1
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Comment (by Matthias Kestenholz):
Great!
I prepared a draft pull request here
[https://github.com/django/django/pull/13435 PR] and added TODOs /
discussion points.
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:2>
Django
Reporter: Matthias Kestenholz | Owner: Afonso
| Silva
Type: New feature | Status: assigned
Component: contrib.admin | Version: 3.1
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Changes (by Afonso Silva):
* owner: nobody => Afonso Silva
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:3>
Django
Reporter: Matthias Kestenholz | Owner: (none)
Type: New feature | Status: new
Component: contrib.admin | Version: 3.1
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Changes (by Afonso Silva):
* owner: Afonso Silva => (none)
* status: assigned => new
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:4>
Django
Reporter: Matthias Kestenholz | Owner: (none)
Component: contrib.admin | Version: 3.1
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Comment (by Matthias Kestenholz):
@Afonso Silva Feel free to chime in / review or even take over the pull
request! (If you want to!)
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:5>
Django
Reporter: Matthias Kestenholz | Owner: (none)
Component: contrib.admin | Version: 3.1
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Comment (by Afonso Silva):
Thank you @Matthias Kestenholz I am new around here, should I comment
here, or on the PR?
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:6>
Django
Reporter: Matthias Kestenholz | Owner: Matthias
| Kestenholz
Type: New feature | Status: assigned
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Changes (by Matthias Kestenholz):
* owner: (none) => Matthias Kestenholz
* status: new => assigned
* has_patch: 0 => 1
Comment:
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.
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:7>
Django
Reporter: Matthias Kestenholz | Owner: Matthias
| Kestenholz
Type: New feature | Status: assigned
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Changes (by Carlton Gibson):
* needs_docs: 0 => 1
Comment:
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.
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:8>
Django
Reporter: Matthias Kestenholz | Owner: Matthias
| Kestenholz
Type: New feature | Status: assigned
Severity: Normal | Resolution:
Keywords: | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Changes (by Carlton Gibson):
* needs_docs: 1 => 0
* stage: Accepted => Ready for checkin
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:9>
Django
Reporter: Matthias Kestenholz | Owner: Matthias
| Kestenholz
Component: contrib.admin | Version: 3.1
Severity: Normal | Resolution: fixed
Keywords: | Triage Stage: Ready for
| checkin
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Changes (by GitHub <noreply@…>):
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"0a802233ec1421e5e59a486be69daef9b112fd0d" 0a80223]:
{{{
#!CommitTicketReference repository=""
revision="0a802233ec1421e5e59a486be69daef9b112fd0d"
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.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:10>
Django
Reporter: Matthias Kestenholz | Owner: Matthias
| Kestenholz
Type: New feature | Status: closed
Severity: Normal | Resolution: fixed
Keywords: | Triage Stage: Ready for
| checkin
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Comment (by GitHub <noreply@…>):
In [changeset:"cd3019bc106eed27b2f97776e4dd9ec7cbac29b2" cd3019b]:
{{{
#!CommitTicketReference repository=""
revision="cd3019bc106eed27b2f97776e4dd9ec7cbac29b2"
Refs #32018 -- Used --header-link-color for header links in admin.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:11>
Django
Reporter: Matthias Kestenholz | Owner: Matthias
| Kestenholz
Type: New feature | Status: closed
Severity: Normal | Resolution: fixed
Keywords: | Triage Stage: Ready for
| checkin
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Comment (by GitHub <noreply@…>):
In [changeset:"16d27fb8064bf33141a54d16f609b62e4e187755" 16d27fb]:
{{{
#!CommitTicketReference repository=""
revision="16d27fb8064bf33141a54d16f609b62e4e187755"
Refs #32018 -- Corrected color variables for paginator and header links in
admin.
Follow up to cd3019bc106eed27b2f97776e4dd9ec7cbac29b2.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:12>
Django
Reporter: Matthias Kestenholz | Owner: Matthias
| Kestenholz
Type: New feature | Status: closed
Severity: Normal | Resolution: fixed
Keywords: | Triage Stage: Ready for
| checkin
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Comment (by GitHub <noreply@…>):
In [changeset:"781acf0987d80b638057ed1203409e3a19944e3b" 781acf09]:
{{{
#!CommitTicketReference repository=""
revision="781acf0987d80b638057ed1203409e3a19944e3b"
Refs #32018 -- Used --darkened-bg for <pre> elements.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:13>
Django
Reporter: Matthias Kestenholz | Owner: Matthias
| Kestenholz
Type: New feature | Status: closed
Severity: Normal | Resolution: fixed
Keywords: | Triage Stage: Ready for
| checkin
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Comment (by Mariusz Felisiak <felisiak.mariusz@…>):
In [changeset:"f8aeafe851f1a7cc4534fca2b26f44f44af91dee" f8aeafe8]:
{{{
#!CommitTicketReference repository=""
revision="f8aeafe851f1a7cc4534fca2b26f44f44af91dee"
[3.2.x] Refs #32018 -- Used --darkened-bg for <pre> elements.
Backport of 781acf0987d80b638057ed1203409e3a19944e3b from main
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:14>
Django
Reporter: Matthias Kestenholz | Owner: Matthias
| Kestenholz
Type: New feature | Status: closed
Severity: Normal | Resolution: fixed
Keywords: | Triage Stage: Ready for
| checkin
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Comment (by GitHub <noreply@…>):
In [changeset:"6f5dbe9dbe45b23b3befe4f1cd2ea13b6049ab96" 6f5dbe9]:
{{{
#!CommitTicketReference repository=""
revision="6f5dbe9dbe45b23b3befe4f1cd2ea13b6049ab96"
Refs #32018 -- Corrected color variable for toggle links in admin.
Follow up to cd3019bc106eed27b2f97776e4dd9ec7cbac29b2.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:15>
Django
Reporter: Matthias Kestenholz | Owner: Matthias
| Kestenholz
Type: New feature | Status: closed
Severity: Normal | Resolution: fixed
Keywords: | Triage Stage: Ready for
| checkin
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
Comment (by Mariusz Felisiak <felisiak.mariusz@…>):
In [changeset:"3119e3c5c7ff53f9ece14c162acb94e20cc6c4e5" 3119e3c5]:
{{{
#!CommitTicketReference repository=""
revision="3119e3c5c7ff53f9ece14c162acb94e20cc6c4e5"
[3.2.x] Refs #32018 -- Corrected color variable for toggle links in admin.
Follow up to cd3019bc106eed27b2f97776e4dd9ec7cbac29b2.
Backport of 6f5dbe9dbe45b23b3befe4f1cd2ea13b6049ab96 from main
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32018#comment:16>