> 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/vi/quan-tri-he-thong/themes.md).

# Chức năng giao diện VergeOS

VergeOS cung cấp một hệ thống Chủ đề toàn diện cho phép quản trị viên tùy chỉnh diện mạo trực quan của giao diện người dùng. Chức năng Chủ đề cung cấp khả năng kiểm soát chi tiết đối với màu sắc trên các thành phần UI khác nhau, bao gồm biểu đồ, các phần điều hướng, tiêu đề, trình tải và các thành phần giao diện chung.

## Tổng quan

Hệ thống Chủ đề của VergeOS cho phép các tổ chức tạo các chủ đề trực quan tùy chỉnh để thay đổi màu sắc giao diện và các yếu tố nhận diện thương hiệu. Chức năng này vượt xa việc xây dựng thương hiệu UI cơ bản bằng cách cung cấp khả năng kiểm soát chi tiết đối với các nhóm thành phần UI cụ thể, cho phép tùy chỉnh hình ảnh toàn diện có thể phù hợp với thương hiệu doanh nghiệp hoặc cải thiện trải nghiệm người dùng.

## Bạn sẽ học được gì

Hướng dẫn này giải thích chức năng Chủ đề của VergeOS, bao gồm nơi truy cập các tính năng chủ đề, các tùy chọn tùy chỉnh có sẵn và cách các thành phần chủ đề khác nhau hoạt động cùng nhau để tạo ra một giao diện nhất quán.

Bạn sẽ hiểu:

* Tìm quản lý chủ đề ở đâu trong VergeOS
* Những nhóm thuộc tính chủ đề nào có thể tùy chỉnh
* Cách thức tạo và quản lý chủ đề
* Những định dạng tệp và tài nguyên nào được hỗ trợ
* Chủ đề tích hợp với hệ thống nhận diện thương hiệu UI hiện có như thế nào

## Yêu cầu

**Thiết lập môi trường:**

* Quyền truy cập quản trị (quyền Cluster Admin hoặc Tenant Admin)

**Kiến thức nền tảng:**

* Điều hướng cơ bản trong VergeOS và quyền truy cập cài đặt hệ thống

## Ước tính thời gian

**Thời gian khám phá:** 10-15 phút để hiểu tất cả các tùy chọn và chức năng của chủ đề

## Truy cập Quản lý Chủ đề

### Đường dẫn điều hướng

Hệ thống Chủ đề nằm trong cài đặt hệ thống VergeOS, có thể truy cập thông qua giao diện quản trị.

1. **Truy cập Cài đặt Hệ thống**: Điều hướng đến **Hệ thống** > **Cài đặt** để truy cập khu vực cấu hình hệ thống
2. **Vị trí Quản lý Chủ đề**:
   * Trong menu điều hướng bên trái của Cài đặt Hệ thống, bạn sẽ thấy **Giao diện** như một mục riêng biệt
   * Khu vực Chủ đề hiển thị các chủ đề hiện có theo dạng bảng với các cột Tên, Mô tả và Ngày sửa đổi

### Giao diện Quản lý Chủ đề

Trang Cài đặt Hệ thống hiển thị các chủ đề hiện có trong **Giao diện** mục, hiển thị:

* **Tên**: Mã định danh của chủ đề (ví dụ: "light")
* **Mô tả**: Mô tả chủ đề (ví dụ: "Gói chủ đề sáng cho Verge.io")
* **Đã sửa đổi**: Ngày và giờ sửa đổi gần nhất

## Tạo và Quản lý Chủ đề

### Tạo Chủ đề Mới

**Truy cập Chủ đề Mới**: Nhấp **Chủ đề Mới** trong menu điều hướng bên trái để truy cập giao diện tạo chủ đề.

**Các thành phần của giao diện Tạo Chủ đề**:

#### Cấu hình Chủ đề Cơ bản

* **Trường Tên**: Trường bắt buộc để nhận diện chủ đề
* **Trường Mô tả**: Văn bản mô tả tùy chọn cho tài liệu chủ đề
* **Công tắc Bật**: Kích hoạt hoặc vô hiệu hóa chủ đề
* **Danh sách thả xuống Dựa trên**: Chọn giữa "Chủ đề hệ thống sáng" hoặc "Chủ đề hệ thống tối" làm nền tảng

#### Các nhóm thuộc tính màu

Mục Màu sắc sắp xếp các phần tử UI có thể tùy chỉnh thành các nhóm logic:

**Biểu đồ**:

* Sáu thuộc tính màu biểu đồ riêng lẻ (Biểu đồ 1-6)
* Mỗi thuộc tính kiểm soát màu cho các chuỗi dữ liệu khác nhau trong biểu đồ và trực quan hóa
* Bao gồm bộ chọn màu, nhập giá trị hex, thanh trượt độ mờ và chức năng đặt lại riêng lẻ

**Trình tải**:

* **Thuộc tính Trình tải**: Kiểm soát giao diện của chỉ báo tải chính
* **Bộ chạy của Trình tải**: Cấu hình màu sắc của phần tử tải động
* Xem trước theo thời gian thực các hoạt ảnh tải

**Điều hướng Bên trái**:

* **Nền**: Màu nền của bảng điều hướng
* **Văn bản**: Màu văn bản điều hướng tiêu chuẩn
* **Di chuột**: Màu nền cho trạng thái di chuột
* **Văn bản khi di chuột**: Màu văn bản trong khi tương tác di chuột
* **Văn bản bị vô hiệu hóa**: Màu cho các mục điều hướng không hoạt động

**Tiêu đề**:

* **Nền**: Nền thanh tiêu đề chính
* **Nút đang hoạt động**: Làm nổi bật nút đang hoạt động
* **Văn bản nút**: Màu văn bản nút tiêu chuẩn
* **Văn bản khi di chuột lên nút**: Màu văn bản trong khi di chuột lên nút
* **Nền Thanh Điều hướng**: Màu của khu vực điều hướng dưới tiêu đề

**Chung**:

* **Nền**: Nền tổng thể của ứng dụng
* **Nền Thẻ**: Nền cho các thành phần dạng thẻ
* **Viền Thẻ**: Màu viền cho các bảng và thẻ
* **Văn bản**: Màu văn bản chính trên toàn bộ giao diện

#### Quản lý Tài nguyên

**Tùy chọn Logo Tùy chỉnh**:

* **Logo Tùy chỉnh (Lớn)**: Hình ảnh 144x36 pixel để hiển thị logo tiêu chuẩn
* **Logo Tùy chỉnh (Nhỏ)**: Hình ảnh 44x44 pixel cho các khu vực nhỏ gọn
* Định dạng được hỗ trợ: JPG, PNG, SVG

**Favicon Tùy chỉnh**:

* Hỗ trợ định dạng tệp ICO để tùy chỉnh tab trình duyệt
* Liên kết đến mục Tệp để quản lý tải tài nguyên lên

#### Công cụ Tùy chỉnh Màu sắc

**Điều khiển Thuộc tính Riêng lẻ**:

* **Bộ chọn Màu**: Giao diện chọn màu trực quan
* **Nhập Giá trị Hex**: Nhập trực tiếp mã màu hệ thập lục phân
* **Thanh trượt Độ mờ**: Điều khiển độ trong suốt cho từng thuộc tính màu
* **Nút Đặt lại**: Đặt lại từng thuộc tính về giá trị mặc định
* **Đặt lại Toàn bộ**: Liên kết "Đặt lại" để khôi phục tất cả các thuộc tính trong một nhóm

#### Chức năng Xem trước

**Xem trước theo Thời gian Thực**:

* **Khu vực Xem trước**: Hiển thị bản thể hiện trực tiếp các thay đổi chủ đề
* **Xem trước Theo Ngữ cảnh**: Các hình ảnh trực quan khác nhau dựa trên nhóm thuộc tính đã chọn
* **Các phần tử Tương tác**: Bản xem trước bao gồm trạng thái di chuột và các thành phần tương tác

## Giải thích các Nhóm Thuộc tính Chủ đề

### Nhóm Thuộc tính Biểu đồ

Kiểm soát bảng màu cho biểu đồ, đồ thị và trực quan hóa dữ liệu trên toàn bộ VergeOS. Mỗi thuộc tính Biểu đồ (1-6) đại diện cho màu của các chuỗi dữ liệu khác nhau, cho phép duy trì nhận diện thương hiệu thống nhất cho việc trực quan hóa dữ liệu trên các bảng điều khiển và giao diện báo cáo.

### Nhóm Thuộc tính Trình tải

Quản lý giao diện của các chỉ báo tải và các phần tử tiến trình. Thuộc tính Trình tải kiểm soát màu của biểu tượng xoay hoặc thanh tiến trình chính, trong khi Bộ chạy Trình tải xử lý các phần tử động trong giao diện tải.

### Nhóm Thuộc tính Điều hướng Bên trái

Tùy chỉnh bảng điều hướng chính xuất hiện ở phía bên trái của giao diện VergeOS. Các thuộc tính kiểm soát màu nền, màu văn bản và trạng thái tương tác để đảm bảo điều hướng vẫn hoạt động và nhất quán về mặt hình ảnh.

### Nhóm Thuộc tính Tiêu đề

Quản lý thanh tiêu đề trên cùng và các thành phần của nó, bao gồm nút bấm, các phần tử điều hướng và màu nền. Các cài đặt này ảnh hưởng đến phần tiêu đề chính của giao diện chứa điều hướng hệ thống và các điều khiển người dùng.

### Nhóm Thuộc tính Chung

Kiểm soát các phần tử giao diện cơ bản bao gồm nền tổng thể, các thành phần thẻ, đường viền và màu văn bản chính. Những thuộc tính này thiết lập nền tảng trực quan mà các thành phần khác xây dựng lên trên.

## Tích hợp với Nhận diện Thương hiệu Hiện có

### Tích hợp Tài nguyên

Logo và favicon tùy chỉnh được tải lên thông qua hệ thống Chủ đề tích hợp với bảng màu để mang lại khả năng tùy chỉnh hình ảnh hoàn chỉnh. Các tài nguyên vẫn giữ nguyên chất lượng và vị trí đồng thời thích ứng với bảng màu đã chọn.

## Áp dụng và Quản lý Chủ đề

### Kích hoạt Chủ đề

Chủ đề được áp dụng ngay khi lưu bằng nút Gửi. Công tắc Bật cho phép tạo và lưu chủ đề mà không kích hoạt ngay lập tức.

### Phân cấp Chủ đề

Trong môi trường nhiều tenant, chủ đề áp dụng ở cấp tenant hiện tại và được kế thừa xuống các cấp thấp hơn trừ khi bị ghi đè. Điều này cho phép nhận diện thương hiệu nhất quán trên các cấp bậc tổ chức trong khi vẫn cho phép tùy chỉnh khi cần.

### Tính bền vững của Chủ đề

Cài đặt chủ đề được lưu như một phần của cấu hình hệ thống VergeOS và được duy trì qua các bản cập nhật và khởi động lại hệ thống. Cấu hình chủ đề có thể được xuất và nhập như một phần của quy trình sao lưu và khôi phục hệ thống.

## Các Định dạng Tệp và Thông số Kỹ thuật Được Hỗ trợ

### Yêu cầu về Logo

* **Logo Lớn**: 144x36 pixel, định dạng JPG/PNG/SVG
* **Logo Nhỏ**: 44x44 pixel, định dạng JPG/PNG/SVG
* Khuyến nghị kích thước tệp: dưới 1MB để đạt hiệu năng tối ưu

### Thông số Kỹ thuật Favicon

* **Định dạng**: Yêu cầu định dạng tệp ICO
* **Kích thước được khuyến nghị**: 16x16, 32x32, 48x48 pixel trong một tệp ICO duy nhất
* Hỗ trợ dự phòng cho định dạng PNG trong các trình duyệt hiện đại

### Hỗ trợ Định dạng Màu

* **Giá trị Hex**: Mã màu hệ thập lục phân 6 chữ số tiêu chuẩn (#RRGGBB)
* **Độ mờ**: Độ trong suốt dựa trên phần trăm (0-100%)
* **Bộ chọn Màu**: Giao diện chọn RGB/HSV trực quan
* **Chức năng Đặt lại**: Trở về ngay lập tức về mặc định của hệ thống

Chức năng Chủ đề của VergeOS cung cấp khả năng tùy chỉnh hình ảnh toàn diện, cho phép các tổ chức tạo ra giao diện nhất quán, có nhận diện thương hiệu, đồng thời vẫn duy trì các tiêu chuẩn về khả năng sử dụng và khả năng truy cập trên toàn bộ nền tảng ảo hóa của họ.


---

# 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/vi/quan-tri-he-thong/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.
