Syncfusion React 组件提供完善的主题支持，包含现代化且可定制的主题。本技能指导用户为 React 应用应用主题、定制外观、实现暗色模式、使用 CSS 变量、管理图标，并创建自定义主题，以获得一致且专业的界面效果。
一、主要用途 帮助开发者在 Syncfusion React 组件中统一管理与定制视觉样式，包括选择内置主题、切换暗色模式、修改主题变量、配置图标，以及在构建时或运行时切换配置。
二、内置主题 文档参考资料 references/built-in-themes.md 中说明：提供 10 余种可用主题；可通过 npm 包、CDN 或单个组件样式来应用主题；提供优化的精简（lite）CSS 文件以减小打包体积。
三、样式迁移 参考资料 references/migration-styles.md 说明：可将样式从组件包迁移到主题包；支持 SCSS 与 CSS Reference 向主题包迁移；通过 index 文件自动引入依赖。
四、暗色模式 参考资料 references/dark-mode.md 说明：可使用 e-dark-mode 类实现全局暗色模式；支持单组件暗色模式；可通过复选框或切换按钮在运行时切换主题。
五、CSS 变量定制 参考资料 references/css-variables.md 说明：包含各主题（Material 3、Fluent 2、Bootstrap 5.3、Tailwind 3.4）的 CSS 变量结构；可定制主色、成功、警告、危险、信息颜色；支持用 JavaScript 在运行时修改颜色；不同主题变量格式不同（RGB 值与十六进制值）。
六、图标库 参考资料 references/icons.md 说明：可设置图标库（npm 或 CDN）；通过 e-icons 类使用图标；图标尺寸支持小、中、大；可定制图标颜色与外观；各主题提供对应图标集。
七、尺寸模式 参考资料 references/advanced-theming.md 说明：支持普通与触控（更大）两种尺寸模式；可全局或按组件启用尺寸模式；支持运行时切换尺寸模式。
八、高级功能 参考资料 references/advanced-theming.md 说明：支持 styled-components 集成；可跨所有组件定制字体；可使用 Theme Studio 创建自定义主题。
九、快速开始 第一步：安装 Syncfusion React 包与主题包 npm install @syncfusion/ej2-react-buttons@latest @syncfusion/ej2-tailwind3-theme@latest --save
第二步：导入主题 CSS 方式 1：从 npm 主题包导入（推荐） /* src/App.css */ @import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/button/index.css";
方式 2：使用 CDN 注意：CDN 版本必须与已安装的 npm 包版本一致，以避免样式和渲染问题。 查找已安装版本： npm list @syncfusion/ej2-react-buttons 然后使用匹配的 CDN 版本： <!-- index.html --> <!-- 将 {VERSION} 替换为已安装的包版本（例如 28.1.33、33.1.44） --> <link href="https://cdn.syncfusion.com/ej2/{VERSION}/tailwind3.css" rel="stylesheet"/>
<!-- 示例：若包版本为 33.1.44 --> <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet"/>
提示：推荐使用 npm 导入（方式 1），因为可自动保持 CSS 与 JavaScript 版本同步。
十、常见模式 模式 1：全局应用暗色模式（使用 CheckBoxComponent 与 ButtonComponent，通过 document.body.classList 添加或移除 e-dark-mode 类）。
模式 2：使用 CSS 变量定制主色 Fluent 2 主题： :root { --color-sf-primary: #ff6b35; } Material 3 主题（使用 RGB 值）： :root { --color-sf-primary: 255, 107, 53; }
模式 3：全局启用触控模式 在 body 上添加 e-bigger 类，或按组件添加 cssClass="e-bigger"。
模式 4：使用优化 CSS 加快加载 @import "@syncfusion/ej2-tailwind3-theme/styles/tailwind3-lite.css";
模式 5：使用 Syncfusion 图标库 安装图标包（二选一）： npm install @syncfusion/ej2-icons@latest 或 npm install @syncfusion/ej2-tailwind3-theme@latest 导入图标样式： @import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/icons/tailwind3.css"; 或 @import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css"; 在组件中使用图标： <span className="e-icons e-cut"></span> <span className="e-icons e-medium e-copy"></span> <span className="e-icons e-large e-paste"></span>
十一、适用场景 适用于使用 Syncfusion React 组件库的前端项目，需要对界面进行主题切换、暗色模式支持、品牌色定制、图标统一或响应触控场景。
十二、限制 具体的主题数量、各主题完整变量列表、可用图标集详情、Theme Studio 的操作步骤等，当前资料未完全展开；CDN 版本必须与 npm 包版本一致，否则可能出现样式与渲染问题。