mcpField
S
syncfusion-javascript-themes

syncfusion-javascript-themes

github.com/syncfusion设计与 UI070 次安装1 周前更新
代码仓库

关于 syncfusion-javascript-themes

为 Syncfusion JavaScript 控件提供主题应用与定制指导的技能，适用于构建 JavaScript 应用的开发者。内容涵盖内置主题、深色模式、CSS 变量、图标和尺寸模式等实践。

主要功能

  1. 01应用内置主题与精简 CSS
  2. 02实现全局或组件级深色模式
  3. 03通过 CSS 变量自定义颜色
  4. 04配置图标、字体与尺寸模式
  5. 05使用 Theme Studio 创建主题

适用场景

  1. 01为 Syncfusion 控件应用主题样式
  2. 02按用户操作切换深色模式
  3. 03调整应用主色与控件外观

安装

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

$npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-themes

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

包含的文件

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

references/
advanced-theming.md
built-in-themes.md
css-variables.md
dark-mode.md
icons.md
migration-styles.md

详细介绍

Syncfusion JavaScript 控件中的主题

Syncfusion JavaScript 控件提供全面的主题支持，包含现代且可自定义的主题。本技能将指导你应用主题、自定义外观、实现深色模式、使用 CSS 变量、管理图标，以及创建自定义主题，从而打造风格统一、专业的 JavaScript 应用程序。

目录

文档与导航指南

内置主题

📄 阅读： 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）
  • 自定义 primary、success、warning、danger、info 颜色
  • 使用 JavaScript 在运行时修改颜色
  • 各主题专用的变量格式（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 JavaScript 包和主题包

npm install @syncfusion/ej2-buttons @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

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

查找已安装的版本：

npm list @syncfusion/ej2-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 版本保持同步。

常见模式

全局应用深色模式
import { CheckBox } from '@syncfusion/ej2-buttons';
import { Button } from '@syncfusion/ej2-buttons';

// Initialize dark mode checkbox
const darkModeCheckBox: CheckBox = new CheckBox({
  label: 'Enable Dark Mode',
  change: (args) => {
    const isChecked: boolean = args.checked ?? false;
    
    if (isChecked) {
      document.body.classList.add('e-dark-mode');
    } else {
      document.body.classList.remove('e-dark-mode');
    }
  }
});
darkModeCheckBox.appendTo('#darkModeCheckbox');

// Initialize sample button
const button: Button = new Button({
  cssClass: 'e-primary',
  content: 'Sample Button'
});
button.appendTo('#sampleButton');
使用 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 */
}
全局启用触控模式

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

或按组件启用：

import { Button } from '@syncfusion/ej2-buttons';

const button: Button = new Button({
  cssClass: 'e-bigger',
  content: 'Touch-Friendly Button'
});
button.appendTo('#button');
使用经过优化的 CSS 加快加载速度
/* src/styles.css - Lite version without bigger mode styles */
@import "@syncfusion/ej2-tailwind3-theme/styles/tailwind3-lite.css";
使用 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 control package icon styles */
@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>

评论

支持 Markdown