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.
This commit is contained in:
Matthias Kestenholz 2021-01-07 10:07:19 +01:00 committed by GitHub
parent 102d92fc09
commit 0a802233ec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 321 additions and 230 deletions

View file

@ -2802,6 +2802,34 @@ creating your own ``AdminSite`` instance (see below), and changing the
:attr:`AdminSite.index_template` , :attr:`AdminSite.login_template` or
:attr:`AdminSite.logout_template` properties.
.. _admin-theming:
Theming support
===============
The admin uses CSS variables to define colors. This allows changing colors
without having to override many individual CSS rules. For example, if you
preferred purple instead of blue you could add a ``admin/base.html`` template
override to your project:
.. code-block:: html+django
{% extends 'admin/base.html' %}
{% block extrahead %}{{ block.super }}
<style>
:root {
--primary: #9774d5;
--secondary: #785cab;
--link-fg: #7c449b;
--link-selected-fg: #8f5bb2;
}
</style>
{% endblock %}
An up-to-date list of CSS variables is at
:file:`django/contrib/admin/static/admin/css/base.css`.
``AdminSite`` objects
=====================