用途:为 Syncfusion JavaScript 控件应用主题、定制外观、实现深色模式、使用 CSS 变量、管理图标与创建自定义主题,帮助构建风格统一的 JavaScript 应用。
主要能力:提供 10 余种内置主题,可通过 npm 包、CDN 或单组件样式引入,并有精简(lite)CSS 减小体积;支持全局 e-dark-mode 类、按组件深色模式及运行时切换;可按主题(Material 3、Fluent 2、Bootstrap 5.3、Tailwind 3.4)用 CSS 变量调整 primary、success、warning、danger、info 等颜色,并支持 JavaScript 运行时改色;提供图标库(e-icons 类、尺寸与颜色定制);支持普通与触控(e-bigger)尺寸模式及运行时切换;还涵盖字体定制、Theme Studio 自定义主题,以及从组件包迁移到主题包。
使用方式:安装控件包与主题包,例如 npm install @syncfusion/ej2-buttons @syncfusion/ej2-tailwind3-theme@latest --save;在样式文件中导入主题 CSS,如 @import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/button/index.css";也可用 CDN,但版本必须与已安装 npm 包一致,可用 npm list @syncfusion/ej2-buttons 查看版本。深色模式通过 document.body.classList.add('e-dark-mode') 切换;CSS 变量在 :root 中覆盖,注意 Material 3 使用 RGB 值、Fluent 2 使用十六进制值;触控模式可给 body 或组件加 e-bigger 类;图标需安装 @syncfusion/ej2-icons 或主题包并导入对应样式。
适用场景与限制:适合需要统一视觉风格、深色模式或品牌配色的 Syncfusion JavaScript 应用。使用 CDN 时版本不匹配会导致样式与渲染问题,推荐 npm 导入以保持 CSS 与 JavaScript 版本同步。具体主题清单、图标集与迁移细节需查阅对应参考文档,资料未提供完整列表。