Fixed #31259 -- Added admin dark theme.

This commit is contained in:
mimi89999 2021-01-12 09:59:40 +01:00 committed by Carlton Gibson
parent 64cc9dcdad
commit b5cef91a91
3 changed files with 36 additions and 2 deletions

View File

@ -56,6 +56,32 @@
--object-tools-hover-bg: var(--close-button-hover-bg);
}
@media (prefers-color-scheme: dark) {
:root {
--primary: #264b5d;
--body-fg: #eeeeee;
--body-bg: #121212;
--body-quiet-color: #e0e0e0;
--body-loud-color: #ffffff;
--header-link-color: #eeeeee;
--breadcrumbs-link-fg: #e0e0e0;
--breadcrumbs-bg: var(--primary);
--link-fg: #81d4fa;
--link-hover-color: #4ac1f7;
--hairline-color: #272727;
--border-color: #353535;
--darkened-bg: #212121;
--selected-bg: #1b1b1b;
--selected-row: #00363a;
}
}
html, body {
height: 100%;
}

View File

@ -2853,6 +2853,8 @@ creating your own ``AdminSite`` instance (see below), and changing the
Theming support
===============
.. versionadded:: 3.2
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
@ -2873,7 +2875,12 @@ override to your project:
</style>
{% endblock %}
An up-to-date list of CSS variables is at
A dark theme is defined, and applied respecting the `prefers-color-scheme`_
media query.
.. _prefers-color-scheme: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
The list of CSS variables are defined at
:file:`django/contrib/admin/static/admin/css/base.css`.
``AdminSite`` objects

View File

@ -175,7 +175,8 @@ Minor features
* Read-only related fields are now rendered as navigable links if target models
are registered in the admin.
* The admin now supports theming. See :ref:`admin-theming` for more details.
* The admin now supports theming, and includes a dark theme that is enabled
according to browser settings. See :ref:`admin-theming` for more details.
* :attr:`.ModelAdmin.autocomplete_fields` now respects
:attr:`ForeignKey.to_field <django.db.models.ForeignKey.to_field>` and