mirror of https://github.com/django/django.git
Fixed #33182 -- Moved admin dark mode vars to separate stylesheet and template block.
This commit is contained in:
Matteo Vitali
Carlton Gibson
parent
69af4d09ba
commit
3f1f8b9376
|
|
@ -57,40 +57,6 @@
|
||||||
--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;
|
|
||||||
--primary-fg: #eee;
|
|
||||||
|
|
||||||
--body-fg: #eeeeee;
|
|
||||||
--body-bg: #121212;
|
|
||||||
--body-quiet-color: #e0e0e0;
|
|
||||||
--body-loud-color: #ffffff;
|
|
||||||
|
|
||||||
--breadcrumbs-link-fg: #e0e0e0;
|
|
||||||
--breadcrumbs-bg: var(--primary);
|
|
||||||
|
|
||||||
--link-fg: #81d4fa;
|
|
||||||
--link-hover-color: #4ac1f7;
|
|
||||||
--link-selected-fg: #6f94c6;
|
|
||||||
|
|
||||||
--hairline-color: #272727;
|
|
||||||
--border-color: #353535;
|
|
||||||
|
|
||||||
--error-fg: #e35f5f;
|
|
||||||
--message-success-bg: #006b1b;
|
|
||||||
--message-warning-bg: #583305;
|
|
||||||
--message-error-bg: #570808;
|
|
||||||
|
|
||||||
--darkened-bg: #212121;
|
|
||||||
--selected-bg: #1b1b1b;
|
|
||||||
--selected-row: #00363a;
|
|
||||||
|
|
||||||
--close-button-bg: #333333;
|
|
||||||
--close-button-hover-bg: #666666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--primary: #264b5d;
|
||||||
|
--primary-fg: #eee;
|
||||||
|
|
||||||
|
--body-fg: #eeeeee;
|
||||||
|
--body-bg: #121212;
|
||||||
|
--body-quiet-color: #e0e0e0;
|
||||||
|
--body-loud-color: #ffffff;
|
||||||
|
|
||||||
|
--breadcrumbs-link-fg: #e0e0e0;
|
||||||
|
--breadcrumbs-bg: var(--primary);
|
||||||
|
|
||||||
|
--link-fg: #81d4fa;
|
||||||
|
--link-hover-color: #4ac1f7;
|
||||||
|
--link-selected-fg: #6f94c6;
|
||||||
|
|
||||||
|
--hairline-color: #272727;
|
||||||
|
--border-color: #353535;
|
||||||
|
|
||||||
|
--error-fg: #e35f5f;
|
||||||
|
--message-success-bg: #006b1b;
|
||||||
|
--message-warning-bg: #583305;
|
||||||
|
--message-error-bg: #570808;
|
||||||
|
|
||||||
|
--darkened-bg: #212121;
|
||||||
|
--selected-bg: #1b1b1b;
|
||||||
|
--selected-row: #00363a;
|
||||||
|
|
||||||
|
--close-button-bg: #333333;
|
||||||
|
--close-button-hover-bg: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -4,6 +4,9 @@
|
||||||
<head>
|
<head>
|
||||||
<title>{% block title %}{% endblock %}</title>
|
<title>{% block title %}{% endblock %}</title>
|
||||||
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
|
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
|
||||||
|
{% block dark-mode-vars %}
|
||||||
|
<link rel="stylesheet" type="text/css" href="{% static "admin/css/dark_mode.css" %}">
|
||||||
|
{% endblock %}
|
||||||
{% if not is_popup and is_nav_sidebar_enabled %}
|
{% if not is_popup and is_nav_sidebar_enabled %}
|
||||||
<link rel="stylesheet" type="text/css" href="{% static "admin/css/nav_sidebar.css" %}">
|
<link rel="stylesheet" type="text/css" href="{% static "admin/css/nav_sidebar.css" %}">
|
||||||
<script src="{% static 'admin/js/nav_sidebar.js' %}" defer></script>
|
<script src="{% static 'admin/js/nav_sidebar.js' %}" defer></script>
|
||||||
|
|
|
||||||
|
|
@ -2848,13 +2848,19 @@ override to your project:
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
A dark theme is defined, and applied respecting the `prefers-color-scheme`_
|
The list of CSS variables are defined at
|
||||||
media query.
|
:file:`django/contrib/admin/static/admin/css/base.css`.
|
||||||
|
|
||||||
|
Dark mode variables, respecting the `prefers-color-scheme`_ media query, are
|
||||||
|
defined at :file:`django/contrib/admin/static/admin/css/dark_mode.css`. This is
|
||||||
|
linked to the document in ``{% block dark-mode-vars %}``.
|
||||||
|
|
||||||
.. _prefers-color-scheme: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
|
.. _prefers-color-scheme: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
|
||||||
|
|
||||||
The list of CSS variables are defined at
|
.. versionchanged:: 4.1
|
||||||
:file:`django/contrib/admin/static/admin/css/base.css`.
|
|
||||||
|
The dark mode variables were moved to a separate stylesheet and template
|
||||||
|
block.
|
||||||
|
|
||||||
``AdminSite`` objects
|
``AdminSite`` objects
|
||||||
=====================
|
=====================
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,8 @@ Minor features
|
||||||
:mod:`django.contrib.admin`
|
:mod:`django.contrib.admin`
|
||||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||||
|
|
||||||
* ...
|
* The admin :ref:`dark mode CSS variables <admin-theming>` are now applied in a
|
||||||
|
separate stylesheet and template block.
|
||||||
|
|
||||||
:mod:`django.contrib.admindocs`
|
:mod:`django.contrib.admindocs`
|
||||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue