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);
|
--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 {
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -2853,6 +2853,8 @@ creating your own ``AdminSite`` instance (see below), and changing the
|
||||||
Theming support
|
Theming support
|
||||||
===============
|
===============
|
||||||
|
|
||||||
|
.. versionadded:: 3.2
|
||||||
|
|
||||||
The admin uses CSS variables to define colors. This allows changing colors
|
The admin uses CSS variables to define colors. This allows changing colors
|
||||||
without having to override many individual CSS rules. For example, if you
|
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
|
preferred purple instead of blue you could add a ``admin/base.html`` template
|
||||||
|
@ -2873,7 +2875,12 @@ override to your project:
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% 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`.
|
:file:`django/contrib/admin/static/admin/css/base.css`.
|
||||||
|
|
||||||
``AdminSite`` objects
|
``AdminSite`` objects
|
||||||
|
|
|
@ -175,7 +175,8 @@ Minor features
|
||||||
* Read-only related fields are now rendered as navigable links if target models
|
* Read-only related fields are now rendered as navigable links if target models
|
||||||
are registered in the admin.
|
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:`.ModelAdmin.autocomplete_fields` now respects
|
||||||
:attr:`ForeignKey.to_field <django.db.models.ForeignKey.to_field>` and
|
:attr:`ForeignKey.to_field <django.db.models.ForeignKey.to_field>` and
|
||||||
|
|
Loading…
Reference in New Issue