syncfusion-blazor-themes

Syncfusion Blazor 主题

有关如何使用 Theme Studio、SCSS 覆盖和适用于生产环境的最佳实践来应用和自定义 Syncfusion Blazor 组件主题的完整指南。

适用场景

在以下情况下使用此技能：

• 应用内置 Syncfusion 主题（Material 3、Bootstrap 5、Fluent、Tailwind 等）
• 使用 Theme Studio 以交互方式自定义主题颜色
• 生成经过筛选的最小 CSS 包，仅包含你使用的组件
• 使用 Sass @use 和 CSS 自定义属性覆盖主题变量
• 使用轻量主题变体来减小包大小
• 导入并重用已保存的主题设置（settings.json）

请勿用于：

• 初始 Blazor 项目设置 → 使用 syncfusion-blazor-common
• 脚本加载和 CRG 包 → 使用 syncfusion-blazor-common
• 样式表的 CSP 配置 → 使用 syncfusion-blazor-security

快速参考

• Theme Studio 完整指南：请参阅 theme-appearance.md

可用主题一览

主题	描述
Material 3	Google Material Design 3（推荐的默认主题）
Bootstrap 5	Bootstrap 5 设计系统
Fluent / Fluent 2	Microsoft Fluent Design System
Tailwind CSS	Tailwind CSS 设计令牌
Bootstrap 4	Bootstrap 4 设计系统
Material	原始 Material Design
High Contrast	符合 WCAG 标准的无障碍主题

轻量主题变体（例如 fluent2-lite.css）不包含网页字体，非常适合离线或带宽受限的环境。

快速设置：添加主题

Blazor Web App（.NET 8+）

添加到 ~/Components/App.razor 中的 <head>：

<link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />

Blazor WebAssembly 独立版

添加到 wwwroot/index.html 中的 <head>：

<link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />

⚠️ 重要：同一时间只能引用一个 Syncfusion 基础主题，以避免样式冲突。

Theme Studio 工作流

1. 打开 Blazor Theme Studio
2. 选择基础主题，并通过实时预览自定义颜色
3. 筛选并仅包含应用中使用的组件（减小 CSS 大小）
4. 下载软件包——其中包含 .css、.scss 和 settings.json
5. 将 CSS 复制到 ~/wwwroot/styles/，并在宿主页中引用
6. 将 settings.json 保存到版本控制中，以便日后更新

SCSS 变量覆盖示例

/* Custom.scss */
:root {
  --color-primary-override: 54, 34, 89;
}

@use 'material3.scss' with (
  $primary: var(#{--color-primary-override})
);