p15693087
/
django
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed #33182 -- Moved admin dark mode vars to separate stylesheet and template block.

This commit is contained in:
Matteo Vitali 2021-10-03 08:33:51 +02:00 committed by Carlton Gibson
parent 69af4d09ba
commit 3f1f8b9376
5 changed files with 48 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
django/contrib/admin/static/admin/css/base.css
View File

@ -57,40 +57,6 @@
--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 {
height: 100%;
}

33
django/contrib/admin/static/admin/css/dark_mode.css Normal file
View File

@ -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;
}
}

3
django/contrib/admin/templates/admin/base.html
View File

@ -4,6 +4,9 @@
<head>
<title>{% block title %}{% endblock %}</title>
<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 %}
<link rel="stylesheet" type="text/css" href="{% static "admin/css/nav_sidebar.css" %}">
<script src="{% static 'admin/js/nav_sidebar.js' %}" defer></script>

14
docs/ref/contrib/admin/index.txt
View File

@ -2848,13 +2848,19 @@ override to your project:
</style>
{% endblock %}
A dark theme is defined, and applied respecting the `prefers-color-scheme`_
media query.
The list of CSS variables are defined at
: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
The list of CSS variables are defined at
:file:`django/contrib/admin/static/admin/css/base.css`.
.. versionchanged:: 4.1
The dark mode variables were moved to a separate stylesheet and template
block.
``AdminSite`` objects
=====================

3
docs/releases/4.1.txt
View File

@ -32,7 +32,8 @@ Minor features
: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`
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~