fix(docs): dark mode example code theme (#966)

apps/docs/components/code-preview/index.tsx

@@ -5,6 +5,7 @@
 
 import { FC } from 'react';
 
+import { useDark } from '@rspress/core/dist/runtime.js';
 import { Sandpack } from '@codesandbox/sandpack-react';
 
 interface CodePreviewProps {
@@ -12,43 +13,49 @@ interface CodePreviewProps {
   activeFile?: string;
 }
 
-export const CodePreview: FC<CodePreviewProps> = ({ files, activeFile }) => (
-  <Sandpack
-    files={files}
-    theme="light"
-    template="react-ts"
-    customSetup={{
-      dependencies: {
-        '@flowgram.ai/free-layout-editor': '0.5.5',
-        '@flowgram.ai/free-snap-plugin': '0.5.5',
-        '@flowgram.ai/minimap-plugin': '0.5.5',
-        'styled-components': '5.3.11',
-      },
-    }}
-    options={{
-      editorHeight: 350,
-      activeFile,
-    }}
-  />
-);
+export const CodePreview: FC<CodePreviewProps> = ({ files, activeFile }) => {
+  const dark = useDark();
+  return (
+    <Sandpack
+      files={files}
+      theme={dark ? 'dark' : 'light'}
+      template="react-ts"
+      customSetup={{
+        dependencies: {
+          '@flowgram.ai/free-layout-editor': '0.5.5',
+          '@flowgram.ai/free-snap-plugin': '0.5.5',
+          '@flowgram.ai/minimap-plugin': '0.5.5',
+          'styled-components': '5.3.11',
+        },
+      }}
+      options={{
+        editorHeight: 350,
+        activeFile,
+      }}
+    />
+  );
+};
 
-export const FixedLayoutCodePreview: FC<CodePreviewProps> = ({ files, activeFile }) => (
-  <Sandpack
-    files={files}
-    theme="light"
-    template="react-ts"
-    customSetup={{
-      dependencies: {
-        '@flowgram.ai/fixed-layout-editor': '0.1.0-alpha.19',
-        // 为了解决semi无法在sandpack使用的问题，单独发了包，将semi打包进@flowgram.ai/fixed-semi-materials中
-        '@flowgram.ai/fixed-semi-materials': '0.1.0-alpha.19',
-        '@flowgram.ai/minimap-plugin': '0.1.0-alpha.19',
-        'styled-components': '5.3.11',
-      },
-    }}
-    options={{
-      editorHeight: 350,
-      activeFile,
-    }}
-  />
-);
+export const FixedLayoutCodePreview: FC<CodePreviewProps> = ({ files, activeFile }) => {
+  const dark = useDark();
+  return (
+    <Sandpack
+      files={files}
+      theme={dark ? 'dark' : 'light'}
+      template="react-ts"
+      customSetup={{
+        dependencies: {
+          '@flowgram.ai/fixed-layout-editor': '0.1.0-alpha.19',
+          // 为了解决semi无法在sandpack使用的问题，单独发了包，将semi打包进@flowgram.ai/fixed-semi-materials中
+          '@flowgram.ai/fixed-semi-materials': '0.1.0-alpha.19',
+          '@flowgram.ai/minimap-plugin': '0.1.0-alpha.19',
+          'styled-components': '5.3.11',
+        },
+      }}
+      options={{
+        editorHeight: 350,
+        activeFile,
+      }}
+    />
+  );
+};