diff --git a/src/components/Global/Provider.vue b/src/components/Global/Provider.vue index 5e400c105..af3a7fa9d 100644 --- a/src/components/Global/Provider.vue +++ b/src/components/Global/Provider.vue @@ -293,6 +293,7 @@ const applyThemeBackgroundMode = () => { watch( () => [ settingStore.themeColorType, + settingStore.themeVariant, settingStore.themeFollowCover, settingStore.themeGlobalColor, settingStore.globalFont, diff --git a/src/utils/color.ts b/src/utils/color.ts index 67bfb8668..15c86b44d 100644 --- a/src/utils/color.ts +++ b/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];