diff --git a/docs/assets/styles/code-highlighter.css b/docs/assets/styles/code-highlighter.css
index 3c4fa6423..0158ebec1 100644
--- a/docs/assets/styles/code-highlighter.css
+++ b/docs/assets/styles/code-highlighter.css
@@ -1,10 +1,14 @@
+pre {
+  background-color: var(--wa-color-gray-20);
+  color: white;
+}
 .code-comment,
 .code-prolog,
 .code-doctype,
 .code-cdata,
 .code-operator,
 .code-punctuation {
-  color: var(--wa-color-base-40);
+  color: var(--wa-color-gray-70);
 }
 
 .code-namespace {
@@ -15,13 +19,13 @@
 .code-keyword,
 .code-tag,
 .code-url {
-  color: var(--wa-color-indigo-40);
+  color: var(--wa-color-indigo-70);
 }
 
 .code-symbol,
 .code-deleted,
 .code-important {
-  color: var(--wa-color-red-40);
+  color: var(--wa-color-red-70);
 }
 
 .code-boolean,
@@ -32,7 +36,7 @@
 .code-char,
 .code-builtin,
 .code-inserted {
-  color: var(--wa-color-green-40);
+  color: var(--wa-color-green-70);
 }
 
 .code-atrule,
@@ -42,7 +46,7 @@
 .code-function,
 .code-class-name,
 .code-regex {
-  color: var(--wa-color-blue-40);
+  color: var(--wa-color-blue-70);
 }
 
 .code-important,
diff --git a/docs/assets/styles/copy-code.css b/docs/assets/styles/copy-code.css
index b7154ae33..4929e279c 100644
--- a/docs/assets/styles/copy-code.css
+++ b/docs/assets/styles/copy-code.css
@@ -1,15 +1,16 @@
-.copy-button {
+wa-copy-button.copy-button {
+  --background-color: var(--wa-color-gray-20);
+  --background-color-hover: color-mix(in oklab, var(--background-color), white 5%);
   position: absolute;
   top: 0.25rem;
   right: 0.25rem;
   font-family: var(--wa-font-family-body);
-  color: var(--wa-color-neutral-on-normal);
-  background-color: var(--wa-color-neutral-fill-quiet);
+  color: var(--wa-color-gray-80);
   border-radius: var(--wa-border-radius-s);
   padding: 0.25rem;
 
   &:hover {
-    background-color: var(--wa-color-neutral-fill-normal);
+    color: white;
   }
 
   &:focus-visible {
diff --git a/src/components/copy-button/copy-button.styles.ts b/src/components/copy-button/copy-button.styles.ts
index 4aa06ae83..63b61828b 100644
--- a/src/components/copy-button/copy-button.styles.ts
+++ b/src/components/copy-button/copy-button.styles.ts
@@ -2,6 +2,7 @@ import { css } from 'lit';
 
 export default css`
   :host {
+    --background-color: transparent;
     --background-color-hover: var(--wa-color-neutral-fill-quiet);
     --error-color: var(--wa-color-danger-fill-loud);
     --success-color: var(--wa-color-success-fill-loud);
@@ -14,7 +15,7 @@ export default css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    background: none;
+    background-color: var(--background-color);
     border: none;
     border-radius: var(--wa-border-radius-s);
     color: inherit;
diff --git a/src/components/copy-button/copy-button.ts b/src/components/copy-button/copy-button.ts
index 045daf669..617b53c7c 100644
--- a/src/components/copy-button/copy-button.ts
+++ b/src/components/copy-button/copy-button.ts
@@ -38,6 +38,7 @@ import type WaTooltip from '../tooltip/tooltip.js';
  * @csspart tooltip__base__arrow - The tooltip's exported `arrow` part.
  * @csspart tooltip__body - The tooltip's exported `body` part.
  *
+ * @cssproperty --background-color - The color of the button's background.
  * @cssproperty --background-color-hover - The color of the button's background on hover.
  * @cssproperty --success-color - The color to use for success feedback.
  * @cssproperty --error-color - The color to use for error feedback.