增加Scheme展示承载和模式切换页面。

src/page-components/scheme/SchemeView.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { Switch } from '../../components/Switch';
+import { SchemeSet } from '../../stores/schemes';
+import { SchemeContent } from './SchemeContent';
+import styles from './SchemeView.module.css';
+
+type SchemeViewProps = {
+  scheme: SchemeSet['lightScheme' | 'darkScheme'];
+};
+
+export function SchemeView({ scheme }: SchemeViewProps) {
+  const [enablePreview, setEnablePreview] = useState(false);
+
+  return (
+    <div className={styles.scheme_view_layout}>
+      <div className={styles.preview_switch_container}>
+        <span>Preview scheme</span>
+        <Switch onChange={(checked) => setEnablePreview(checked)} />
+      </div>
+      {enablePreview ? <div>SVG Preview</div> : <SchemeContent scheme={scheme} />}
+    </div>
+  );
+}