修改主题配置
在主题编辑器中，您可以通过六个标签页详细自定义主题。本指南介绍各个配置页面的功能和操作方法。
进入主题编辑器
编辑现有主题
- 在自定义主题页面，点击主题卡片右上角的三点菜单（⋮）
- 选择"编辑"
创建新主题
- 点击"创建新主题"卡片
- 选择基础模板开始自定义
主题编辑器界面
主题编辑器包含六个主要配置标签页：
1. 基本信息 (⚙️)
- 主题名称：给您的主题起一个容易识别的名称
- 主题描述：简短描述主题特色或适用场景
- 预览功能：实时查看主题效果
2. 配色方案 (🎨)
- 浅色模式配置：设置浅色主题的颜色
- 深色模式配置：设置深色主题的颜色
- 主要颜色：主色调、次要色调
- 语义颜色：错误、警告、信息、成功状态颜色
- 背景颜色：默认背景、纸张背景
- 文字颜色：主要文字、次要文字、禁用文字
- 操作颜色：悬停、选中、焦点状态
3. 字体排版 (📝)
- 全局字体设置：字体系列、基础大小
- 标题字体：H1-H6 各级标题的大小和样式
- 正文字体：Body1、Body2 正文字体配置
- 按钮字体：按钮文字样式
- 说明字体：小字体样式
4. 组件自定义 (🧩)
主要组件配置卡片：
- CssBaseline：全局样式基础设置
- List：列表容器的基本样式
- ListItem：列表项的样式和间距
- ListItemButton：⭐ 列表按钮样式（侧面板标签页使用）
- Avatar：头像组件的大小和形状
- IconButton：图标按钮的样式
- Icon：图标的大小和颜色
- Menu：菜单的背景和间距
- MenuItem：菜单项的样式
- Dialog：对话框的外观
- DialogTitle：对话框标题样式
- ButtonBase：基础按钮属性
- Button：普通按钮样式
带 ⭐ 标记的组件对界面影响较大
5. JSON 编辑器 (📄)
- 直接编辑：以 JSON 格式编辑完整主题配置
- 格式化：自动格式化 JSON 代码
- 验证：检查 JSON 语法错误
- 高级用户：适合有编程经验的用户
6. 全局样式 (🎨)
- 自定义 CSS：添加额外的 CSS 样式
- 高级定制：覆盖默认样式
- 注意：需要 CSS 知识
保存和预览
实时预览
- 编辑时会实时显示预览效果
- 更改立即在界面中体现
保存选项
- 保存按钮：保存当前更改
- 取消按钮：放弃更改并返回
重要提示
- 自定义主题功能需要高级会员权限
- 编辑过程中会实时预览效果
- 保存后主题会立即应用到整个扩展
常用操作技巧
- 先从配色方案开始：设置主要颜色基调
- 调整字体大小：优化阅读体验
- 重点关注 ListItemButton：影响侧面板标签页显示
- 使用预览功能：随时查看实际效果
- 善用组件说明：每个组件都有详细说明其作用