diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 1ba8d118b7644..1a75610310b39 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -1959,6 +1959,21 @@ in storage.js
 	overflow-x: hidden;
 }
 
+.scraped-example .example-wrap .rust span.highlight {
+	background: var(--scrape-example-code-line-highlight);
+}
+.scraped-example .example-wrap .rust span.highlight.focus {
+	background: var(--scrape-example-code-line-highlight-focus);
+}
+.scraped-example-list .scrape-help {
+	border-color: var(--scrape-example-help-border-color);
+	color: var(--scrape-example-help-color);
+}
+.scraped-example-list .scrape-help:hover {
+	border-color: var(--scrape-example-help-hover-border-color);
+	color: var(--scrape-example-help-hover-color);
+}
+
 .more-examples-toggle {
 	max-width: calc(100% + 25px);
 	margin-top: 10px;
diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
index 7d7bdfb92ce2d..979e7e0f999ed 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -91,6 +91,12 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--codeblock-link-background: #333;
 	--scrape-example-toggle-line-background: #999;
 	--scrape-example-toggle-line-hover-background: #c5c5c5;
+	--scrape-example-code-line-highlight: rgb(91, 59, 1);
+	--scrape-example-code-line-highlight-focus: rgb(124, 75, 15);
+	--scrape-example-help-border-color: #aaa;
+	--scrape-example-help-color: #eee;
+	--scrape-example-help-hover-border-color: #fff;
+	--scrape-example-help-hover-color: #fff;
 }
 
 h1, h2, h3, h4 {
@@ -198,20 +204,6 @@ above the `@media (max-width: 700px)` rules due to a bug in the css checker */
 	color: #ffb44c;
 }
 
-.scraped-example-list .scrape-help {
-	border-color: #aaa;
-	color: #eee;
-}
-.scraped-example-list .scrape-help:hover {
-	border-color: white;
-	color: white;
-}
-.scraped-example .example-wrap .rust span.highlight {
-	background: rgb(91, 59, 1);
-}
-.scraped-example .example-wrap .rust span.highlight.focus {
-	background: rgb(124, 75, 15);
-}
 .scraped-example:not(.expanded) .code-wrapper::before {
 	background: linear-gradient(to bottom, rgba(15, 20, 25, 1), rgba(15, 20, 25, 0));
 }
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
index 6dd15d2e1bbaa..fb15863b027ca 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -86,6 +86,12 @@
 	--codeblock-link-background: #333;
 	--scrape-example-toggle-line-background: #999;
 	--scrape-example-toggle-line-hover-background: #c5c5c5;
+	--scrape-example-code-line-highlight: rgb(91, 59, 1);
+	--scrape-example-code-line-highlight-focus: rgb(124, 75, 15);
+	--scrape-example-help-border-color: #aaa;
+	--scrape-example-help-color: #eee;
+	--scrape-example-help-hover-border-color: #fff;
+	--scrape-example-help-hover-color: #fff;
 }
 
 #search-tabs > button:not(.selected) {
@@ -98,20 +104,6 @@
 	background-color: #353535;
 }
 
-.scraped-example-list .scrape-help {
-	border-color: #aaa;
-	color: #eee;
-}
-.scraped-example-list .scrape-help:hover {
-	border-color: white;
-	color: white;
-}
-.scraped-example .example-wrap .rust span.highlight {
-	background: rgb(91, 59, 1);
-}
-.scraped-example .example-wrap .rust span.highlight.focus {
-	background: rgb(124, 75, 15);
-}
 .scraped-example:not(.expanded) .code-wrapper::before {
 	background: linear-gradient(to bottom, rgba(53, 53, 53, 1), rgba(53, 53, 53, 0));
 }
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index 804e20d0d44e9..053fa78d1dc58 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -83,6 +83,12 @@
 	--codeblock-link-background: #eee;
 	--scrape-example-toggle-line-background: #ccc;
 	--scrape-example-toggle-line-hover-background: #999;
+	--scrape-example-code-line-highlight: #fcffd6;
+	--scrape-example-code-line-highlight-focus: #f6fdb0;
+	--scrape-example-help-border-color: #555;
+	--scrape-example-help-color: #333;
+	--scrape-example-help-hover-border-color: #000;
+	--scrape-example-help-hover-color: #000;
 }
 
 #search-tabs > button:not(.selected) {
@@ -95,20 +101,6 @@
 	border-top-color: #0089ff;
 }
 
-.scraped-example-list .scrape-help {
-	border-color: #555;
-	color: #333;
-}
-.scraped-example-list .scrape-help:hover {
-	border-color: black;
-	color: black;
-}
-.scraped-example .example-wrap .rust span.highlight {
-	background: #fcffd6;
-}
-.scraped-example .example-wrap .rust span.highlight.focus {
-	background: #f6fdb0;
-}
 .scraped-example:not(.expanded) .code-wrapper::before {
 	background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
 }
diff --git a/src/test/rustdoc-gui/scrape-examples-color.goml b/src/test/rustdoc-gui/scrape-examples-color.goml
new file mode 100644
index 0000000000000..360e2af8ba427
--- /dev/null
+++ b/src/test/rustdoc-gui/scrape-examples-color.goml
@@ -0,0 +1,60 @@
+// Check that scrape example code blocks have the expected colors.
+goto: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html"
+show-text: true
+
+define-function: (
+    "check-colors",
+    (theme, highlight, highlight_focus, help_border, help_color, help_hover_border,
+     help_hover_color),
+    [
+        ("local-storage", { "rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false", }),
+        ("reload"),
+        ("wait-for", ".more-examples-toggle"),
+        ("assert-css", (".scraped-example .example-wrap .rust span.highlight:not(.focus)", {
+            "background-color": |highlight|,
+        }, ALL)),
+        ("assert-css", (".scraped-example .example-wrap .rust span.highlight.focus", {
+            "background-color": |highlight_focus|,
+        }, ALL)),
+
+        ("assert-css", (".scraped-example-list .scrape-help", {
+            "border-color": |help_border|,
+            "color": |help_color|,
+        })),
+        ("move-cursor-to", ".scraped-example-list .scrape-help"),
+        ("assert-css", (".scraped-example-list .scrape-help:hover", {
+            "border-color": |help_hover_border|,
+            "color": |help_hover_color|,
+        })),
+        // Moving the cursor to another item to not break next runs.
+        ("move-cursor-to", ".search-input"),
+    ]
+)
+
+call-function: ("check-colors", {
+    "theme": "ayu",
+    "highlight": "rgb(91, 59, 1)",
+    "highlight_focus": "rgb(124, 75, 15)",
+    "help_border": "rgb(170, 170, 170)",
+    "help_color": "rgb(238, 238, 238)",
+    "help_hover_border": "rgb(255, 255, 255)",
+    "help_hover_color": "rgb(255, 255, 255)",
+})
+call-function: ("check-colors", {
+    "theme": "dark",
+    "highlight": "rgb(91, 59, 1)",
+    "highlight_focus": "rgb(124, 75, 15)",
+    "help_border": "rgb(170, 170, 170)",
+    "help_color": "rgb(238, 238, 238)",
+    "help_hover_border": "rgb(255, 255, 255)",
+    "help_hover_color": "rgb(255, 255, 255)",
+})
+call-function: ("check-colors", {
+    "theme": "light",
+    "highlight": "rgb(252, 255, 214)",
+    "highlight_focus": "rgb(246, 253, 176)",
+    "help_border": "rgb(85, 85, 85)",
+    "help_color": "rgb(51, 51, 51)",
+    "help_hover_border": "rgb(0, 0, 0)",
+    "help_hover_color": "rgb(0, 0, 0)",
+})