webstie: 加明暗主题 (#135)

Author: SunLxy

package.json

@@ -39,10 +39,11 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
+    "@wcj/dark-mode": "^1.0.14",
     "@uiw/react-codesandbox": "^1.1.5",
     "@uiw/react-codepen": "^1.0.2",
     "markdown-react-code-preview-loader": "^2.1.2",
-    "react-code-preview-layout": "^2.0.4",
+    "react-code-preview-layout": "^2.0.6",
     "@kkt/less-modules": "~7.1.1",
     "@kkt/ncc": "~1.0.8",
     "@kkt/raw-modules": "~7.1.1",

website/App.css

@@ -20,4 +20,9 @@
 .App-header p {
   max-width: 702px;
   padding: 25px 0 27px;
-}
+}
+dark-mode {
+  position: fixed;
+  left: 10px;
+  top: 10px;
+}

website/App.tsx

@@ -3,10 +3,12 @@ import GitHubCorners from '@uiw/react-github-corners';
 import '@uiw/reset.css';
 import './App.css';
 import Page from './components/Markdown';
+import "@wcj/dark-mode"
 
 const App: React.FC = () => {
   return (
     <div className="App">
+      <dark-mode permanent></dark-mode>
       <GitHubCorners zIndex={9999} fixed href="https://github.com/uiwjs/react-split" />
       <header className="App-header">
         <h1 className="title">React Split</h1>

website/components/Markdown/index.tsx

@@ -30,9 +30,10 @@ const CodePreview: CodeComponent | ReactMarkdownNames = ({ inline, node, ...prop
     const code = data.data[metaId].value || '';
     const param = getURLParameters(meta);
     return (
-      <CodeLayout ref={$dom}
+      <CodeLayout
+        ref={$dom}
         toolbarExtra={getToolbarExtra(code, param.codePen === "true", param.codeSandbox === "true")}
-        toolbar={param.title || 'Example'} background={param.background} code={<pre {...rest} />} text={code}>
+        toolbar={param.title || 'Example'} background={"transparent"} code={<pre {...rest} />} text={code}>
         <Child />
       </CodeLayout>
     );