syncfusion-react-themes

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Themes in Syncfusion React Components

Syncfusion React组件中的主题

Syncfusion React 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 React applications.

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

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 JavaScript
Theme-specific variable formats (RGB vs hex values)
Material 3 color system (primary, secondary, tertiary, surface)

📄 阅读： references/css-variables.md

各主题的CSS变量结构（Material 3、Fluent 2、Bootstrap 5.3、Tailwind 3.4）
自定义主色、成功色、警告色、危险色、信息色
使用JavaScript在运行时修改颜色
主题特定的变量格式（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

Styled-components integration
Font customization across all components
Theme Studio for custom theme creation

📄 阅读： references/advanced-theming.md

Styled-components集成
全组件字体自定义
使用Theme Studio创建自定义主题

Quick Start

快速入门

Install and Apply a Theme

安装并应用主题

Step 1: Install Syncfusion React Package

bash

npm install @syncfusion/ej2-react-buttons --save

Step 2: Import Theme CSS

css

/* src/App.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

<!-- index.html -->
<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet"/>

步骤1：安装Syncfusion React包

bash

npm install @syncfusion/ej2-react-buttons --save

步骤2：导入主题CSS

css

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

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

html

<!-- index.html -->
<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet"/>

Common Patterns

常见使用模式

Pattern 1: Apply Dark Mode Globally

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

typescript

import React, { useState } from 'react';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const handleDarkModeToggle = (event) => {
    const checked = event.checked ?? false;
    setIsDarkMode(checked);
    
    if (checked) {
      document.body.classList.add('e-dark-mode');
    } else {
      document.body.classList.remove('e-dark-mode');
    }
  };

  return (
    <div>
      <CheckBoxComponent 
        label="Enable Dark Mode" 
        checked={isDarkMode} 
        change={handleDarkModeToggle}
      />
      <ButtonComponent cssClass="e-primary">Sample Button</ButtonComponent>
    </div>
  );
}

export default App;

typescript

import React, { useState } from 'react';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const handleDarkModeToggle = (event) => {
    const checked = event.checked ?? false;
    setIsDarkMode(checked);
    
    if (checked) {
      document.body.classList.add('e-dark-mode');
    } else {
      document.body.classList.remove('e-dark-mode');
    }
  };

  return (
    <div>
      <CheckBoxComponent 
        label="Enable Dark Mode" 
        checked={isDarkMode} 
        change={handleDarkModeToggle}
      />
      <ButtonComponent cssClass="e-primary">Sample Button</ButtonComponent>
    </div>
  );
}

export default App;

Pattern 2: Customize Primary Color with CSS Variables

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

For Fluent 2 Theme:

css

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

For Material 3 Theme (uses RGB values):

css

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

针对Fluent 2主题：

css

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

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

css

/* src/App.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">
  <div id="root"></div>
</body>

Or per-component:

typescript

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

html

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

或组件级启用：

typescript

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

Pattern 4: Use Optimized CSS for Faster Loading

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

css

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

css

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

Pattern 5: Use Icons from Syncfusion Library

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

Install icons package:

bash

npm install @syncfusion/ej2-icons

Import icon styles:

css

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

Use icons in components:

typescript

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

安装图标包：

bash

npm install @syncfusion/ej2-icons

导入图标样式：

css

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

在组件中使用图标：

typescript

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

Original

Translation

Themes in Syncfusion React Components

Syncfusion React组件中的主题

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库中的图标