diff --git a/src/js/app.js b/src/js/app.js
index 4cacf32..a2a4285 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -8,12 +8,12 @@ document.addEventListener("DOMContentLoaded", function (event) {
     const trigger = e.trigger
 
     if (trigger.hasAttribute("data-copy-feedback")) {
-      trigger.classList.add("gblog-post__codecopy--success")
+      trigger.classList.add("gblog-post__codecopy--success", "gblog-post__codecopy--out")
       trigger.querySelector(".gblog-icon.copy").classList.add("hidden")
       trigger.querySelector(".gblog-icon.check").classList.remove("hidden")
 
       setTimeout(function () {
-        trigger.classList.remove("gblog-post__codecopy--success")
+        trigger.classList.remove("gblog-post__codecopy--success", "gblog-post__codecopy--out")
         trigger.querySelector(".gblog-icon.copy").classList.remove("hidden")
         trigger.querySelector(".gblog-icon.check").classList.add("hidden")
       }, 3000)
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index 74885ac..96175ad 100644
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@@ -483,6 +483,10 @@ svg.gblog-icon {
         color: var(--code-copy-success-color);
       }
     }
+
+    &--out {
+      transition: visibility 2s ease-out;
+    }
   }
 }
 
diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss
index d2905e8..4b32636 100644
--- a/src/sass/_color_mode.scss
+++ b/src/sass/_color_mode.scss
@@ -119,9 +119,9 @@
   --code-accent-color-lite: #{darken($code-background-dark, 2)};
   --code-font-color: #{$code-font-color-dark};
 
-  --code-copy-background: #{$body-background-dark};
-  --code-copy-font-color: #{lighten($body-font-color, 24)};
-  --code-copy-border-color: #{lighten($body-font-color, 24)};
+  --code-copy-background: #{$code-background-dark};
+  --code-copy-font-color: #{darken($code-font-color-dark, 15)};
+  --code-copy-border-color: #{darken($code-font-color-dark, 20)};
   --code-copy-success-color: #{scale-color(map.get($hint-colors, "ok"), $alpha: -55%)};
 }
 
@@ -134,7 +134,7 @@
   --code-font-color: #{$code-font-color};
 
   --code-copy-background: #{$code-background};
-  --code-copy-font-color: #{lighten($body-font-color, 24)};
-  --code-copy-border-color: #{lighten($body-font-color, 48)};
+  --code-copy-font-color: #{lighten($code-font-color, 15)};
+  --code-copy-border-color: #{lighten($code-font-color, 20)};
   --code-copy-success-color: #{map.get($hint-colors, "ok")};
 }