diff --git a/docs/api/theme-provider.md b/docs/api/theme-provider.md
index c55cb29e..cfb4842c 100644
--- a/docs/api/theme-provider.md
+++ b/docs/api/theme-provider.md
@@ -7,6 +7,7 @@ group:
   order: 1
 demo:
   cols: 2
+  tocDepth: 4
 ---
 
 ## 简介
diff --git a/docs/demos/ThemeProvider/customToken.tsx b/docs/demos/ThemeProvider/customToken.tsx
index 7875a6ed..a29ed351 100644
--- a/docs/demos/ThemeProvider/customToken.tsx
+++ b/docs/demos/ThemeProvider/customToken.tsx
@@ -1,19 +1,23 @@
 /**
  * compact: true
+ * defaultShowCode: true
+ * codePlacement: left
  */
-import { Divider } from 'antd';
-import { ThemeProvider } from 'antd-style';
-import { Container } from './style';
+import { ThemeProvider, useTheme } from 'antd-style';
+import { Flexbox } from 'react-layout-kit';
 import App from './_app';
 
-export default () => (
-  <Container align={'center'} split={<Divider type={'vertical'} />} size={24}>
-    <ThemeProvider>
-      <App title={'antd Token'} tokenName={'colorPrimary'} />
-    </ThemeProvider>
-    <ThemeProvider customToken={{ customBrandColor: '#c956df' }}>
-      <App title={'自定义 Token'} tokenName={'customBrandColor'} />
-    </ThemeProvider>
-    <App title={'未包裹 ThemeProvider 时使用自定义 Token 无效'} tokenName={'customBrandColor'} />
-  </Container>
-);
+export default () => {
+  const theme = useTheme();
+  return (
+    <Flexbox padding={24} gap={24} style={{ background: theme.colorBgLayout }}>
+      <ThemeProvider>
+        <App title={'antd Token'} tokenName={'colorPrimary'} />
+      </ThemeProvider>
+      <ThemeProvider customToken={{ customBrandColor: '#c956df' }}>
+        <App title={'自定义 Token'} tokenName={'customBrandColor'} />
+      </ThemeProvider>
+      <App title={'未包裹 ThemeProvider 时使用自定义 Token 无效'} tokenName={'customBrandColor'} />
+    </Flexbox>
+  );
+};
diff --git a/docs/demos/ThemeProvider/default.tsx b/docs/demos/ThemeProvider/default.tsx
index dee02966..059187e7 100644
--- a/docs/demos/ThemeProvider/default.tsx
+++ b/docs/demos/ThemeProvider/default.tsx
@@ -1,5 +1,6 @@
 /**
- * compact: true
+ * defaultShowCode: true
+ * codePlacement: left
  */
 import { Divider } from 'antd';
 import { ThemeProvider } from 'antd-style';
diff --git a/docs/demos/createStyles/AntdToken.tsx b/docs/demos/createStyles/AntdToken.tsx
index 26b11c68..80d48968 100644
--- a/docs/demos/createStyles/AntdToken.tsx
+++ b/docs/demos/createStyles/AntdToken.tsx
@@ -1,3 +1,6 @@
+/**
+ * inherit: true
+ */
 import { SmileOutlined } from '@ant-design/icons';
 import { Button, Space } from 'antd';
 import { createStyles } from 'antd-style';
diff --git a/docs/demos/createStyles/Command/index.tsx b/docs/demos/createStyles/Command/index.tsx
index 066a49c8..2765afc6 100644
--- a/docs/demos/createStyles/Command/index.tsx
+++ b/docs/demos/createStyles/Command/index.tsx
@@ -1,6 +1,8 @@
 /**
  * iframe: 510
- * description: Demo 示例参考 https://designmaestro.io/
+ * title: 复杂样式场景下建议独立拆分样式文件
+ * description: "Demo 示例参考 https://designmaestro.io/"
+ * defaultShowCode: true
  */
 import { SearchOutlined } from '@ant-design/icons';
 
diff --git a/docs/demos/createStyles/SimpleObject.tsx b/docs/demos/createStyles/SimpleObject.tsx
index 400829fa..cb416ec0 100644
--- a/docs/demos/createStyles/SimpleObject.tsx
+++ b/docs/demos/createStyles/SimpleObject.tsx
@@ -1,3 +1,7 @@
+/**
+ * defaultShowCode: true
+ * codePlacement: top
+ */
 import { createStyles, css } from 'antd-style';
 
 const useStyles = createStyles({
diff --git a/docs/guide/create-styles.md b/docs/guide/create-styles.md
index 1c4f14d2..1bda6605 100644
--- a/docs/guide/create-styles.md
+++ b/docs/guide/create-styles.md
@@ -4,6 +4,8 @@ order: 1
 group:
   title: 快速上手
   order: 0
+demo:
+  tocDepth: 4
 ---
 
 # 使用 createStyles 类名组织样式
@@ -30,37 +32,6 @@ antd-style 提供的核心 api 就是使用 `createStyles` 方法可以适用类
 
 示例：
 
-```tsx | pure
-import { createStyles, css } from 'antd-style';
-
-const useStyles = createStyles({
-  container: {
-    padding: 24,
-    background: 'lightslategrey',
-  },
-  header: css`
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 24px;
-    color: white;
-  `,
-  text: {
-    color: 'lightblue',
-  },
-});
-
-export default () => {
-  const { styles } = useStyles();
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.header}>用法一</div>
-      <p className={styles.text}>普通对象，无需动态性</p>
-    </div>
-  );
-};
-```
-
 <code src="../demos/createStyles/SimpleObject.tsx"></code>
 
 ### 写法二：结合 antd 的 token 使用
diff --git a/docs/guide/switch-theme.md b/docs/guide/switch-theme.md
index d3aeaac0..a9ff4f9f 100644
--- a/docs/guide/switch-theme.md
+++ b/docs/guide/switch-theme.md
@@ -2,6 +2,8 @@
 title: 主题切换
 group: 快速上手
 order: 2
+demo:
+  tocDepth: 4
 ---
 
 # 主题切换