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

src/components/Global/Provider.vue

@@ -293,6 +293,7 @@ const applyThemeBackgroundMode = () => {
 watch(
   () => [
     settingStore.themeColorType,
+    settingStore.themeVariant,
     settingStore.themeFollowCover,
     settingStore.themeGlobalColor,
     settingStore.globalFont,

src/utils/color.ts

@@ -18,13 +18,13 @@ export const MONOTONOUS_THEME = {
   main: { r: 239, g: 239, b: 239 },
   light: {
     primary: { r: 10, g: 10, b: 10 },
-    background: { r: 238, g: 238, b: 238 },
-    "surface-container": { r: 212, g: 212, b: 212 },
+    background: { r: 255, g: 255, b: 255 },
+    "surface-container": { r: 246, g: 246, b: 246 },
   },
   dark: {
     primary: { r: 239, g: 239, b: 239 },
-    background: { r: 31, g: 31, b: 31 },
-    "surface-container": { r: 39, g: 39, b: 39 },
+    background: { r: 16, g: 16, b: 20 },
+    "surface-container": { r: 24, g: 24, b: 28 },
   },
 };
 
@@ -45,20 +45,55 @@ const getAccentColor = (argb: number) => {
  * @param variant 变体名称，默认为 'secondary'
  */
 const getThemeSchema = (theme: Theme, variant: keyof Theme["palettes"] = "secondary") => {
-  const { hue, chroma } = theme.palettes[variant];
-  const getColor = (tone: number) => getAccentColor(Hct.from(hue, chroma, tone).toInt());
+  // 获取基于主色的 HCT 属性
+  const hct = Hct.fromInt(theme.source);
+  let targetHue = hct.hue;
+  let targetChroma = hct.chroma;
 
+  const palette = theme.palettes[variant];
+
+  switch (variant) {
+    case "secondary":
+      targetHue = palette.hue;
+      targetChroma = Math.max(hct.chroma * 0.7, 45);
+      break;
+    case "tertiary":
+      targetHue = palette.hue;
+      targetChroma = Math.max(hct.chroma * 0.8, 60);
+      break;
+    case "neutral":
+      targetChroma = 15;
+      break;
+    case "neutralVariant":
+      targetChroma = 20;
+      break;
+    case "error":
+      targetHue = (hct.hue + 180) % 360;
+      targetChroma = Math.max(hct.chroma, 80);
+      break;
+  }
+
+  const getColor = (tone: number) => getAccentColor(Hct.from(targetHue, targetChroma, tone).toInt());
+
+  const isPrimary = variant === "primary";
+  const sourceRgb = getAccentColor(theme.source);
+
   return {
-    main: getColor(90),
+    /**
+     * 全屏播放器 UI 显示逻辑
+     * 使用 Tone 85，确保在深色背景下具有极高亮度的同时，保留足够的饱和度空间来体现色彩
+     */
+    main: getAccentColor(Hct.from(targetHue, Math.max(targetChroma, 48), 85).toInt()),
     light: {
-      primary: getColor(10),
-      background: getColor(94),
-      "surface-container": getColor(90),
+      primary: isPrimary ? sourceRgb : getColor(40),
+      background: { r: 255, g: 255, b: 255 },
+      "surface-container": { r: 246, g: 246, b: 246 },
     },
     dark: {
-      primary: getColor(90),
-      background: getColor(20),
-      "surface-container": getColor(16),
+      primary: isPrimary ? sourceRgb : getColor(80),
+      // 使用深邃的中性黑灰
+      background: { r: 16, g: 16, b: 20 },
+      "surface-container": { r: 24, g: 24, b: 28 },
     },
   };
 };
@@ -99,14 +134,7 @@ export const setColorSchemes = (
   // 指定模式颜色数据
   const colorModeData = colorData[mode];
   const modifiedColorModeData: { [key: string]: string } = {};
-  // 是否全局应用
-  if (!settingStore.themeGlobalColor && colorModeData) {
-    // 修改关键颜色
-    colorModeData.background =
-      mode === "dark" ? { r: 16, g: 16, b: 20 } : { r: 246, g: 246, b: 246 };
-    colorModeData["surface-container"] =
-      mode === "dark" ? { r: 24, g: 24, b: 28 } : { r: 255, g: 255, b: 255 };
-  }
+
   // 遍历颜色并修改
   for (const key in colorModeData) {
     const color = colorModeData[key];