diff --git a/src/app.css b/src/app.css
index b73bda8..9702b0d 100644
--- a/src/app.css
+++ b/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) */
- filter: brightness(0.2) sepia(1) saturate(5) hue-rotate(240deg); /* Adjust hue-rotate to match your muted-foreground */
+ background-color: transparent !important;
+ }
+ & 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 */
- @apply bg-primary/10 border-primary/30;
- /* 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 */
- }
+ /* Light mode success state (dark blue text on light background) */
+ @apply bg-primary/10 border-primary/30 text-primary;
& .success {
display: block;
@@ -553,21 +551,11 @@ pre button.copy {
}
}
-/* Dark mode adjustments for copy button */
-.dark pre button.copy {
- & span {
- /* Filter for dark mode (turn icons white/light) */
- filter: invert(1) brightness(1.2); /* Invert and brighten for white/light icons */
- }
-
- &.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 */
- }
- }
+/* Dark mode adjustments for copy button success state */
+.dark pre button.copy.copied {
+ /* Dark mode success state (light blue text on dark background) */
+ @apply bg-primary/20 border-primary/40 text-primary-foreground;
+ /* Using primary-foreground which is white/light for better visibility */
}
/* Copy success animation */
diff --git a/src/lib/utils/markdown-it.ts b/src/lib/utils/markdown-it.ts
index 12c3079..7030863 100644
--- a/src/lib/utils/markdown-it.ts
+++ b/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);
diff --git a/static/icons/copy-success.svg b/static/icons/copy-success.svg
index 428f4c8..0427b32 100644
--- a/static/icons/copy-success.svg
+++ b/static/icons/copy-success.svg
@@ -1,2 +1,12 @@
-
-
+
diff --git a/static/icons/copy.svg b/static/icons/copy.svg
index cf8ad9c..5f6461a 100644
--- a/static/icons/copy.svg
+++ b/static/icons/copy.svg
@@ -1 +1,15 @@
-
+