📝 docs: 更新自定义主题的能力文档

docs/guide/demos/Theme/darkTheme.tsx

@@ -0,0 +1,53 @@
+import type { ColumnItemList } from '@ant-design/pro-editor';
+import { ColumnList } from '@ant-design/pro-editor';
+import { ThemeProvider, useTheme } from 'antd-style';
+
+type SchemaItem = {
+  title: string;
+  dataIndex: string;
+};
+
+const initialValues = [
+  { title: '序号', dataIndex: 'index' },
+  {
+    title: '授权企业名称',
+    dataIndex: 'name',
+  },
+  { title: '被授权企业', dataIndex: 'authCompany' },
+];
+
+const columns: ColumnItemList<SchemaItem> = [
+  {
+    title: '配置项一',
+    dataIndex: 'title',
+    type: 'input',
+  },
+  {
+    title: '配置项二',
+    dataIndex: 'dataIndex',
+    type: 'input',
+  },
+];
+
+export default () => {
+  const theme = useTheme();
+  console.log(theme);
+
+  return (
+    <ThemeProvider appearance="dark">
+      <div
+        style={{
+          background: '#000',
+        }}
+      >
+        <ColumnList<SchemaItem>
+          columns={columns}
+          initialValues={initialValues}
+          onChange={(values) => {
+            console.log('onChange', values);
+          }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+};

docs/guide/demos/Theme/lightTheme.tsx

@@ -0,0 +1,51 @@
+import type { ColumnItemList } from '@ant-design/pro-editor';
+import { ColumnList } from '@ant-design/pro-editor';
+import { ThemeProvider, useTheme } from 'antd-style';
+
+type SchemaItem = {
+  title: string;
+  dataIndex: string;
+};
+
+const initialValues = [
+  { title: '序号', dataIndex: 'index' },
+  {
+    title: '授权企业名称',
+    dataIndex: 'name',
+  },
+  { title: '被授权企业', dataIndex: 'authCompany' },
+];
+
+const columns: ColumnItemList<SchemaItem> = [
+  {
+    title: '配置项一',
+    dataIndex: 'title',
+    type: 'input',
+  },
+  {
+    title: '配置项二',
+    dataIndex: 'dataIndex',
+    type: 'input',
+  },
+];
+
+export default () => {
+  const theme = useTheme();
+  return (
+    <ThemeProvider appearance="light">
+      <div
+        style={{
+          background: theme.colorBgContainer,
+        }}
+      >
+        <ColumnList<SchemaItem>
+          columns={columns}
+          initialValues={initialValues}
+          onChange={(values) => {
+            console.log('onChange', values);
+          }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+};

docs/guide/theme.en-US.md

@@ -0,0 +1,24 @@
+---
+title: Theme Configuration
+order: 5
+group:
+  title: Quick Start
+---
+
+# Theme Configuration
+
+The overall style of `ProEditor` is consistent with that of `antd`. We have adopted an enterprise-level theme switching framework to empower the theme configuration capabilities of `ProEditor`: [antd-style](https://github.com/ant-design/antd-style)
+
+## Dark Mode
+
+<code src="./demos/Theme/darkTheme.tsx" ></code>
+
+## Light Mode
+
+<code src="./demos/Theme/lightTheme.tsx" ></code>
+
+You can even achieve system theme color adaptation with a simple configuration of the ThemeProvider. For more capabilities, please refer to [antd-style](https://github.com/ant-design/antd-style).
+
+```js
+<ThemeProvider appearance="dark">// any antd & ProEditor components</ThemeProvider>
+```

docs/guide/theme.zh-CN.md

@@ -0,0 +1,24 @@
+---
+title: 主题配置
+order: 5
+group:
+  title: 快速上手
+---
+
+# 主题配置
+
+整体 `ProEditor` 的样式和 `antd` 一脉相传，我们采用了一个企业级的主题切换框架来做 `ProEditor` 的主题配置能力: [antd-style](https://github.com/ant-design/antd-style)
+
+## 暗色模式
+
+<code src="./demos/Theme/darkTheme.tsx" ></code>
+
+## 亮色模式
+
+<code src="./demos/Theme/lightTheme.tsx" ></code>
+
+你甚至可以通过简单配置 ThemeProvider 来做到和系统主题色自适应，更多的能力麻烦查看 [antd-style](https://github.com/ant-design/antd-style)
+
+```js
+<ThemeProvider appearance="dark">// any antd & ProEditor components</ThemeProvider>
+```