[PR #937] 🐞fix(theme): 深度重构主题色系统，实现精准色准还原与全场景视觉平衡 (fixes #783) #736

New issue

Open

opened 2026-02-27 07:12:54 +03:00 by kerem · 0 comments

kerem commented

2026-02-27 07:12:54 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/imsyy/SPlayer/pull/937
Author: @Pissofdvpe
Created: 2/25/2026
Status: 🔄 Open

Base: dev ← Head: dev

📝 Commits (3)

c543309 🐞fix(theme): 深度重构主题色系统，实现精准色准还原与全场景视觉平衡 (fixes #783)
d87fd7f 🐞fix(theme): 响应代码审查优化主题色算法实现
21bee8e 🐞fix(theme/FullPlayer): 修正主题系统重构引起的全屏播放器 UI 颜色显示异常

📊 Changes

1 file changed (+49 additions, -9 deletions)

View changed files

📝 src/utils/color.ts (+49 -9)

📄 Description

Description:
针对 Issue #783 提出的主题色在不同模式下表现不佳（浅色模式对比度不足、深色模式色系稀释严重）的问题，本项目对底层色彩算法进行了彻底重构。

核心变更 / Key Changes:

主色高保真还原 (High Fidelity)：
- 针对“主色”变体实现了 100% RGB 忠实还原逻辑，完全绕过了 HCT 色彩空间在亮度平衡时的色相偏移副作用。彻底解决了“黄色选色偏绿、红色选色偏橘”的历史难题。
辅助色饱和度爆发 (Chroma Boost)：
- 针对“次色”、“第三色”等 M3 变体进行了色彩增益处理，手动提升其饱和度（Chroma）基准。现在这些变体不再表现为沉闷的灰色，而是具备鲜明识别度的衍生色。
感知色调校准 (Tone Anchoring)：
- 浅色模式：强制主色调为 Tone 40，确保在白底上具备无障碍级的清晰度。
- 深色模式：强制主色调为 Tone 80，确保红、蓝、紫等深色系在暗底上依然通透发亮。
深色模式纯净度提升：
- 针对用户反馈的背景染色问题，强制深色背景饱和度为 0，消除了界面底层的主色倾向，使视觉感受更加深邃纯净。
错误色随动逻辑：
- 错误色现在基于主色的补色（色相 + 180°）动态生成，确保在任何主题色下，错误提示都能提供最强的视觉反差。
健壮性优化：
- 修正了 MONOTONOUS_THEME 对象的语法定义错误，修复了 TypeScript 编译报错。
- 恢复“次色”为系统默认变体，平衡了色彩冲击力与观感舒适度。

关联 Issue / Related Issues:
Closes #783

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/imsyy/SPlayer/pull/937 **Author:** [@Pissofdvpe](https://github.com/Pissofdvpe) **Created:** 2/25/2026 **Status:** 🔄 Open **Base:** `dev` ← **Head:** `dev` --- ### 📝 Commits (3) - [`c543309`](https://github.com/imsyy/SPlayer/commit/c5433091cd7d6ac6dc17b1ef971f109b3501ed18) 🐞fix(theme): 深度重构主题色系统，实现精准色准还原与全场景视觉平衡 (fixes #783) - [`d87fd7f`](https://github.com/imsyy/SPlayer/commit/d87fd7f3e9baa620d41b7baedc08d9135069cd42) 🐞fix(theme): 响应代码审查优化主题色算法实现 - [`21bee8e`](https://github.com/imsyy/SPlayer/commit/21bee8e379a87e497054dc586468b27e11625d20) 🐞fix(theme/FullPlayer): 修正主题系统重构引起的全屏播放器 UI 颜色显示异常 ### 📊 Changes **1 file changed** (+49 additions, -9 deletions) <details> <summary>View changed files</summary> 📝 `src/utils/color.ts` (+49 -9) </details> ### 📄 Description **Description:** 针对 Issue #783 提出的主题色在不同模式下表现不佳（浅色模式对比度不足、深色模式色系稀释严重）的问题，本项目对底层色彩算法进行了彻底重构。 **核心变更 / Key Changes:** 1. **主色高保真还原 (High Fidelity)**： - 针对“主色”变体实现了 100% RGB 忠实还原逻辑，完全绕过了 HCT 色彩空间在亮度平衡时的色相偏移副作用。彻底解决了“黄色选色偏绿、红色选色偏橘”的历史难题。 2. **辅助色饱和度爆发 (Chroma Boost)**： - 针对“次色”、“第三色”等 M3 变体进行了色彩增益处理，手动提升其饱和度（Chroma）基准。现在这些变体不再表现为沉闷的灰色，而是具备鲜明识别度的衍生色。 3. **感知色调校准 (Tone Anchoring)**： - **浅色模式**：强制主色调为 Tone 40，确保在白底上具备无障碍级的清晰度。 - **深色模式**：强制主色调为 Tone 80，确保红、蓝、紫等深色系在暗底上依然通透发亮。 4. **深色模式纯净度提升**： - 针对用户反馈的背景染色问题，强制深色背景饱和度为 0，消除了界面底层的主色倾向，使视觉感受更加深邃纯净。 5. **错误色随动逻辑**： - 错误色现在基于主色的补色（色相 + 180°）动态生成，确保在任何主题色下，错误提示都能提供最强的视觉反差。 6. **健壮性优化**： - 修正了 `MONOTONOUS_THEME` 对象的语法定义错误，修复了 TypeScript 编译报错。 - 恢复“次色”为系统默认变体，平衡了色彩冲击力与观感舒适度。 **关联 Issue / Related Issues:** Closes #783 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>