syncfusion-angular-themes

Name: syncfusion-angular-themes
Author: syncfusion

github.com/syncfusion设计与 UI0323 次安装1 周前更新

代码仓库

关于 syncfusion-angular-themes

面向 Angular 开发者的 Syncfusion 组件主题配置技能，涵盖内置主题、深色模式、CSS 变量、图标和尺寸模式。也介绍使用 Theme Studio 创建自定义主题及迁移样式包。

主要功能

01应用内置主题与精简 CSS
02配置全局或单组件深色模式
03通过 CSS 变量自定义颜色
04接入和设置 Syncfusion 图标
05切换常规与触控尺寸模式
06使用 Theme Studio 创建主题

适用场景

01为 Angular 应用应用 Syncfusion 主题
02在应用中运行时切换深色模式
03调整主题颜色以符合界面设计
04迁移组件包中的样式到主题包

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/angular-ui-components-skills --skill syncfusion-angular-themes

安装后在 Claude Code 中输入/syncfusion-angular-themes确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

advanced-theming.md

built-in-themes.md

css-variables.md

dark-mode.md

icons.md

migration-styles.md

详细介绍

Syncfusion Angular 组件中的主题

Syncfusion Angular 组件提供全面的主题支持，包含现代且可自定义的主题。本指南将介绍如何应用主题、自定义外观、实现深色模式、使用 CSS 变量、管理图标，以及创建自定义主题，从而打造风格统一、专业的 Angular 应用。

文档与导航指南

内置主题

📄 阅读： references/built-in-themes.md

提供 10 多种主题
通过 npm 包、CDN 或单个组件样式应用主题
使用经过优化的（精简版）CSS 文件，减小打包体积

深色模式实现

📄 阅读： references/dark-mode.md

使用 e-dark-mode 类启用全局深色模式
为单个组件启用深色模式
使用复选框或切换按钮在运行时切换主题

CSS 变量自定义

📄 阅读： references/css-variables.md

各主题的 CSS 变量结构（Material 3、Fluent 2、Bootstrap 5.3、Tailwind 3.4）
自定义主色、成功、警告、危险和信息颜色
使用 TypeScript 在运行时修改颜色
特定主题的变量格式（RGB 值与十六进制值）

图标库

📄 阅读： references/icons.md

设置图标库（npm 或 CDN）
使用 e-icons 类添加图标
图标大小（小、中、大）
自定义图标颜色和外观
各主题提供的图标集

尺寸模式

📄 阅读： references/advanced-theming.md

常规与触控（较大）尺寸模式
全局或按组件启用尺寸模式
在运行时切换尺寸模式

高级功能

📄 阅读： references/advanced-theming.md

集成组件样式
使用 Theme Studio 创建自定义主题

将样式从组件包迁移到主题包

📄 阅读： references/migration-styles.md

从组件包迁移到主题包
将 SCSS 和 CSS 引用迁移到主题包
通过索引文件自动包含依赖项

快速入门

安装并应用主题

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

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

第 2 步：导入主题 CSS

选项 1：从 npm 导入（推荐）

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

选项 2：使用 CDN

查找已安装的版本：

npm list @syncfusion/ej2-angular-buttons

然后使用相匹配的 CDN 版本：


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

⚠️ 重要提示： CDN 版本必须与已安装的 npm 包版本一致，以避免样式和渲染问题。

注意： 建议使用 npm 导入（选项 1），因为这样可以自动确保 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";

在组件中使用图标：

<span class="e-icons e-cut"></span>
<span class="e-icons e-medium e-copy"></span>
<span class="e-icons e-large e-paste"></span>

支持 Markdown

登录后评论