syncfusion-angular-themes

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Themes in Syncfusion Angular Components

Syncfusion Angular 组件的主题定制

Syncfusion Angular components provide comprehensive theming support with modern, customizable themes. This skill guides you through applying themes, customizing appearance, implementing dark mode, using CSS variables, managing icons, and creating custom themes for consistent, professional Angular applications.

Syncfusion Angular组件提供全面的主题支持，拥有现代化、可自定义的主题。本技能将引导你完成主题应用、外观自定义、暗黑模式实现、CSS变量使用、图标管理以及自定义主题创建，助力打造风格统一、专业的Angular应用。

Documentation and Navigation Guide

文档与导航指南

Built-in Themes

内置主题

📄 Read: references/built-in-themes.md

Available 10+ themes
Applying themes via npm packages, CDN, or individual component styles
Optimized (lite) CSS files for reduced bundle size
Theme comparison and selection guide
Legacy theme support

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

提供10余种主题
通过npm包、CDN或单个组件样式应用主题
优化版（精简）CSS文件，减小包体积
主题对比与选择指南
遗留主题支持

Dark Mode Implementation

暗黑模式实现

📄 Read: references/dark-mode.md

Global dark mode with
```
e-dark-mode
```
class
Per-component dark mode
Runtime theme switching with checkboxes or toggle buttons

📄 阅读： references/dark-mode.md

使用
```
e-dark-mode
```
类实现全局暗黑模式
组件级暗黑模式
通过复选框或切换按钮实现运行时主题切换

CSS Variables Customization

CSS变量自定义

📄 Read: references/css-variables.md

CSS variable structure for each theme (Material 3, Fluent 2, Bootstrap 5.3, Tailwind 3.4)
Customizing primary, success, warning, danger, info colors
Runtime color modification with TypeScript
Theme-specific variable formats (RGB vs hex values)
Material 3 color system (primary, secondary, tertiary, surface)

📄 阅读： references/css-variables.md

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

Icon Library

图标库

📄 Read: references/icons.md

Setting up the icon library (npm or CDN)
Using icons with
```
e-icons
```
class
Icon sizing (small, medium, large)
Customizing icon color and appearance
Available icon sets per theme

📄 阅读： references/icons.md

图标库的设置（npm或CDN方式）
使用
```
e-icons
```
类调用图标
图标尺寸（小、中、大）
自定义图标颜色与外观
各主题可用的图标集

Size Modes

尺寸模式

📄 Read: references/advanced-theming.md

Normal vs touch (bigger) size modes
Enabling size modes globally or per-component
Runtime size mode switching

📄 阅读： references/advanced-theming.md

普通模式与触控（更大尺寸）模式
全局或组件级启用尺寸模式
运行时尺寸模式切换

Advanced Features

高级功能

📄 Read: references/advanced-theming.md

Component styling integration
Theme Studio for custom theme creation

📄 阅读： references/advanced-theming.md

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

Quick Start

快速入门

Install and Apply a Theme

安装并应用主题

Step 1: Install Syncfusion Angular Package

bash

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

Step 2: Import Theme CSS

css

/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";

Or use CDN (ensure version matches your npm packages):

html

<!-- angular.json - Add to styles array -->
"styles": [
  "https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css"
]

步骤1：安装Syncfusion Angular包

bash

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

步骤2：导入主题CSS

css

/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";

或使用CDN（确保版本与npm包一致）：

html

<!-- angular.json - 添加到styles数组 -->
"styles": [
  "https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css"
]

Common Patterns

常见模式

Pattern 1: Apply Dark Mode Globally

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

typescript

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');
    }
  }
}

typescript

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');
    }
  }
}

Pattern 2: Customize Primary Color with CSS Variables

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

For Fluent 2 Theme:

css

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

For Material 3 Theme (uses RGB values):

css

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

针对Fluent 2主题：

css

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

针对Material 3主题（使用RGB值）：

css

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

Pattern 3: Enable Touch Mode Globally

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

html

<!-- index.html -->
<body class="e-bigger">
  <app-root></app-root>
</body>

Or per-component:

typescript

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

html

<!-- index.html -->
<body class="e-bigger">
  <app-root></app-root>
</body>

或组件级启用：

typescript

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

Pattern 4: Use Optimized CSS for Faster Loading

模式4：使用优化版CSS加快加载速度

css

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

css

/* src/styles.css - 精简版，不含更大尺寸模式样式 */
@import "@syncfusion/ej2/tailwind3-lite.css";

Pattern 5: Use Icons from Syncfusion Library

模式5：使用Syncfusion库中的图标

Install icons package:

bash

npm install @syncfusion/ej2-icons/@latest

Import icon styles:

css

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

Use icons in components:

html

<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>

安装图标包：

bash

npm install @syncfusion/ej2-icons/@latest

导入图标样式：

css

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

在组件中使用图标：

html

<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>

syncfusion-angular-themes

Original

Translation

Themes in Syncfusion Angular Components

Syncfusion Angular 组件的主题定制

Table of Contents

目录

Documentation and Navigation Guide

文档与导航指南

Built-in Themes

内置主题

Dark Mode Implementation

暗黑模式实现

CSS Variables Customization

CSS变量自定义

Icon Library

图标库

Size Modes

尺寸模式

Advanced Features

高级功能

Quick Start

快速入门

Install and Apply a Theme

安装并应用主题

Common Patterns

常见模式

Pattern 1: Apply Dark Mode Globally

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

Pattern 2: Customize Primary Color with CSS Variables

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

Pattern 3: Enable Touch Mode Globally

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

Pattern 4: Use Optimized CSS for Faster Loading

模式4：使用优化版CSS加快加载速度

Pattern 5: Use Icons from Syncfusion Library

模式5：使用Syncfusion库中的图标