🐞fix(theme): 深度重构主题色系统,实现精准色准还原与全场景视觉平衡 (fixes #783)#937
🐞fix(theme): 深度重构主题色系统,实现精准色准还原与全场景视觉平衡 (fixes #783)#937Pissofdvpe wants to merge 3 commits intoimsyy:devfrom
Conversation
- 重构主题色生成算法,解决颜色不明显及特定色系不显示问题: - 针对主色变体实现高保真逻辑:跳过 HCT 变换,100% 忠实还原用户在调色板选定的原始 RGB 值,彻底解决黄色偏绿、红色偏橘等色相偏移难题。 - 引入辅助色饱和度爆发机制:针对次色、第三色等变体,手动提升 Chroma 基准,确保辅助色鲜艳且具备识别度,不再退化为暗淡灰色。 - 实现错误色动态生成:打破 M3 强制红色的限制,根据主色补色动态计算,确保任何色系下错误信息均具备极强视觉反差。 - 引入感知色调自适应校准逻辑: - 浅色模式:将主色亮度锚定在 Tone 40,确保高明度色相在白底上具备充足的对比度与视觉存在感。 - 深色模式:将主色亮度锚定在 Tone 80,确保低明度色相在暗色背景下具备极佳的透亮度。 - 优化深色模式视觉纯净度: - 强制深色模式背景饱和度为 0,彻底消除栏目垫底色的主色染色现象,回归深邃纯净的界面质感。 - 完善系统架构与代码健壮性: - 恢复次色作为系统默认变体,提供色彩美感与视觉舒适度的最佳平衡点。 - 修复 MONOTONOUS_THEME 定义中的属性重复及属性缺失导致的 TypeScript 编译报错。 - 撤销不必要的设置项版本强制迁移逻辑,完全尊重用户的个性化观感偏好。
Summary of ChangesHello @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
Changelog
Using Gemini Code AssistThe 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
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 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
|
- 在 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 的视觉表现完美回归至重构前的正常水平。
This comment was marked as outdated.
This comment was marked as outdated.
|
回到pr之前提交(4dd8c53)查看,全局着色效果比当前pr的效果还浓郁 小察一下,自从25/10/20提交(dbf6121)确定了全局着色的着色范围,直到本次pr也并未变动,也就是这个全局着色一直如此. 在src/components/Global/Provider.vue 中,代码始终维持着这样一个条件判断结构: if (settingStore.themeGlobalColor) { 本来这次pr是修复issue (#783)的,全局着色逻辑导致当前的效果早就存在. 所以,如果觉得全局着色效果不理想,可以修改着色范围及组件? |


Description:
针对 Issue #783 提出的主题色在不同模式下表现不佳(浅色模式对比度不足、深色模式色系稀释严重)的问题,本项目对底层色彩算法进行了彻底重构。
核心变更 / Key Changes:
MONOTONOUS_THEME对象的语法定义错误,修复了 TypeScript 编译报错。关联 Issue / Related Issues:
Closes #783