fix copy

src/app.css

@@ -495,7 +495,7 @@ pre button.copy {
 	backdrop-filter: blur(8px);
 	-webkit-backdrop-filter: blur(8px);
 
-	@apply bg-background/80 hover:bg-background border-border hover:border-border/60 rounded-md border shadow-sm hover:shadow-md; /* Text color removed from here */
+	@apply bg-background/80 hover:bg-background border-border hover:border-border/60 hover:text-foreground rounded-md border shadow-sm hover:shadow-md;
 
 	/* Improved hover and focus states */
 	&:hover {
@@ -519,12 +519,14 @@ pre button.copy {
 		background-position: center;
 		background-size: contain;
 		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-		/* Default filter for light mode (assuming black/dark SVGs) */
+		background-color: transparent !important;
-		filter: brightness(0.2) sepia(1) saturate(5) hue-rotate(240deg); /* Adjust hue-rotate to match your muted-foreground */
+	}
+	& svg {
+		width: 16px;
+		height: 16px;
 	}
 
 	& .ready {
-		background-color: transparent;
 		background-image: url(/icons/copy.svg);
 	}
 
@@ -535,12 +537,8 @@ pre button.copy {
 	}
 
 	&.copied {
-		/* Light mode success state colors */
+		/* Light mode success state (dark blue text on light background) */
-		@apply bg-primary/10 border-primary/30;
+		@apply bg-primary/10 border-primary/30 text-primary;
-		/* Filter for success icon in light mode (e.g., primary color) */
-		& span {
-			filter: brightness(0.5) sepia(1) saturate(5) hue-rotate(240deg); /* Adjust to primary color */
-		}
 
 		& .success {
 			display: block;
@@ -553,21 +551,11 @@ pre button.copy {
 	}
 }
 
-/* Dark mode adjustments for copy button */
+/* Dark mode adjustments for copy button success state */
-.dark pre button.copy {
+.dark pre button.copy.copied {
-	& span {
+	/* Dark mode success state (light blue text on dark background) */
-		/* Filter for dark mode (turn icons white/light) */
+	@apply bg-primary/20 border-primary/40 text-primary-foreground;
-		filter: invert(1) brightness(1.2); /* Invert and brighten for white/light icons */
+	/* Using primary-foreground which is white/light for better visibility */
-	}
-
-	&.copied {
-		/* Dark mode success state colors */
-		@apply bg-primary/20 border-primary/40;
-		/* Filter for success icon in dark mode (e.g., primary-foreground color) */
-		& span {
-			filter: invert(1) brightness(1.2); /* Keep them white/light for dark mode success */
-		}
-	}
 }
 
 /* Copy success animation */

src/lib/utils/markdown-it.ts

@@ -19,6 +19,41 @@ md.use(
 				{
 					name: 'shiki-transformer-copy-button',
 					pre(node) {
+						const copyIcon = h(
+							'svg',
+							{
+								width: '24',
+								height: '24',
+								viewBox: '0 0 24 24',
+								fill: 'none',
+								stroke: 'currentColor',
+								'stroke-width': '2',
+								'stroke-linecap': 'round',
+								'stroke-linejoin': 'round',
+							},
+							[
+								h('rect', { width: '14', height: '14', x: '8', y: '8', rx: '2', ry: '2' }),
+								h('path', {
+									d: 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2',
+								}),
+							]
+						);
+
+						const checkIcon = h(
+							'svg',
+							{
+								width: '24',
+								height: '24',
+								viewBox: '0 0 24 24',
+								fill: 'none',
+								stroke: 'currentColor',
+								'stroke-width': '2',
+								'stroke-linecap': 'round',
+								'stroke-linejoin': 'round',
+							},
+							[h('path', { d: 'M20 6 9 17l-5-5' })]
+						);
+
 						const button = h(
 							'button',
 							{
@@ -30,7 +65,16 @@ md.use(
           setTimeout(() => this.classList.remove('copied'), ${3000})
         `,
 							},
-							[h('span', { class: 'ready' }), h('span', { class: 'success' })]
+							[
+								h('span', { class: 'ready', style: 'background-color: transparent !important;' }, [
+									copyIcon,
+								]),
+								h(
+									'span',
+									{ class: 'success', style: 'background-color: transparent !important;' },
+									[checkIcon]
+								),
+							]
 						);
 
 						node.children.push(button);

static/icons/copy-success.svg

@@ -1,2 +1,12 @@
-
+<svg
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5" /></svg
+>

static/icons/copy.svg

@@ -1 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="lucide lucide-copy-icon lucide-copy"
+	><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path
+		d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+	/></svg
+>