HOME / 第 4 部分 · UI 界面 · 动画 · 特效 / 第 38 课
MODULE 4 · UI 界面 · 动画 · 特效
第 38 课 · 主题（Theme）与全局样式
🎯 本课学习目标
- 理解主题（Theme）的作用
- 创建并应用全局主题
- 用 StyleBox 做统一按钮样式
想所有按钮统一风格？用主题（Theme）。本课建立全局 UI 主题，一套样式管全项目。
📖 详细教学步骤
什么是主题？概念
主题（Theme）集中管理 UI 样式：
- 字体、颜色、字号、按钮背景、圆角等
- 一个主题应用到根节点，所有子控件自动继承
- 改主题 = 全局换皮肤，非常高效
创建主题资源操作
- 在资源面板右键 → 新建资源（New Resource）→
Theme，命名 ui_theme.tres - 双击打开主题编辑器
- 在「类型」列表选择要改的控件（Button、Label、Panel...）
- 设置对应样式/颜色/字体
给 Button 定义主题样式操作
- 在主题编辑器选 Button
- 展开 Styles → 编辑 Normal（正常）、Hover（悬停）、Pressed（按下）
- 每个都新建 StyleBoxFlat，设置背景色、圆角、边框
- 三种状态做出「悬浮变亮、按下变暗」效果
💡 这是按钮风格统一的关键。
应用主题到全项目操作
- 打开项目设置 → 常规 → Gui → Theme → Custom
- 选择 ui_theme.tres
- 全项目所有 UI 自动套用主题
💡 或在某个 UI 根节点检查器 Theme 属性里指定，只对该子树生效。
用代码加载主题代码
也可以在代码里临时换主题：
GDSCRIPTfunc _ready():
var theme = load("res://assets/ui_theme.tres")
$CanvasLayer.theme = theme主题覆盖层级概念
样式优先级（从低到高）：
- 全局主题（项目设置）
- 控件 Theme 属性（局部主题）
- 控件 Theme Overrides（单个控件临时样式，最高）
想「个别按钮特殊」就用 Theme Overrides，想「全局统一」就用 Theme。
⚠️
主题改了没效果？
确认主题应用到正确的根节点/项目设置，且类型选对（Button 样式要选 Button 类型）。
⚠️
个别控件不想用主题？
给它设置 Theme Overrides 会覆盖全局主题，或用 theme_type_variation。
🧪 动手试一试
🏋️ 课后练习
创建一套主题：所有按钮统一「深蓝底 + 青色圆角 + 悬停变亮」样式，应用到整个项目，观察现有界面全部换肤。
主题编辑器 Button 类型 → Normal/Hover/Pressed 三个 StyleBoxFlat。
💡
主题文件 .tres 是文本资源，可复制复用给其他项目。
💡
做游戏先定「主题」再摆控件，返工最少。
🎓 本课小结
主题（Theme）集中管理全局 UI 样式：建 .tres → 定义各控件类型样式 → 应用到项目设置；Theme Overrides 优先级最高，可局部微调。