Fixed #31259 -- Added admin dark theme.
This commit is contained in:
parent
64cc9dcdad
commit
b5cef91a91
|
@ -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%;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue