diff --git a/docs/source/_templates/base.html b/docs/source/_templates/base.html
index 580a01028c..d5476e8216 100644
--- a/docs/source/_templates/base.html
+++ b/docs/source/_templates/base.html
@@ -71,7 +71,7 @@
 
     {#- Theme-related stylesheets -#}
     {%- block theme_styles %}
-    {% include "_head_css_variables.html" with context %}
+    {% include "head_css_variables.html" with context %}
     {%- endblock -%}
 
     {%- block extra_styles %}
diff --git a/docs/source/_templates/head_css_variables.html b/docs/source/_templates/head_css_variables.html
new file mode 100644
index 0000000000..9ff322f5f0
--- /dev/null
+++ b/docs/source/_templates/head_css_variables.html
@@ -0,0 +1,13 @@
+{#
+  This is where user-provided CSS variables get converted into actual values.
+#}
+{% macro declare_css_variables(user_customisations, pygments_theme) -%}
+  <link rel="stylesheet" href="{{ pathto('../_static/css/dark_light_mode.css', 1) }}">
+  --color-code-background: {{ pygments_theme.background }};
+  --color-code-foreground: {{ pygments_theme.foreground }};
+  {% if user_customisations -%}
+  {% for name, value in user_customisations.items() -%}
+    --{{ name }}: {{ value }};
+  {% endfor %}
+  {%- endif %}
+{%- endmacro %}