diff --git a/src/theme/Playground/components/copy-button.jsx b/src/theme/Playground/components/copy-button.jsx
index c59a2d50..730b88c5 100644
--- a/src/theme/Playground/components/copy-button.jsx
+++ b/src/theme/Playground/components/copy-button.jsx
@@ -1,14 +1,22 @@
 import { useState } from "react";
+import { useColorMode } from "@docusaurus/theme-common";
+import "../styles.module.css";
 
 const CopyButton = ({ text }) => {
   const [isCopied, setIsCopied] = useState(false);
+  const { colorMode } = useColorMode();
+
   return (
     <>
       <button
         type="button"
         aria-label="Copy code to clipboard"
         title="Copy"
-        className="clean-btn"
+        style={{
+          backgroundColor: "transparent",
+          border: "none",
+          cursor: "pointer",
+        }}
         onClick={() => {
           navigator.clipboard.writeText(text).then(() => {
             setIsCopied(true);
@@ -16,38 +24,22 @@ const CopyButton = ({ text }) => {
           });
         }}
       >
-        <span
-          className="copyButtonIcons_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"
-          style={{ display: "inline-block" }}
-          aria-hidden="true"
-        >
+        <span style={{ display: "inline-block" }} aria-hidden="true">
           {!isCopied ? (
             <>
-              <svg
-                viewBox="0 0 24 24"
-                className="copyButtonIcon_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"
-              >
+              <svg style={{ maxWidth: "24px", maxHeight: "24px" }}>
                 <path
-                  fill="currentColor"
+                  fill={colorMode === "dark" ? "#000" : "#fff"}
                   d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
                 ></path>
               </svg>
-              <svg
-                viewBox="0 0 24 24"
-                className="copyButtonSuccessIcon_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"
-              >
-                <path
-                  fill="currentColor"
-                  d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
-                ></path>
-              </svg>
             </>
           ) : (
             <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              className="copyButtonIcon_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"
+              fill={colorMode === "dark" ? "#000" : "#fff"}
+              width="24px"
+              height="24px"
+              style={{ maxWidth: "24px", maxHeight: "24px" }}
             >
               <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
             </svg>
diff --git a/src/theme/Playground/styles.module.css b/src/theme/Playground/styles.module.css
index d107439f..47338bfc 100644
--- a/src/theme/Playground/styles.module.css
+++ b/src/theme/Playground/styles.module.css
@@ -31,3 +31,29 @@
   padding: 1rem;
   background-color: var(--ifm-pre-background);
 }
+
+.copyButtonIconWrapper {
+  position: relative;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.copyButtonIcon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  fill: currentColor;
+  opacity: inherit;
+  width: inherit;
+  height: inherit;
+  transition: all var(--ifm-transition-fast) ease;
+}
+
+.copyButton {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 0;
+}