> For the complete documentation index, see [llms.txt](https://docs.verge.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.verge.io/run-the-platform/zh/xi-tong-guan-li/themes.md).

# VergeOS 主题功能

VergeOS 提供了一个全面的主题系统，使管理员能够自定义用户界面的视觉外观。主题功能可对不同 UI 组件的颜色进行细粒度控制，包括图表、导航元素、页眉、加载器以及通用界面元素。

## 概述

VergeOS 主题系统使组织能够创建自定义视觉主题，以修改界面颜色和品牌元素。该功能超越了基础 UI 品牌化，可对特定 UI 组件组提供详细控制，从而实现全面的视觉定制，使其能够与企业品牌保持一致或改善用户体验。

## 你将学到什么

本指南将说明 VergeOS 主题功能，包括在哪里访问主题功能、可用哪些自定义选项，以及不同主题组件如何协同工作以创建统一的界面外观。

你将了解：

* 在 VergeOS 中哪里可以找到主题管理
* 有哪些主题属性组可供自定义
* 主题创建和管理如何工作
* 支持哪些文件格式和资源
* 主题如何与现有的 UI 品牌系统集成

## 要求

**环境设置：**

* 管理访问权限（集群管理员或租户管理员权限）

**背景知识：**

* 基本的 VergeOS 导航和系统设置访问

## 时间估算

**所需时间：** 10-15 分钟即可了解所有主题选项和功能

## 访问主题管理

### 导航路径

主题系统位于 VergeOS 系统设置中，可通过管理界面访问。

1. **访问系统设置**：导航到 **系统** > **设置** 以进入系统配置区域
2. **主题管理位置**:
   * 在系统设置左侧导航菜单中，你会找到 **主题** 作为一个专门的部分
   * 主题区域以表格形式显示现有主题，包含名称、描述和修改日期列

### 主题管理界面

系统设置页面在 **主题** 部分中显示现有主题，显示：

* **名称**：主题标识符（例如“light”）
* **描述**：主题描述（例如“Verge.io 的浅色主题包”）
* **已修改**：上次修改日期和时间

## 主题创建和管理

### 创建新主题

**新主题访问**：点击 **新主题** 在左侧导航菜单中访问主题创建界面。

**主题创建界面组件**:

#### 基础主题配置

* **名称字段**：主题标识必填字段
* **描述字段**：主题文档的可选描述文本
* **启用开关**：激活或停用该主题
* **基于下拉选项**：在“浅色系统主题”或“深色系统主题”之间选择作为基础

#### 颜色属性组

颜色部分将可自定义的 UI 元素组织为逻辑组：

**图表**:

* 六个独立的图表颜色属性（图表 1-6）
* 每个属性控制图表和可视化中不同数据系列的颜色
* 包括颜色选择器、十六进制值输入、透明度滑块以及单独重置功能

**加载器**:

* **加载器属性**：控制主加载指示器的外观
* **加载追踪器**：配置动画加载元素的颜色
* 加载动画的实时预览

**左侧导航**:

* **背景**：导航面板背景颜色
* **文本**：标准导航文本颜色
* **悬停**：悬停状态的背景颜色
* **悬停文本**：悬停交互期间的文本颜色
* **禁用文本**：非活动导航项的颜色

**页眉**:

* **背景**：主页眉栏背景
* **按钮激活**：活动按钮高亮
* **按钮文本**：标准按钮文本颜色
* **按钮悬停文本**：按钮悬停时的文本颜色
* **导航栏背景**：子页眉导航区域颜色

**常规**:

* **背景**：整个应用程序的背景
* **卡片背景**：卡片式组件的背景
* **卡片边框**：面板和卡片的边框颜色
* **文本**：整个界面中的主文本颜色

#### 资源管理

**自定义 Logo 选项**:

* **自定义 Logo（大）**：用于标准 Logo 显示的 144x36 像素图像
* **自定义 Logo（小）**：用于紧凑区域的 44x44 像素图像
* 支持的格式：JPG、PNG、SVG

**自定义网站图标**:

* 支持 ICO 文件格式，用于自定义浏览器标签页
* 指向“文件”部分的链接，用于资源上传管理

#### 颜色自定义工具

**单个属性控制**:

* **颜色选择器**：可视化颜色选择界面
* **十六进制值输入**：直接输入十六进制颜色代码
* **透明度滑块**：每个颜色属性的透明度控制
* **重置按钮**：将单个属性重置为默认值
* **全局重置**：用于恢复某一组中所有属性的“重置”链接

#### 预览功能

**实时预览**:

* **预览部分**：显示主题更改的实时效果
* **上下文感知预览**：基于所选属性组的不同可视化
* **交互式元素**：预览包括悬停状态和交互组件

## 主题属性组说明

### 图表属性组

控制整个 VergeOS 中图表、图形和数据可视化的配色方案。每个图表属性（1-6）代表不同的数据系列颜色，使仪表板和报表界面中的数据可视化品牌保持一致。

### 加载器属性组

管理加载指示器和进度元素的外观。加载器属性控制主旋转图标或进度条颜色，而加载追踪器处理加载界面中的动画元素。

### 左侧导航属性组

自定义出现在 VergeOS 界面左侧的主导航面板。各属性控制背景颜色、文本颜色和交互状态，以确保导航保持功能性和视觉一致性。

### 页眉属性组

管理顶部页眉栏及其组件，包括按钮、导航元素和背景颜色。这些设置会影响包含系统导航和用户控件的主界面页眉。

### 通用属性组

控制基础界面元素，包括整体背景、卡片组件、边框和主文本颜色。这些属性构成了其他组件所依赖的基础视觉外观。

## 与现有品牌的集成

### 资源集成

通过主题系统上传的自定义 Logo 和网站图标会与配色方案集成，从而提供完整的视觉定制。资源在适应所选配色方案的同时，会保持其质量和位置。

## 主题应用和管理

### 主题激活

提交按钮保存后，主题会立即应用。启用开关允许创建和存储主题，而无需立即激活。

### 主题层级

在多租户环境中，主题适用于当前租户级别，并会继承到更低级别，除非被覆盖。这使得能够在组织层级中保持一致的品牌形象，同时在需要时允许自定义。

### 主题持久性

主题设置作为 VergeOS 系统配置的一部分进行存储，并会在系统更新和重启后保留。主题配置可作为系统备份和恢复流程的一部分导出和导入。

## 支持的文件格式和规格

### Logo 要求

* **大 Logo**：144x36 像素，JPG/PNG/SVG 格式
* **小 Logo**：44x44 像素，JPG/PNG/SVG 格式
* 文件大小建议：为获得最佳性能，低于 1MB

### 网站图标规格

* **格式化**：需要 ICO 文件格式
* **推荐尺寸**：单个 ICO 文件中包含 16x16、32x32、48x48 像素
* 现代浏览器对 PNG 格式的回退支持

### 颜色格式支持

* **十六进制值**：标准 6 位十六进制颜色代码（#RRGGBB）
* **透明度**：基于百分比的透明度（0-100%）
* **颜色选择器**：可视化 RGB/HSV 选择界面
* **重置功能**：立即恢复为系统默认值

VergeOS 主题功能提供了全面的视觉定制能力，使组织能够创建统一且具备品牌特色的界面，同时在其虚拟化平台上保持可用性和可访问性标准。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.verge.io/run-the-platform/zh/xi-tong-guan-li/themes.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.