fix: vibrancy with theme

CyanSalt · CyanSalt · commit f86a6ea9f2a6 · 2024-07-16T17:50:50.000+08:00
diff --git a/src/main/lib/theme.ts b/src/main/lib/theme.ts
@@ -2,7 +2,7 @@ import { effect } from '@vue/reactivity'
 import type { BrowserWindow, BrowserWindowConstructorOptions } from 'electron'
 import { nativeTheme, systemPreferences } from 'electron'
 import type { Theme, ThemeDefinition } from '@commas/types/theme'
-import { isDarkColor, mix, toCSSColor, toCSSHEX, toElectronHEX, toHSLA, toRGBA, toRGBAFromHSLA } from '../../shared/color'
+import { isDarkColor, mix, toCSSColor, toCSSHEX, toElectronHEX, toHSLA, toRGBA } from '../../shared/color'
 import { provideIPC } from '../utils/compositions'
 import { resourceFile, userFile } from '../utils/directory'
 import { useDefaultSettings, useSettings } from './settings'
@@ -176,10 +176,9 @@ const theme = $computed(() => {
     definition.systemMagenta = systemPreferences.getSystemColor('pink')
   }
   definition.systemAccent = accentColor ? `#${accentColor.slice(0, 6)}` : ''
-  const accentHSLA = accentColor ? toHSLA(toRGBA(`#${accentColor.slice(0, 6)}`)) : undefined
-  definition.acrylicBackground = accentHSLA ? toCSSHEX(
-    toRGBAFromHSLA({ ...accentHSLA, l: (0.5 + accentHSLA.l / 2) }),
-  ) : ''
+  const backgroundHSLA = toHSLA(backgroundRGBA)
+  const accentRGBA = accentColor ? toRGBA(`#${accentColor.slice(0, 6)}`) : undefined
+  definition.acrylicBackground = accentRGBA ? toCSSHEX(mix(backgroundRGBA, accentRGBA, backgroundHSLA.s)) : ''
   definition.vibrancy = opacity < 1 ? undefined : vibrancy
   definition.variables = Object.fromEntries([
     ...Object.entries({ ...THEME_CSS_COLORS, ...EXTRA_CSS_COLORS }).map(([key, attr]) => {
diff --git a/src/renderer/components/App.vue b/src/renderer/components/App.vue
@@ -155,10 +155,10 @@ onMounted(() => {
   /* Default line height of xterm.js */
   line-height: 1.2;
   overflow: hidden;
-  background-image: linear-gradient(to right bottom, color-mix(in sRGB, rgb(var(--acrylic-background) / var(--theme-opacity)) 10%, rgb(var(--theme-background) / var(--theme-opacity))), color-mix(in sRGB, rgb(var(--acrylic-background) / var(--theme-opacity)) 25%, rgb(var(--theme-background) / var(--theme-opacity))));
+  background-image: linear-gradient(to right bottom, color-mix(in sRGB, rgb(var(--acrylic-background) / var(--theme-opacity)) 6%, rgb(var(--theme-background) / var(--theme-opacity))), color-mix(in sRGB, rgb(var(--acrylic-background) / var(--theme-opacity)) 12%, rgb(var(--theme-background) / var(--theme-opacity))));
   transition: color 0.2s;
   &.is-vibrant {
-    background-image: linear-gradient(to right bottom, rgb(var(--acrylic-background) / 10%), rgb(var(--acrylic-background) / 25%));
+    background-image: linear-gradient(to right bottom, rgb(var(--acrylic-background) / 6%), rgb(var(--acrylic-background) / 12%));
   }
 }
 .content {

Original file line number	Diff line number	Diff line change
`@@ -155,10 +155,10 @@ onMounted(() => {`
`155`	`155`	`/* Default line height of xterm.js */`
`156`	`156`	`line-height: 1.2;`
`157`	`157`	`overflow: hidden;`
`158`		`- background-image: linear-gradient(to right bottom, color-mix(in sRGB, rgb(var(--acrylic-background) / var(--theme-opacity)) 10%, rgb(var(--theme-background) / var(--theme-opacity))), color-mix(in sRGB, rgb(var(--acrylic-background) / var(--theme-opacity)) 25%, rgb(var(--theme-background) / var(--theme-opacity))));`
	`158`	`+ background-image: linear-gradient(to right bottom, color-mix(in sRGB, rgb(var(--acrylic-background) / var(--theme-opacity)) 6%, rgb(var(--theme-background) / var(--theme-opacity))), color-mix(in sRGB, rgb(var(--acrylic-background) / var(--theme-opacity)) 12%, rgb(var(--theme-background) / var(--theme-opacity))));`
`159`	`159`	`transition: color 0.2s;`
`160`	`160`	`&.is-vibrant {`
`161`		`- background-image: linear-gradient(to right bottom, rgb(var(--acrylic-background) / 10%), rgb(var(--acrylic-background) / 25%));`
	`161`	`+ background-image: linear-gradient(to right bottom, rgb(var(--acrylic-background) / 6%), rgb(var(--acrylic-background) / 12%));`
`162`	`162`	`}`
`163`	`163`	`}`
`164`	`164`	`.content {`