Improve the appearance of Copy Code

Author: cyanzhong

dist/lite/markedit-preview.js

@@ -67,7 +67,7 @@ export async function applyStyles(html: string) {
     stylify(coreCss(styledHtmlColorScheme)),
     stylify(previewThemeCss(styledHtmlColorScheme)),
     stylify(alertsCss(styledHtmlColorScheme)),
-    stylify(codeCopyCss(styledHtmlColorScheme)),
+    stylify(codeCopyCss()),
     '</body></html>',
   ];
 

dist/markedit-preview.js

@@ -29,8 +29,6 @@ import hljsBase from '../styles/hljs/base.css?raw';
 import hljsDark from '../styles/hljs/dark.css?raw';
 
 import codeCopyBase from '../styles/code-copy/base.css?raw';
-import codeCopyLight from '../styles/code-copy/light.css?raw';
-import codeCopyDark from '../styles/code-copy/dark.css?raw';
 
 export type PreviewTheme = typeof previewThemeNames[number];
 
@@ -116,13 +114,8 @@ export function hljsCss(colorScheme: ColorScheme = 'auto') {
   return createCss(colorScheme, hljsBase, hljsDark).join('\n');
 }
 
-export function codeCopyCss(colorScheme: ColorScheme = 'auto') {
-  const styles = [
-    codeCopyBase,
-    ...createCss(colorScheme, codeCopyLight, codeCopyDark),
-  ];
-
-  return styles.join('\n');
+export function codeCopyCss() {
+  return codeCopyBase;
 }
 
 function createCss(colorScheme: ColorScheme, lightCss: string, darkCss: string): string[] {

src/render.ts

@@ -8,11 +8,20 @@
   right: 6px;
   opacity: 0;
   transition: opacity 0.2s, background 0.2s;
-  border: none;
+  border: 1px solid var(--borderColor-default, ButtonBorder);
   border-radius: 8px;
   padding: 6px 7px;
-  background: none;
+  background: var(--bgColor-muted, Canvas);
+  color: var(--fgColor-muted, GrayText);
 
   /* Prevent elements from moving during opacity changes in Safari */
   will-change: opacity, background;
 }
+
+.code-copy-button:hover {
+  background: var(--bgColor-neutral-muted, ButtonFace);
+}
+
+.code-copy-button:active {
+  background: var(--borderColor-default, ButtonBorder);
+}