perf: optimize performance of linear gradient theme color wallpaper

src/components/AppBackground.vue

@@ -2,11 +2,33 @@
 import { useDark } from '~/composables/useDark'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
+import { hexToHSL } from '~/utils/main'
 
 const props = defineProps<{ activatedPage: AppPage }>()
 
 const { isDark } = useDark()
 
+const themeColorHsl = computed(() => {
+  return hexToHSL(settings.value.themeColor).replace('hsl(', '').replace(')', '')
+})
+const themeColorHue = computed((): number => {
+  return Number(themeColorHsl.value.split(',')[0]) || 0
+})
+const themeColorSaturation = computed((): number => {
+  return Number(themeColorHsl.value.split(',')[1].replace('%', '')) || 0
+})
+const themeColorLightness = computed((): number => {
+  return Number(themeColorHsl.value.split(',')[2].replace('%', '')) || 0
+})
+const themeColorLinearGradientBackground = computed((): string => {
+  return `linear-gradient(180deg, 
+    transparent 0% 38%,
+    hsl(${themeColorHue.value}, ${themeColorSaturation.value + 6}%, ${themeColorLightness.value * 0.42}%) 56%, 
+    hsl(${themeColorHue.value}, ${themeColorSaturation.value}%, ${themeColorLightness.value}%) 76%,
+    hsl(${themeColorHue.value}, ${themeColorSaturation.value}%, ${themeColorLightness.value + 20}%) 90%,
+    hsl(${themeColorHue.value}, ${themeColorSaturation.value}%, 96%) 100%)`
+})
+
 watch(() => settings.value.wallpaperMaskOpacity, () => {
   setAppWallpaperMaskingOpacity()
 })
@@ -37,36 +59,16 @@ function setAppWallpaperMaskingOpacity() {
 
 <template>
   <div>
+    <!-- linear gradient background -->
     <Transition name="fade">
-      <!-- TODO: use linear-gradient to implement this -->
-      <!-- linear gradient background -->
       <div
         v-if="settings.useLinearGradientThemeColorBackground && isDark"
-        :style="{ opacity: activatedPage === AppPage.Search ? 1 : 0.4 }"
+        :style="{
+          opacity: activatedPage === AppPage.Search ? 1 : 0.4,
+          background: themeColorLinearGradientBackground,
+        }"
         pos="absolute top-0 left-0" w-full h-full z-0 pointer-events-none
-        of-hidden transform-gpu
-      >
-        <div
-          pos="absolute bottom--20% left-50%" transform="translate-x--1/2" w="120%" h="60%" bg="$bew-theme-color"
-          important-blur-80 important-saturate-240 transform-gpu
-          rounded="1/2" z-1
-        />
-        <div
-          pos="absolute bottom--30% left-50%" transform="translate-x--1/2" w="110%" h="50%" bg="$bew-theme-color"
-          important-blur-80 important-brightness-120 transform-gpu
-          rounded="1/2" z-2
-        />
-        <div
-          pos="absolute bottom--30% left-50%" transform="translate-x--1/2" w="110%" h="50%" bg="$bew-theme-color"
-          important-blur-60 important-brightness-180 transform-gpu
-          rounded="1/2" z-3
-        />
-        <div
-          pos="absolute bottom--36% left-50%" transform="translate-x--1/2" w="110%" h="40%" bg-white
-          important-blur-60 transform-gpu
-          rounded="1/2" z-3
-        />
-      </div>
+      />
     </Transition>
 
     <Transition name="fade">

src/utils/main.ts

@@ -109,7 +109,7 @@ export function hexToHSL(hex: string, alpha: number | null = null): string {
 
   if (alpha !== null)
     return `hsla(${h}, ${s}%, ${l}%, ${alpha})`
-  return `hsla(${h}, ${s}%, ${l}%)`
+  return `hsl(${h}, ${s}%, ${l}%)`
 }
 
 /**