syncfusion-angular-themes

用途

该技能用于指导在 Angular 应用中使用 Syncfusion Angular 组件时进行主题与视觉样式相关的工作，包括应用主题、定制外观、实现暗色模式、使用 CSS 变量、管理图标以及创建自定义主题，以构建风格一致、专业的 Angular 应用。

主要能力

内置主题：提供 10 个以上可用主题，支持通过 npm 包、CDN 或单个组件样式应用主题，并提供优化（精简）CSS 文件以减小打包体积。
暗色模式：支持通过 e-dark-mode 类实现全局暗色模式、按组件启用暗色模式，以及通过复选框或切换按钮在运行时切换主题。
CSS 变量定制：说明各主题（Material 3、Fluent 2、Bootstrap 5.3、Tailwind 3.4）的 CSS 变量结构，支持定制 primary、success、warning、danger、info 颜色，并可通过 TypeScript 在运行时修改颜色；不同主题的变量格式不同（RGB 与十六进制值）。
图标库：支持通过 npm 或 CDN 设置图标库，使用 e-icons 类调用图标，支持小、中、大尺寸，可定制图标颜色与外观，并列出各主题可用的图标集。
尺寸模式：支持普通与触控（更大）尺寸模式，可全局或按组件启用，并支持运行时切换。
进阶功能：组件样式集成、使用 Theme Studio 创建自定义主题。
样式迁移：支持从组件包迁移到主题包，包括 SCSS 与 CSS 引用迁移，以及通过 index 文件自动引入依赖。

使用方式

安装并应用主题的基本步骤：

第 1 步：安装 Syncfusion Angular 包与主题包

npm install @syncfusion/ej2-angular-buttons@latest @syncfusion/ej2-tailwind3-theme@latest --save

第 2 步：导入主题 CSS

方式一：从 npm 导入（推荐）

/* src/styles.css */ @import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/button/index.css";

方式二：使用 CDN

先查看已安装版本：

npm list @syncfusion/ej2-angular-buttons

然后使用匹配的 CDN 版本：

"styles": [ "https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" ]

注意：CDN 版本必须与已安装的 npm 包版本一致，以避免样式与渲染问题。推荐使用 npm 导入方式，因为它会自动保持 CSS 与 JavaScript 版本同步。

常见模式示例：

模式 1：全局应用暗色模式

import { Component, OnInit } from '@angular/core';

@Component({ selector: 'app-root', template: <div> <ejs-checkbox label="Enable Dark Mode" [checked]="isDarkMode" (change)="handleDarkModeToggle($event)"> </ejs-checkbox> <ejs-button cssClass="e-primary">Sample Button</ejs-button> </div> }) export class AppComponent { isDarkMode = false;

handleDarkModeToggle(event: any): void { this.isDarkMode = event.checked ?? false;

if (this.isDarkMode) {
  document.body.classList.add('e-dark-mode');
} else {
  document.body.classList.remove('e-dark-mode');
}

} }

模式 2：使用 CSS 变量定制主色

Fluent 2 主题：

/* src/styles.css / :root { --color-sf-primary: #ff6b35; / Custom orange */ }

Material 3 主题（使用 RGB 值）：

/* src/styles.css / :root { --color-sf-primary: 255, 107, 53; / RGB: Custom orange */ }

模式 3：全局启用触控模式

<body class="e-bigger"> <app-root></app-root> </body>

或按组件启用：

<ejs-button cssClass="e-bigger">Touch-Friendly Button</ejs-button>

模式 4：使用精简 CSS 加快加载

/* src/styles.css - Lite version without bigger mode styles */ @import "@syncfusion/ej2-tailwind3-theme/styles/tailwind3-lite.css";

模式 5：使用 Syncfusion 图标库

安装图标包（可安装图标包或主题包）：

npm install @syncfusion/ej2-icons@latest

/* or */

npm install @syncfusion/ej2-tailwind3-theme@latest

导入图标样式：

/* src/styles.css / / Syncfusion theme package icon styles */ @import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/icons/tailwind3.css";

/* or */

/* Syncfusion components package icon styles */ @import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";

在组件中使用图标：

适用场景

适用于需要在 Angular 应用中统一 Syncfusion 组件视觉风格、实现暗色模式或运行时主题切换、通过 CSS 变量调整品牌色、使用图标库、切换触控尺寸模式，以及从组件包迁移到主题包样式的开发场景。

限制

资料未提供关于收费、价格、平台兼容性、性能效果或具体使用步骤之外的额外说明，相关事实暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制