diff options
| author | Matteo Vitali <trottomv@gmail.com> | 2021-10-03 08:33:51 +0200 |
|---|---|---|
| committer | Carlton Gibson <carlton.gibson@noumenal.es> | 2021-10-27 10:34:01 +0200 |
| commit | 3f1f8b93760eee2f26eb84ddc4054f0c6b319da5 (patch) | |
| tree | c2c0a291ba0d41021a0003faa78dccbc1f0c9656 | |
| parent | 69af4d09bae7782f733e01b19cf69fa6f36d7165 (diff) | |
Fixed #33182 -- Moved admin dark mode vars to separate stylesheet and template block.
| -rw-r--r-- | django/contrib/admin/static/admin/css/base.css | 34 | ||||
| -rw-r--r-- | django/contrib/admin/static/admin/css/dark_mode.css | 33 | ||||
| -rw-r--r-- | django/contrib/admin/templates/admin/base.html | 3 | ||||
| -rw-r--r-- | docs/ref/contrib/admin/index.txt | 14 | ||||
| -rw-r--r-- | docs/releases/4.1.txt | 3 |
5 files changed, 48 insertions, 39 deletions
diff --git a/django/contrib/admin/static/admin/css/base.css b/django/contrib/admin/static/admin/css/base.css index 1cb3acdbe7..be00948032 100644 --- a/django/contrib/admin/static/admin/css/base.css +++ b/django/contrib/admin/static/admin/css/base.css @@ -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%; } diff --git a/django/contrib/admin/static/admin/css/dark_mode.css b/django/contrib/admin/static/admin/css/dark_mode.css new file mode 100644 index 0000000000..c8214e2124 --- /dev/null +++ b/django/contrib/admin/static/admin/css/dark_mode.css @@ -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; + } + } diff --git a/django/contrib/admin/templates/admin/base.html b/django/contrib/admin/templates/admin/base.html index 271f774fde..36899bc0d1 100644 --- a/django/contrib/admin/templates/admin/base.html +++ b/django/contrib/admin/templates/admin/base.html @@ -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> diff --git a/docs/ref/contrib/admin/index.txt b/docs/ref/contrib/admin/index.txt index 91f55628fd..fcc9227fad 100644 --- a/docs/ref/contrib/admin/index.txt +++ b/docs/ref/contrib/admin/index.txt @@ -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 ===================== diff --git a/docs/releases/4.1.txt b/docs/releases/4.1.txt index 0c133f24f1..1eba2b0539 100644 --- a/docs/releases/4.1.txt +++ b/docs/releases/4.1.txt @@ -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` ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |