Semantic UI 中的主题系统是一个强大的框架，能够实现 UI 组件的统一样式和定制。它使用结构化的变量和覆盖层级，允许开发者在不修改核心组件文件的情况下对 UI 进行主题化。本文档将解释主题系统的架构和用法，重点关注主题的结构、继承和定制方式。
有关构建和编译主题的信息，请参阅 构建系统 文档。
Semantic UI 的主题系统围绕着一套由 LESS 处理以生成 CSS 输出的主题文件层级构建。这种架构在保持组件间一致性的同时，提供了对样式的精细控制。
关键组件
来源
theme.config 文件作为选择哪个主题应用于每个组件的控制点。它包含在编译过程中决定使用哪个主题的变量和覆盖的映射。
这种配置允许为不同组件混合搭配主题，从而创建统一的自定义外观，同时保持 UI 的一致性。
来源
Semantic UI 中的主题以递增特性的层级结构组织
| 复杂度 | 描述 | 文件路径模式 | 目的 |
|---|---|---|---|
| 网站 | 全局变量 | themes/{theme}/globals/site.variables | 设置 UI 范围内的默认值 |
| 元素 | 基本 UI 元素 | themes/{theme}/elements/{element}.variables | 样式化基本元素 |
| 集合 | 元素组 | themes/{theme}/collections/{collection}.variables | 样式化元素集合 |
| 模块 | 复杂组件 | themes/{theme}/modules/{module}.variables | 样式化交互式组件 |
| 视图 | 内容显示 | themes/{theme}/views/{view}.variables | 样式化内容呈现 |
这种层级结构确保了全局样式决策能够正确地应用于特定组件，从而保持视觉一致性。
来源
每个组件都有一个 .variables 文件，通过 LESS 变量定义其可定制的方面。例如，从图标组件变量开始
这些变量控制组件外观的各个方面，包括不透明度、尺寸、间距和大小选项。
来源
具有 .overrides 扩展名的覆盖文件（Override files）为组件提供直接的 CSS 注入，允许进行仅通过变量无法实现的更复杂的定制
这些覆盖文件将特定的 CSS 规则直接插入到编译后的样式表中。
来源
组件 LESS 文件通过导入主题配置并使用定义的变量来引用主题系统
@import 语句会导入 theme.config 文件，该文件随后根据主题配置导入相应的变量和覆盖文件。
来源
Semantic UI 的主题系统利用继承来实现高效定制
继承过程
这种继承模式意味着您只需要在自定义主题中指定要更改的变量，而无需重新创建整个主题。
来源
创建自定义主题
src/themes/ 下创建一个新文件夹（例如 src/themes/myTheme/）myTheme/
├── elements/
│ └── icon.variables
├── collections/
│ └── message.variables
└── globals/
└── site.variables
.variables 和/或 .overrides 文件theme.config 以便为所需组件使用您的主题您的自定义主题文件只需要包含您要更改的变量。所有其他变量将继承自默认主题。
这是一个定制消息组件的实际示例
在此示例中
theme.config 为消息指定了“custom”主题来源
主题系统使用一致的变量命名约定
| 前缀 | 示例 | 目的 |
|---|---|---|
| @ | @color | LESS 变量 |
| @default... | @defaultBorderRadius | 全局默认值 |
| @ + component | @iconWidth | 组件特定变量 |
| @ + variation | @linkOpacity | 变体特定变量 |
| @ + size | @mini, @huge | 尺寸变体 |
理解这些约定有助于阅读和修改主题变量。
来源
Semantic UI 主题系统为 UI 组件的样式化提供了一种结构化且灵活的方法。通过其层级变量系统、覆盖能力和主题继承，它可以在不修改核心文件的情况下实现一致的样式和强大的自定义选项。
主要优势
有关创建自定义主题的更多信息，请参阅 创建自定义主题。