diff --git a/templates/base.html b/templates/base.html
index 50752830f..1a07dcf86 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -13,13 +13,12 @@
         <link rel="stylesheet" href="/-/static/vendored.css?{{ docsrs_version() | slugify }}" type="text/css" media="all" />
         <link rel="stylesheet" href="/-/static/style.css?{{ docsrs_version() | slugify }}" type="text/css" media="all" />
 
-        {%- block css -%}{%- endblock css -%}
-
         <link rel="search" href="/-/static/opensearch.xml" type="application/opensearchdescription+xml" title="Docs.rs" />
 
         <title>{%- block title -%} Docs.rs {%- endblock title -%}</title>
 
         <script type="text/javascript">{%- include "theme.js" -%}</script>
+        {%- block css -%}{%- endblock css -%}
     </head>
 
     <body>
diff --git a/templates/macros.html b/templates/macros.html
index 59b57d74f..cac4f54d4 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -22,8 +22,30 @@
 {# Makes the appropriate CSS imports for highlighting #}
 {% macro highlight_css() %}
     {# Load the highlighting theme css #}
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/github.min.css"
-        type="text/css" media="all" />
+    <script>
+        // Choose which highlight.js theme to load based on the user theme
+        var stylesheet;
+        switch(document.documentElement.dataset.theme) {
+            case "dark":
+            case "ayu":
+                stylesheet = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/dark.min.css";
+                break;
+            case "null": // The user is visiting docs.rs for the first time and hasn't set a theme yet.
+            case "light":
+                stylesheet = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/github.min.css";
+                break;
+            default:
+                throw "unrecognized theme " + document.documentElement.dataset.theme;
+                break;
+        }
+        // Now add the stylesheet to the document
+        var link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = stylesheet;
+        link.type = "text/css";
+        link.media = "all";
+        document.head.appendChild(link);
+    </script>
 {% endmacro highlight_css %}
 
 {#
diff --git a/templates/style/base.scss b/templates/style/base.scss
index 22d8ec0f6..d0b683d9b 100644
--- a/templates/style/base.scss
+++ b/templates/style/base.scss
@@ -97,7 +97,7 @@ body {
         border-bottom: 1px solid;
     }
     pre {
-        background-color: #F5F5F5;
+        background-color: var(--color-background-code);
         padding: 14px;
     }
     code, kbd, pre, samp {
