syncfusion-vue-themes

Syncfusion Vue 组件中的主题

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

目录

• 文档与导航指南
• 快速入门
• 常见模式

文档与导航指南

内置主题

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

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

暗色模式实现

📄 阅读： references/dark-mode.md

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

CSS 变量自定义

📄 阅读： references/css-variables.md

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

图标库

📄 阅读： references/icons.md

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

尺寸模式

📄 阅读： references/advanced-theming.md

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

高级功能

📄 阅读： references/advanced-theming.md

• 集成 styled-components
• 自定义所有组件的字体
• 使用 Theme Studio 创建自定义主题

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

📄 阅读： references/migration-styles.md

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

快速入门

安装并应用主题

步骤 1：安装 Syncfusion Vue 包和主题包

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

步骤 2：导入主题 CSS

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

/* src/App.vue - <style> section */
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/button/index.css";

选项 2：使用 CDN

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

查找已安装的版本：

npm list @syncfusion/ej2-vue-buttons

然后使用匹配的 CDN 版本：

<link href="https://cdn.syncfusion.com/ej2/{VERSION}/tailwind3.css" rel="stylesheet"/>


<link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet"/>

注意： 建议使用 npm 导入（选项 1），因为它可以自动保持 CSS 和 JavaScript 版本同步。

常见模式

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

<template>
  <div>
    <ejs-checkbox 
      label="Enable Dark Mode" 
      :checked="isDarkMode" 
      @change="handleDarkModeToggle"
    />
    <ejs-button cssClass="e-primary">Sample Button</ejs-button>
  </div>
</template>

<script>
import { CheckBoxComponent } from '@syncfusion/ej2-vue-buttons';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

export default {
  components: {
    'ejs-checkbox': CheckBoxComponent,
    'ejs-button': ButtonComponent
  },
  data() {
    return {
      isDarkMode: false
    };
  },
  methods: {
    handleDarkModeToggle(event) {
      this.isDarkMode = event.checked ?? false;
      
      if (this.isDarkMode) {
        document.body.classList.add('e-dark-mode');
      } else {
        document.body.classList.remove('e-dark-mode');
      }
    }
  }
};
</script>

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

对于 Fluent 2 主题：

<style>
:root {
  --color-sf-primary: #ff6b35;  /* Custom orange */
}
</style>

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

<style>
:root {
  --color-sf-primary: 255, 107, 53;  /* RGB: Custom orange */
}
</style>

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

<body class="e-bigger">
  <div id="app"></div>
</body>

或按组件启用：

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

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

```vue
<style>
/* Lite version without bigger mode styles */
@import "@syncfusion/ej2-tailwind3-theme/styles/tailwind3-lite.css";
</style>

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

安装图标包：

你可以安装图标包或主题包：

npm install @syncfusion/ej2-icons@latest

/* or */

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

导入图标样式：

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

/* or */

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

在组件中使用图标：

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