VergeOS 主题功能

如何在 VergeOS 中创建和管理自定义 UI 主题，包括图表、导航、标题、加载元素、自定义徽标、网站图标和主题层级的颜色自定义。

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