Skip to content

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

Draft
Pissofdvpe wants to merge 3 commits intoimsyy:devfrom
Pissofdvpe:dev
Draft

🐞fix(theme): 深度重构主题色系统,实现精准色准还原与全场景视觉平衡 (fixes #783)#937
Pissofdvpe wants to merge 3 commits intoimsyy:devfrom
Pissofdvpe:dev

Conversation

@Pissofdvpe
Copy link
Contributor

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

- 重构主题色生成算法,解决颜色不明显及特定色系不显示问题:
  - 针对主色变体实现高保真逻辑:跳过 HCT 变换,100% 忠实还原用户在调色板选定的原始 RGB 值,彻底解决黄色偏绿、红色偏橘等色相偏移难题。
  - 引入辅助色饱和度爆发机制:针对次色、第三色等变体,手动提升 Chroma 基准,确保辅助色鲜艳且具备识别度,不再退化为暗淡灰色。
  - 实现错误色动态生成:打破 M3 强制红色的限制,根据主色补色动态计算,确保任何色系下错误信息均具备极强视觉反差。
- 引入感知色调自适应校准逻辑:
  - 浅色模式:将主色亮度锚定在 Tone 40,确保高明度色相在白底上具备充足的对比度与视觉存在感。
  - 深色模式:将主色亮度锚定在 Tone 80,确保低明度色相在暗色背景下具备极佳的透亮度。
- 优化深色模式视觉纯净度:
  - 强制深色模式背景饱和度为 0,彻底消除栏目垫底色的主色染色现象,回归深邃纯净的界面质感。
- 完善系统架构与代码健壮性:
  - 恢复次色作为系统默认变体,提供色彩美感与视觉舒适度的最佳平衡点。
  - 修复 MONOTONOUS_THEME 定义中的属性重复及属性缺失导致的 TypeScript 编译报错。
  - 撤销不必要的设置项版本强制迁移逻辑,完全尊重用户的个性化观感偏好。
@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @Pissofdvpe, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求通过深度重构底层色彩算法,解决了主题色在不同模式下表现不佳的问题。核心目标是实现精准的色准还原和全场景的视觉平衡,通过优化主色高保真度、增强辅助色饱和度、校准感知色调以及提升深色模式纯净度,显著改善了用户界面的色彩体验,使其在各种主题和模式下都更加和谐与易读。

Highlights

  • 主色高保真还原: 针对主色变体实现了100% RGB忠实还原逻辑,完全绕过了HCT色彩空间在亮度平衡时的色相偏移副作用,解决了黄色偏绿、红色偏橘的问题。
  • 辅助色饱和度增强: 对次色、第三色等M3变体进行了色彩增益处理,手动提升其饱和度基准,使其不再表现为沉闷的灰色,而是具备鲜明识别度的衍生色。
  • 感知色调校准: 在浅色模式下强制主色调为Tone 40以确保清晰度,在深色模式下强制主色调为Tone 80以确保红、蓝、紫等深色系在暗底上依然通透发亮。
  • 深色模式纯净度提升: 强制深色背景饱和度为0,消除了界面底层的主色倾向,使视觉感受更加深邃纯净。
  • 错误色随动逻辑: 错误色现在基于主色的补色(色相 + 180°)动态生成,确保在任何主题色下,错误提示都能提供最强的视觉反差。
Changelog
  • src/utils/color.ts
    • 重构了 getThemeSchema 函数,以实现更精确的主题色生成。
    • 引入了辅助色饱和度增强逻辑,使次色和第三色更具识别度。
    • 实现了感知色调校准,确保浅色和深色模式下的对比度和亮度。
    • 优化了深色模式背景,强制饱和度为0以提升纯净度。
    • 添加了错误色动态生成逻辑,基于主色的补色。
    • 针对主色变体,直接使用原始RGB值以实现高保真还原。
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

本次 PR 对主题色系统进行了深度重构,以解决不同模式下的颜色表现问题。主要改动包括:为“主色”实现高保真还原,增强辅助色的饱和度,为浅色和深色模式校准色调,并优化了错误色的生成逻辑。代码重构引入了更复杂的颜色计算逻辑,以实现更精准的色彩控制。

我的审查主要关注代码的可读性和一致性。我提出了一些建议,旨在通过移除冗余代码、重构条件逻辑以及统一函数使用方式来简化代码结构。这些改动将有助于提高代码的可维护性。

- 在 src/utils/color.ts 中重构 getThemeSchema 函数,提升代码可读性与一致性:
  - 使用 switch 语句替换原有的 if-else if 链,简化变体逻辑路径。
  - 提取 darkPrimary 变量统一管理深色模式下的主色输出,消除重复计算逻辑。
  - 统一深色模式背景与容器色的生成逻辑,全面复用 getHelperColor 辅助函数。
- 解决由于主题色高保真重构逻辑误伤导致的全屏播放器 UI 颜色暗淡、色彩倾向失效问题:
  - 在 src/utils/color.ts 的 getThemeSchema 函数中,将全屏播放器 UI 装饰色 main 的逻辑与全局主题色彻底解耦。
  - 还原重构前的通透感:将 main 颜色的亮度固定在色彩黄金点 Tone 85,确保其在全屏播放器深色背景下具备极佳的对比度与发光感。
  - 恢复色彩识别度:引入饱和度保底补偿机制(Chroma 不低于 48),确保 UI 按钮能如实反映专辑封面的色彩倾向,彻底解决重构后产生的变白、变灰回归问题。
- 在确保全局主题色精准还原的同时,使全屏播放器 UI 的视觉表现完美回归至重构前的正常水平。
@kazukokawagawa

This comment was marked as outdated.

Copy link
Collaborator

@kazukokawagawa kazukokawagawa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

这个颜色说实话放在任务栏歌词不错,你要是放全局那我拒绝合并

@kazukokawagawa kazukokawagawa marked this pull request as draft February 26, 2026 07:05
@Pissofdvpe
Copy link
Contributor Author

回到pr之前提交(4dd8c53)查看,全局着色效果比当前pr的效果还浓郁
截屏2026-02-26 15.13.47.png

小察一下,自从25/10/20提交(dbf6121)确定了全局着色的着色范围,直到本次pr也并未变动,也就是这个全局着色一直如此.

在src/components/Global/Provider.vue 中,代码始终维持着这样一个条件判断结构:

if (settingStore.themeGlobalColor) {
// 分支 A:全局着色
// 范围:包括 textColorBase, bodyColor, cardColor, modalColor,
// 以及针对 Card, Button, Input, Progress, Popover 等大量组件的深度染色。
} else {
// 分支 B:非全局(基础)着色
// 范围:严格限制在 commonBase, Icon, Slider, Popover。
// 绝大多数组件(Button, Progress等)在这里是不被赋予主题色的。

本来这次pr是修复issue (#783)的,全局着色逻辑导致当前的效果早就存在.
该issue中虽然标题是“全局主题色更改不明显问题”但截图和描述都是关闭全局着色选项的.

所以,如果觉得全局着色效果不理想,可以修改着色范围及组件?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

全局主题色更改不明显问题

2 participants