创建自定义主题

主题系统概述

Semantic UI 的主题系统旨在高度可定制，同时保持组件之间的一致性。它使用分层的变量继承模型，允许您在不同级别的特异性修改组件的外观。

来源：README.md, src/definitions/collections/message.less

主题目录结构

Semantic UI 主题遵循一种反映组件层次结构的特定组织。理解这种结构对于创建有效的主题至关重要。

来源：src/themes/default/collections/message.variables

结构包括

themes/ - 包含所有主题的根目录
- default/ - 提供默认样式的基础主题
- your-theme/ - 您的自定义主题目录
  - globals/ - 包含站点范围内的变量
    - site.variables - 影响所有组件的全局变量
  - elements/ - 基本 UI 元素（按钮、输入框等）的变量
  - collections/ - 集合（表单、菜单等）的变量
  - modules/ - 交互式模块（下拉菜单、模态框等）的变量
  - views/ - 视图组件（卡片、项目等）的变量

每个组件有两个关键文件

component.variables - 定义组件的变量
component.overrides - 包含更具体的自定义的额外 LESS/CSS

创建自定义主题

步骤 1：设置主题目录

在 src/themes/ 文件夹中创建一个名为您主题的新目录

src/themes/my-custom-theme/

步骤 2：配置 theme.config

theme.config 文件是指定要为每种组件类型使用哪个主题的中央配置文件。修改它以将您的自定义主题用于所需的组件。

来源：src/definitions/collections/message.less

步骤 3：创建变量文件

对于您要自定义的每个组件，请在相应的子目录中创建 .variables 文件

对于全局更改：my-custom-theme/globals/site.variables
对于特定组件：my-custom-theme/collections/message.variables

步骤 4：覆盖变量

在您的变量文件中，仅指定您要更改的变量。继承系统将为未明确定义的任何内容使用默认值。

例如，要自定义消息组件

/* In my-custom-theme/collections/message.variables */
@background: #F0F7FF;  /* Custom background color */
@borderRadius: 0px;    /* Remove border radius */

主题继承模型

Semantic UI 对变量使用三级继承模型

来源：README.md, src/themes/default/collections/message.variables

默认主题：为所有变量提供基本值
站点变量：影响所有组件的全局变量
组件变量：特定于每个 UI 组件

创建自定义主题时，您只需指定要更改的变量 - 所有其他值将继承自默认主题。

自定义特定组件

示例：自定义消息组件

要自定义消息组件，您需要

创建 my-custom-theme/collections/message.variables
覆盖特定变量

您可能要自定义的示例变量

可变	目的	默认值
@background	背景颜色	#F8F8F9
@borderRadius	圆角半径	@defaultBorderRadius
@boxShadow	阴影效果	@borderShadow, @shadowShadow
@headerFontSize	标题文本大小	@relativeLarge
@verticalPadding	上下内边距	1em
@horizontalPadding	左右内边距	1.5em

来源：src/themes/default/collections/message.variables:11-25

使用覆盖文件

对于仅靠变量无法实现的更复杂的自定义，请使用 .overrides 文件

/* In my-custom-theme/collections/message.overrides */
.ui.message {
  text-transform: uppercase;
}

主题创建最佳实践

从小处着手：从自定义几个关键变量开始，而不是创建全新的主题
利用继承：仅指定与默认主题不同的部分
有逻辑地组织：将相关的变量更改分组
详细记录：添加注释以解释自定义的目的
跨组件测试：确保您的主题与您使用的所有组件都能良好协作
版本控制：将您的主题保存在版本控制系统中

主题测试和迭代

创建自定义主题后

使用 Gulp 重建：gulp build
在不同组件和屏幕尺寸上测试您的主题
根据需要调整变量
考虑为不同目的创建多个主题（深色模式、高对比度等）

来源: README.md

结论

Semantic UI 的主题系统为创建一致、定制化的界面提供了强大的方式。通过理解主题结构和继承模型，您可以创建从细微调整到完全视觉改造的主题，同时保持框架的可访问性和响应式功能。

Semantic UI 提供了超过 3000 个可自定义的变量，让您无需具备深厚的 CSS 知识即可对 UI 的外观进行前所未有的控制。

创建自定义主题

主题系统概述

主题目录结构

创建自定义主题

步骤 1：设置主题目录

步骤 2：配置 theme.config

步骤 3：创建变量文件

步骤 4：覆盖变量

主题继承模型

自定义特定组件

示例：自定义消息组件

使用覆盖文件

主题创建最佳实践

主题测试和迭代

结论

本页内容