diff --git a/packages/pro-components/chat/chat-actionbar/README.en-US.md b/packages/pro-components/chat/chat-actionbar/README.en-US.md
index 53f6cbda4..2784d1f77 100644
--- a/packages/pro-components/chat/chat-actionbar/README.en-US.md
+++ b/packages/pro-components/chat/chat-actionbar/README.en-US.md
@@ -21,3 +21,11 @@ placement | String | start | options: start/end/space-around/space-between | N
 name | params | description
 -- | -- | --
 actions | `(detail: {name: string, active: boolean})` | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--chat-actionbar-item-padding | 16rpx 28rpx | -
+--chat-actionbar-padding | 0 | -
diff --git a/packages/pro-components/chat/chat-actionbar/README.md b/packages/pro-components/chat/chat-actionbar/README.md
index 8b8e0fe4a..81bd21429 100644
--- a/packages/pro-components/chat/chat-actionbar/README.md
+++ b/packages/pro-components/chat/chat-actionbar/README.md
@@ -59,3 +59,11 @@ placement | String | start | 【实验】操作栏位置。可选项：start/end
 名称 | 参数 | 描述
 -- | -- | --
 actions | `(detail: {name: string, active: boolean})` | 点击点赞，点踩，复制，分享，重新生成按钮时触发发
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--chat-actionbar-item-padding | 16rpx 28rpx | -
+--chat-actionbar-padding | 0 | -
diff --git a/packages/pro-components/chat/chat-content/README.en-US.md b/packages/pro-components/chat/chat-content/README.en-US.md
index f25c0265b..04c85d4e4 100644
--- a/packages/pro-components/chat/chat-content/README.en-US.md
+++ b/packages/pro-components/chat/chat-content/README.en-US.md
@@ -11,3 +11,12 @@ content | Object | - | required。Typescript: `TdChatContentType ` `interface Td
 markdown-props | Object | - | Typescript: `ChatMarkdownProps`，[ChatMarkdown API Documents](./chat-markdown?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/pro-components/chat/chat-content/type.ts) | N
 role | String | - | required。options: user/assistant/system | Y
 status | String | - | options: error / '' | N
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-chat-content-assistant-text-color | @text-color-primary | -
+--td-chat-content-error-text-color | @error-color | -
+--td-chat-content-user-text-color | @text-color-primary | -
diff --git a/packages/pro-components/chat/chat-content/README.md b/packages/pro-components/chat/chat-content/README.md
index 5cec4e373..0f8333614 100644
--- a/packages/pro-components/chat/chat-content/README.md
+++ b/packages/pro-components/chat/chat-content/README.md
@@ -44,3 +44,12 @@ content | Object | - | 必需。聊天内容对象。TS 类型：`TdChatContentT
 markdown-props | Object | - | marked 解析器的配置选项。TS 类型：`ChatMarkdownProps`，[ChatMarkdown API Documents](./chat-markdown?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/pro-components/chat/chat-content/type.ts) | N
 role | String | - | 必需。消息角色，用于区分用户和助手的消息样式	。可选项：user/assistant/system | Y
 status | String | - | 正文状态。可选项：error / '' | N
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-chat-content-assistant-text-color | @text-color-primary | -
+--td-chat-content-error-text-color | @error-color | -
+--td-chat-content-user-text-color | @text-color-primary | -
diff --git a/packages/pro-components/chat/chat-sender/README.en-US.md b/packages/pro-components/chat/chat-sender/README.en-US.md
index 9257205cb..422d02293 100644
--- a/packages/pro-components/chat/chat-sender/README.en-US.md
+++ b/packages/pro-components/chat/chat-sender/README.en-US.md
@@ -36,3 +36,10 @@ keyboardheightchange | `(detail: {height: number, duration: number})` | \-
 send | `(value:string, context: {\| KeyboardEvent })` | \-
 stop | `(value:string)` | \-
 upload-click | \- | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-chat-sender-bg-color | @bg-color-specialcomponent | -
diff --git a/packages/pro-components/chat/chat-sender/README.md b/packages/pro-components/chat/chat-sender/README.md
index 46893c51e..3b6f0ff5c 100644
--- a/packages/pro-components/chat/chat-sender/README.md
+++ b/packages/pro-components/chat/chat-sender/README.md
@@ -83,3 +83,10 @@ keyboardheightchange | `(detail: {height: number, duration: number})` | 选择
 send | `(value:string, context: {\| KeyboardEvent })` | 点击消息发送的回调方法
 stop | `(value:string)` | 点击消息终止的回调方法
 upload-click | \- | 【实验】点击上传按钮时触发
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-chat-sender-bg-color | @bg-color-specialcomponent | -
diff --git a/packages/tdesign-miniprogram-chat/site/package.json b/packages/tdesign-miniprogram-chat/site/package.json
index 646b0ac79..a554755a6 100644
--- a/packages/tdesign-miniprogram-chat/site/package.json
+++ b/packages/tdesign-miniprogram-chat/site/package.json
@@ -7,7 +7,8 @@
     "site": "vite build --configLoader runner",
     "site:dev": "vite --configLoader runner",
     "site:preview": "cross-env NODE_ENV=development vite build --configLoader runner --mode preview && cp dist/index.html dist/404.html",
-    "site:prerender": "node scripts/prerender.mjs"
+    "site:prerender": "node scripts/prerender.mjs",
+    "update:css": "node scripts/generate-css-vars.mjs"
   },
   "license": "MIT",
   "dependencies": {
@@ -28,4 +29,4 @@
     "vite": "^6.2.3",
     "vite-plugin-tdoc": "^2.0.1"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/tdesign-miniprogram-chat/site/scripts/generate-css-vars.mjs b/packages/tdesign-miniprogram-chat/site/scripts/generate-css-vars.mjs
new file mode 100644
index 000000000..2adee8d53
--- /dev/null
+++ b/packages/tdesign-miniprogram-chat/site/scripts/generate-css-vars.mjs
@@ -0,0 +1,118 @@
+import fs from 'fs';
+import resolveCwd from './utils.mjs';
+
+const COMPONENT_NAME = process.argv[process.argv.indexOf('--NAME') + 1]; // 在 --NAME 后面
+const ROOT_DIR = resolveCwd('../../../packages/pro-components/chat');
+
+const combine = {
+  'chat-markdown': [
+    'chat-markdown',
+    'chat-markdown/components/chat-markdown-code',
+    'chat-markdown/components/chat-markdown-node',
+    'chat-markdown/components/chat-markdown-table',
+  ],
+};
+
+const findFilePath = (componentPath, componentName) => `${ROOT_DIR}/${componentPath}/${componentName}.less`;
+
+const getAllComponentName = async (dirPath) => {
+  const items = await fs.promises.readdir(dirPath, { withFileTypes: true });
+  return items.filter((item) => item.isDirectory()).map((item) => item.name);
+};
+
+const generateCssVariables = async (componentName) => {
+  const lessPath = [];
+
+  const parsedKeys = [];
+  let cssVariableBodyContent = '';
+
+  if (combine[componentName]) {
+    combine[componentName].forEach((item) => {
+      lessPath.push(findFilePath(item, item.includes('/') ? item.split('/').pop() : item));
+    });
+  } else {
+    lessPath.push(findFilePath(componentName, componentName));
+  }
+
+  const validPaths = lessPath.filter((item) => fs.existsSync(item));
+
+  // 使用 fs.promises.readFile 并行读取文件
+  const fileContents = await Promise.all(validPaths.map((item) => fs.promises.readFile(item, 'utf8')));
+
+  fileContents.forEach((file) => {
+    const matchReg = /(?<=var)\([\s\S]*?(?=;)/g;
+
+    const list = file.match(matchReg)?.sort();
+
+    list?.forEach((item) => {
+      const key = item.slice(1, item.indexOf(',')).trim();
+      const value = item.slice(item.indexOf(',') + 2, item.length - 1).trim();
+      if (!key || !value) {
+        throw new Error('⚠️ 解析失败，请检查 less 文件');
+      }
+      if (!parsedKeys.includes(key)) {
+        parsedKeys.push(key);
+        cssVariableBodyContent += `${key} | ${value} | -${'\n'}`;
+      }
+    });
+  });
+
+  return cssVariableBodyContent.trimEnd();
+};
+
+/**
+ * 替换文档中的 CSS 变量部分
+ * @param {string} filePath - 文档路径
+ * @param {string} headContent - 变量表头部内容
+ * @param {string} variables - 生成的变量内容
+ */
+const updateDocVariables = (filePath, headContent, variables) => {
+  if (!fs.existsSync(filePath)) return;
+
+  const content = fs.readFileSync(filePath, 'utf8');
+  const cssVariablesSection = `\n${headContent}${variables}\n`;
+
+  // 检查是否存在 ### CSS Variables 部分
+  if (content.includes('### CSS Variables')) {
+    // 替换现有部分
+    const newContent = content.replace(/(^|\n+)### CSS Variables[\s\S]*?(?=###|$)/, cssVariablesSection);
+    fs.writeFileSync(filePath, newContent, 'utf8');
+  } else {
+    // 追加到文件末尾
+    const trimmedContent = content.trimEnd();
+    const newContent = `${trimmedContent}${cssVariablesSection}\n`;
+    fs.writeFileSync(filePath, newContent, 'utf8');
+  }
+};
+
+// 批量处理所有组件
+const processAllComponents = async () => {
+  const cssVariableHeadContent = `\n### CSS Variables\n\n组件提供了下列 CSS 变量，可用于自定义样式。\n名称 | 默认值 | 描述 \n-- | -- | --\n`;
+  const cssVariableHeadContentEn = `\n### CSS Variables\n\nThe component provides the following CSS variables, which can be used to customize styles.\nName | Default Value | Description \n-- | -- | --\n`;
+
+  let COMPONENT_NAMES = [];
+  if (COMPONENT_NAME === 'all') {
+    COMPONENT_NAMES = await getAllComponentName(ROOT_DIR);
+  } else {
+    COMPONENT_NAMES = [COMPONENT_NAME];
+  }
+
+  // 并行处理所有组件
+  await Promise.all(
+    COMPONENT_NAMES.map(async (name) => {
+      const variables = await generateCssVariables(name);
+      if (variables) {
+        updateDocVariables(`${ROOT_DIR}/${name}/README.md`, cssVariableHeadContent, variables);
+        updateDocVariables(`${ROOT_DIR}/${name}/README.en-US.md`, cssVariableHeadContentEn, variables);
+        console.log(`✅ 组件 "${name}" 文档更新完成`);
+      } else {
+        console.log(`${name}: 没有找到 CSS 变量`);
+      }
+    }),
+  );
+};
+
+// 执行入口
+processAllComponents().catch((err) =>
+  console.error(`${COMPONENT_NAME === 'all' ? '❌ 批量处理失败:' : `${COMPONENT_NAME}处理失败`}`, err),
+);
diff --git a/packages/tdesign-miniprogram-chat/site/scripts/utils.mjs b/packages/tdesign-miniprogram-chat/site/scripts/utils.mjs
new file mode 100644
index 000000000..89c204464
--- /dev/null
+++ b/packages/tdesign-miniprogram-chat/site/scripts/utils.mjs
@@ -0,0 +1,8 @@
+import path from 'path';
+
+function resolveCwd(...args) {
+  args.unshift(process.cwd());
+  return path.join(...args);
+}
+
+export default resolveCwd;