feat: support dark-mode style.

Author: jaywcjlove

package.json

@@ -41,7 +41,7 @@
     ]
   },
   "dependencies": {
-    "@uiw/react-markdown-preview": "~3.5.1",
+    "@uiw/react-markdown-preview": "~4.0.3",
     "codemirror": "~5.65.2"
   },
   "devDependencies": {
@@ -53,6 +53,7 @@
     "@types/react-dom": "~17.0.13",
     "@uiw/react-github-corners": "~1.5.3",
     "@uiw/reset.css": "~1.0.6",
+    "@wcj/dark-mode": "~1.0.10",
     "compile-less-cli": "~1.8.11",
     "kkt": "~7.1.5",
     "prettier": "~2.5.1",

src/commands/preview.tsx

@@ -7,10 +7,12 @@ type Options = {
   container?: HTMLDivElement | null;
   containerEditor?: HTMLDivElement | null;
   editor?: CodeMirror.Editor;
-}
+};
 
-const Preview: React.FC<{ command: ICommand, editorProps: IMarkdownEditor & Options }> = (props) => {
-  const { editorProps: { preview, containerEditor } } = props;
+const Preview: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & Options }> = (props) => {
+  const {
+    editorProps: { preview, containerEditor },
+  } = props;
   const [visible, setVisible] = useState(props.editorProps.visible);
   useEffect(() => {
     setVisible(props.editorProps.visible);
@@ -23,40 +25,39 @@ const Preview: React.FC<{ command: ICommand, editorProps: IMarkdownEditor & Opti
     if (preview && visible) {
       preview.style.width = '50%';
       preview.style.overflow = 'auto';
-      preview.style.borderLeft = '1px solid #dfdfe0';
+      preview.style.borderLeft = '1px solid var(--color-border-muted)';
       preview.style.padding = '20px';
       if (containerEditor) {
-        containerEditor.style.width = '50%'
+        containerEditor.style.width = '50%';
       }
     } else if (preview) {
       preview.style.width = '0%';
       preview.style.overflow = 'hidden';
       preview.style.borderLeft = '0px';
       preview.style.padding = '0';
       if (containerEditor) {
-        containerEditor.style.width = '100%'
+        containerEditor.style.width = '100%';
       }
     }
   }, [preview, containerEditor, visible]);
 
   return (
-    <button
-      onClick={() => setVisible(!visible)}
-      type="button"
-      className={visible ? 'active' : ''}
-    >
+    <button onClick={() => setVisible(!visible)} type="button" className={visible ? 'active' : ''}>
       {props.command.icon}
     </button>
-  )
-}
+  );
+};
 
 export const preview: ICommand = {
   name: 'preview',
   keyCommand: 'preview',
   button: (command, props, opts) => <Preview command={command} editorProps={{ ...props, ...opts }} />,
   icon: (
     <svg width="16" height="16" viewBox="0 0 32 32">
-      <path fill="currentColor" d="M0 16c3.037-5.864 9.058-9.802 16-9.802s12.963 3.938 15.953 9.703l0.047 0.1c-3.037 5.864-9.058 9.802-16 9.802s-12.963-3.938-15.953-9.703l-0.047-0.1zM16 22.531c3.607 0 6.531-2.924 6.531-6.531s-2.924-6.531-6.531-6.531v0c-3.607 0-6.531 2.924-6.531 6.531s2.924 6.531 6.531 6.531v0zM16 19.265c-1.804 0-3.265-1.461-3.265-3.265s1.461-3.265 3.265-3.265v0c1.804 0 3.265 1.461 3.265 3.265s-1.461 3.265-3.265 3.265v0z" />
+      <path
+        fill="currentColor"
+        d="M0 16c3.037-5.864 9.058-9.802 16-9.802s12.963 3.938 15.953 9.703l0.047 0.1c-3.037 5.864-9.058 9.802-16 9.802s-12.963-3.938-15.953-9.703l-0.047-0.1zM16 22.531c3.607 0 6.531-2.924 6.531-6.531s-2.924-6.531-6.531-6.531v0c-3.607 0-6.531 2.924-6.531 6.531s2.924 6.531 6.531 6.531v0zM16 19.265c-1.804 0-3.265-1.461-3.265-3.265s1.461-3.265 3.265-3.265v0c1.804 0 3.265 1.461 3.265 3.265s-1.461 3.265-3.265 3.265v0z"
+      />
     </svg>
   ),
-};
+};