当前位置：首页 > news >正文

终极指南：Fay数字人框架API文档暗黑模式背景色自定义，三步轻松减轻视觉疲劳

news 2026/3/27 1:12:50

终极指南：Fay数字人框架API文档暗黑模式背景色自定义，三步轻松减轻视觉疲劳

【免费下载链接】FayFay is an open-source digital human framework integrating language models and digital characters. It offers retail, assistant, and agent versions for diverse applications like virtual shopping guides, broadcasters, assistants, waiters, teachers, and voice or text-based mobile assistants.项目地址: https://gitcode.com/gh_mirrors/fa/Fay

Fay是一款集成语言模型与数字角色的开源数字人框架，提供零售版、助手版和代理版，适用于虚拟导购、主播、助理、服务员、教师及语音或文本-based移动助手等多种应用场景。对于开发者和用户而言，长时间使用默认亮色主题可能导致视觉疲劳，本文将详细介绍如何调整Fay框架API文档的暗黑模式背景色，提升使用体验。

为什么需要自定义暗黑模式背景色？

在开发和使用Fay框架时，开发者和用户往往需要长时间面对API文档界面。研究表明，暗黑模式可以有效减少屏幕蓝光，降低眼睛疲劳，尤其在低光环境下使用效果显著。Fay框架虽然本身可能未直接提供暗黑模式切换功能，但我们可以通过修改相关CSS文件来自定义背景色，打造舒适的阅读环境。

Fay框架界面展示，默认亮色主题可能在长时间使用时造成视觉疲劳

准备工作：找到关键CSS文件

要调整Fay框架API文档的背景色，首先需要找到控制界面样式的CSS文件。在Fay项目中，主要的CSS文件位于gui/static/css/目录下，其中index.css是控制整体界面布局和样式的关键文件。

第一步：修改主背景色

打开gui/static/css/index.css文件，找到body选择器，其默认背景设置为：

body { background-image: url(../images/Bg_pic.png); background-repeat: repeat-x; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; height: 100vh; min-width: 1719px; overflow: hidden; }

将background-image注释掉或删除，并添加background-color属性，设置为深色背景，例如：

body { /* background-image: url(../images/Bg_pic.png); */ background-color: #1a1a1a; /* 深色背景 */ background-repeat: repeat-x; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; height: 100vh; min-width: 1719px; overflow: hidden; color: #e0e0e0; /* 浅色文字，提高对比度 */ }

第二步：调整消息气泡背景色

在index.css中，消息气泡的背景色默认设置为白色，在暗黑模式下需要修改为深色。找到.message-bubble和.sender-message.message-bubble选择器：

.message-bubble { background-color: #333333; /* 深色气泡背景 */ border-radius: 6px; padding: 8px; font-size: 15px; color: #e0e0e0; /* 浅色文字 */ white-space: pre-wrap; word-wrap: break-word; } .sender-message.message-bubble { font-size: 15px; padding: 8px; background-color: #0066cc; /* 深色发送者气泡背景 */ color: #ffffff; /* 白色文字 */ }

第三步：优化其他界面元素

除了主背景和消息气泡，还需要调整其他界面元素的背景色，如菜单、输入框等。例如，修改菜单背景色：

.menu { background-color: #2d2d2d; /* 深色菜单背景 */ white-space: nowrap; display: flex; transition: transform 0.3s ease; list-style: none; padding: 0 50px 0 50px; margin: 0; display: flex; transition: transform 0.3s ease; }

修改输入框背景色：

.inputmessage_input { background-color: #333333; /* 深色输入框背景 */ width: 540px; float: left; margin-top: 15px; height: 45px; } .text_in { width: 540px; height: 45px; padding: unset; outline: unset; border-style: unset; background-color: unset; resize: unset; font-size: 14px; color: #e0e0e0; /* 浅色文字 */ }

修改后的Fay框架聊天界面，暗黑模式背景色有效减轻视觉疲劳