From ff10fb8c67390de2410592472c6346a0b6890403 Mon Sep 17 00:00:00 2001
From: SunLxy <1011771396@qq.com>
Date: Sat, 9 Jul 2022 13:22:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=8A=A0=E6=98=8E=E6=9A=97=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                          | 3 ++-
 website/App.css                       | 7 ++++++-
 website/App.tsx                       | 2 ++
 website/components/Markdown/index.tsx | 5 +++--
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 0f21a6db..a106f3dc 100644
--- a/package.json
+++ b/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",
diff --git a/website/App.css b/website/App.css
index e545b7ad..4d4accea 100644
--- a/website/App.css
+++ b/website/App.css
@@ -20,4 +20,9 @@
 .App-header p {
   max-width: 702px;
   padding: 25px 0 27px;
-}
\ No newline at end of file
+}
+dark-mode {
+  position: fixed;
+  left: 10px;
+  top: 10px;
+}
diff --git a/website/App.tsx b/website/App.tsx
index 7099f9a9..66a321fe 100644
--- a/website/App.tsx
+++ b/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>
diff --git a/website/components/Markdown/index.tsx b/website/components/Markdown/index.tsx
index 3f1cb8be..9fea08ee 100644
--- a/website/components/Markdown/index.tsx
+++ b/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>
     );