feat: add theme props.

Author: jaywcjlove

package.json

@@ -55,9 +55,10 @@
     "@types/react": "~18.0.5",
     "@types/react-dom": "~18.0.1",
     "@types/react-test-renderer": "~18.0.0",
-    "@uiw/react-github-corners": "~1.5.3",
-    "@uiw/react-markdown-preview": "~3.5.1",
+    "@uiw/react-github-corners": "~1.5.14",
+    "@uiw/react-markdown-preview": "~4.0.6",
     "@uiw/reset.css": "~1.0.6",
+    "@wcj/dark-mode": "^1.0.14",
     "compile-less-cli": "~1.8.11",
     "husky": "~7.0.4",
     "kkt": "~7.1.5",
@@ -75,9 +76,9 @@
     "@babel/plugin-transform-classes": "~7.16.7",
     "@babel/runtime": "~7.17.2",
     "@babel/standalone": "~7.17.6",
-    "@codemirror/lang-javascript": "~0.19.7",
+    "@codemirror/lang-javascript": "^0.20.0",
     "@uiw/copy-to-clipboard": "~1.0.12",
-    "@uiw/react-codemirror": "~4.5.1",
+    "@uiw/react-codemirror": "~4.7.0",
     "@uiw/react-codepen": "~1.0.2",
     "@uiw/react-codesandbox": "~1.1.4",
     "@uiw/react-split": "~5.8.7",
@@ -101,4 +102,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/ThirdPartyButton.less

@@ -2,7 +2,6 @@ import React from 'react';
 import CodeSandbox, { CodeSandboxProps } from '@uiw/react-codesandbox';
 import Codepen from '@uiw/react-codepen';
 import { CodePreviewProps } from './';
-import './ThirdPartyButton.less';
 
 type ThirdPartyButtonProps = {
   prefixCls?: string;

src/ThirdPartyButton.tsx

@@ -1,14 +1,35 @@
 @w-code-preview:~ "w-code-preview";
 
+[data-color-mode*='light'],
+[data-color-mode*='light'] body {
+  --color-code-preview-bg: #fff3;
+  --color-code-preview-border: #d5d5d5;
+  --color-code-preview-hover: #838383;
+  --code-preview-text: #d5d5d5;
+}
+
+[data-color-mode*='dark'],
+[data-color-mode*='dark'] body {
+  --color-code-preview-border: #ffffff1a;
+  --color-code-preview-bg: #282c34;
+  --color-code-preview-hover: #9c9c9c;
+  --code-preview-text: #c9d1d9;
+}
+
 .@{w-code-preview} {
   &.w-split-horizontal > .w-split-bar {
     height: initial;
   }
+  > .w-split-bar {
+    background-color: var(--color-code-preview-bg) !important;
+    box-shadow: inset 1px 0 0 0 var(--color-code-preview-border), 1px 0 0 0 var(--color-code-preview-border) !important;
+  }
 }
+
 .@{w-code-preview} {
   border-radius: 3px;
   margin-bottom: 16px;
-  background-color: #fff;
+  background-color: var(--color-code-preview-bg);
   max-height: 420px;
   min-height: 12px;
   z-index: 10;
@@ -18,7 +39,6 @@
   }
   &-fullScreen {
     position: fixed;
-    background-color: #fff;
     border-radius: 0;
     border: 0;
     top: 0 !important;
@@ -87,7 +107,7 @@
     min-height: 80px;
     &-error {
       z-index: 2;
-      background: #fff;
+      background-color: var(--color-code-preview-bg);
       width: 100%;
       height: 100%;
       margin-bottom: 0 !important;
@@ -119,11 +139,9 @@
   }
   &-bar {
     cursor: pointer;
-    background-color: rgba(0, 0, 0, 0.03);
-    box-shadow: inset 1px 0 0 0 #d5d5d5;
+    box-shadow: inset 1px 0 0 0 var(--color-code-preview-border);
     padding: 3px 0 8px 0;
     margin: 0 auto;
-    color: rgba(0, 0, 0, 0.45);
     writing-mode: tb-rl;
     position: relative;
     display: flex;
@@ -141,9 +159,10 @@
       transition: all 0.3s;
       font-weight: bold;
       user-select: none;
+      color: var(--code-preview-text);
       flex: 1;
       &:hover {
-        color: #000;
+        color: var(--color-code-preview-hover);
       }
     }
     &-iconbtns {
@@ -154,10 +173,10 @@
     }
     svg {
       transition: all 0.3s;
-      fill: #9c9c9c;
+      fill: var(--code-preview-text);
       display: block;
       &:hover {
-        fill: #000;
+        fill: var(--color-code-preview-hover);
       }
     }
     &-copied svg,
@@ -169,3 +188,42 @@
     cursor: inherit;
   }
 }
+
+.@{w-code-preview} {
+  &-thirdparty + &-thirdparty {
+    margin-left: 10px;
+  }
+  &-thirdparty {
+    display: inline-block;
+    position: absolute;
+    white-space: nowrap;
+    line-height: 1;
+    z-index: 2;
+    right: 0;
+    top: -23px;
+    form {
+      display: block;
+    }
+    form + form {
+      margin-right: 5px;
+    }
+    button {
+      border: 0;
+      outline: 0;
+      cursor: pointer;
+      padding: 3px 4px 3px 4px;
+      border-radius: 3px;
+      transition: color 0.3s;
+      color: rgba(0, 0, 0, 0.45);
+      &:hover {
+        color: rgba(0, 0, 0, 0.85);
+      }
+      svg {
+        fill: var(--code-preview-text);
+      }
+      svg:not(:root) {
+        overflow: hidden;
+      }
+    }
+  }
+}

src/index.less

@@ -66,6 +66,11 @@ export interface CodePreviewProps extends SplitProps {
   btnText?: string;
   /** @default 'Hide Editor' */
   btnHideText?: string;
+  /**
+   * `light` / `dark` / `Extension` Defaults to `light`.
+   * @default light
+   */
+  theme?: ReactCodeMirrorProps['theme'];
 }
 
 export interface CodePreviewState {
@@ -86,6 +91,7 @@ const CodePreview = React.forwardRef<CodePreviewRef, CodePreviewProps>((props, r
     style,
     prefixCls = 'w-code-preview',
     className,
+    theme = 'light',
     editProps = {},
     codePenOption,
     codeSandboxOption,
@@ -214,6 +220,7 @@ const CodePreview = React.forwardRef<CodePreviewRef, CodePreviewProps>((props, r
             <CodeMirror
               value={(code || '').replace(/\n$/, '')}
               ref={editor}
+              theme={theme}
               extensions={[javascript({ jsx: true })]}
               {...editProps}
               style={{ height: '100%' }}

src/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import GitHubCorners from '@uiw/react-github-corners';
 import Markdown from '@uiw/react-markdown-preview';
+import '@wcj/dark-mode';
 import DocumentStr from '../README.md';
 import styles from './App.module.less';
 import Example from './Example';
@@ -12,6 +13,7 @@ export default function App() {
   if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '');
   return (
     <div className={styles.warpper}>
+      <dark-mode light="Light" dark="Dark" style={{ position: 'fixed', left: 10, top: 5 }}></dark-mode>
       <GitHubCorners fixed href="https://github.com/uiwjs/react-code-preview" target="__blank" />
       <h1 className={styles.title}>
         React Code Preview <sup>{version}</sup>

website/App.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react';
+import { Fragment, useState, useEffect } from 'react';
 import CodePreview from '../';
 import { Switch } from 'uiw';
 import * as UIW from 'uiw';
@@ -20,6 +20,7 @@ ReactDOM.render(
 );`;
 
 const Example = () => {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
   const [code] = useState(defaultCode);
   const [state, setState] = useState({
     bgWhite: false,
@@ -87,10 +88,19 @@ const Example = () => {
     const newstate = { ...state, [`${keyName}`]: e.target.checked };
     setState({ ...newstate });
   }
+
+  useEffect(() => {
+    setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
+    document.addEventListener('colorschemechange', (e: any) => {
+      setTheme(e.detail.colorScheme);
+    });
+  }, []);
+
   return (
     <Fragment>
       <CodePreview
         code={code}
+        theme={theme}
         dependencies={{ ...UIW }}
         bordered={state.bordered}
         noScroll={state.noScroll}