diff --git a/dist/lite/markedit-preview.js b/dist/lite/markedit-preview.js
index 9ee70c2..25c599d 100644
--- a/dist/lite/markedit-preview.js
+++ b/dist/lite/markedit-preview.js
@@ -1730,7 +1730,7 @@ ${t.map(([o,u])=>`<tr><th scope="row">${n(o)}</th><td>${wt(u,n)}</td></tr>`).joi
 }
 
 .code-copy-button:hover {
-  background: var(--bgColor-neutral-muted, ButtonFace);
+  background: color-mix(in srgb, var(--fgColor-muted, GrayText) 10%, var(--bgColor-muted, Canvas));
 }
 
 .code-copy-button:active {
diff --git a/dist/markedit-preview.js b/dist/markedit-preview.js
index 3b7da0e..ade689d 100644
--- a/dist/markedit-preview.js
+++ b/dist/markedit-preview.js
@@ -1962,7 +1962,7 @@ ${r.map(([i,a])=>`<tr><th scope="row">${e(i)}</th><td>${j9(a,e)}</td></tr>`).joi
 }
 
 .code-copy-button:hover {
-  background: var(--bgColor-neutral-muted, ButtonFace);
+  background: color-mix(in srgb, var(--fgColor-muted, GrayText) 10%, var(--bgColor-muted, Canvas));
 }
 
 .code-copy-button:active {
diff --git a/styles/code-copy/base.css b/styles/code-copy/base.css
index 8dfdd03..fcbf61d 100644
--- a/styles/code-copy/base.css
+++ b/styles/code-copy/base.css
@@ -19,7 +19,7 @@
 }
 
 .code-copy-button:hover {
-  background: var(--bgColor-neutral-muted, ButtonFace);
+  background: color-mix(in srgb, var(--fgColor-muted, GrayText) 10%, var(--bgColor-muted, Canvas));
 }
 
 .code-copy-button:active {