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 @@
{% block title %}{% endblock %}
+{% block dark-mode-vars %}
+
+{% endblock %}
{% if not is_popup and is_nav_sidebar_enabled %}
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:
{% 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 ` are now applied in a
+ separate stylesheet and template block.
:mod:`django.contrib.admindocs`
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~