From fd49bb3a96eacbe17bea6c29db2236ddaf20d9cb Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 31 Jul 2024 00:16:04 +0800
Subject: [PATCH] feat: linear gradient theme color background

---
 src/components/AppBackground.vue              | 105 ++++++++++++------
 .../Settings/components/Appearance.vue        |   4 +
 src/logic/storage.ts                          |   2 +
 3 files changed, 76 insertions(+), 35 deletions(-)

diff --git a/src/components/AppBackground.vue b/src/components/AppBackground.vue
index eb3ed9da..3ab9e72c 100644
--- a/src/components/AppBackground.vue
+++ b/src/components/AppBackground.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { useDark } from '~/composables/useDark'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
 
 const props = defineProps<{ activatedPage: AppPage }>()
 
+const { isDark } = useDark()
+
 watch(() => settings.value.wallpaperMaskOpacity, () => {
   setAppWallpaperMaskingOpacity()
 })
@@ -33,44 +36,76 @@ function setAppWallpaperMaskingOpacity() {
 </script>
 
 <template>
-  <Transition name="fade">
-    <div v-if="activatedPage === AppPage.Search">
-      <!-- background -->
+  <div>
+    <Transition name="fade">
+      <!-- linear gradient background -->
       <div
-        pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg"
-        z--1 transform-gpu
-        :style="{ backgroundImage: `url('${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaper : settings.wallpaper}')` }"
-      />
-      <!-- background mask -->
-      <Transition name="fade">
+        v-if="settings.useLinearGradientThemeColorBackground && isDark"
+        pos="absolute top-0 left-0" w-full h-full z-0 pointer-events-none
+        of-hidden opacity-60
+      >
         <div
-          v-if="(!settings.individuallySetSearchPageWallpaper && settings.enableWallpaperMasking) || (settings.searchPageEnableWallpaperMasking)"
-          pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-homepage-bg-mask"
-          duration-300 z--1 transform-gpu
-          :style="{
-            backdropFilter: `blur(${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaperBlurIntensity : settings.wallpaperBlurIntensity}px)`,
-          }"
+          pos="absolute bottom--20% left-50%" transform="translate-x--1/2" w="120%" h="60%" bg="$bew-theme-color"
+          important-blur-140 important-saturate-240
+          rounded-full z-1
         />
-      </Transition>
-    </div>
-    <div v-else>
-      <!-- background -->
-      <div
-        :style="{ backgroundImage: `url('${settings.wallpaper}')` }"
-        pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg"
-        z--1 transform-gpu
-      />
-      <!-- background mask -->
-      <Transition name="fade">
         <div
-          v-if="settings.enableWallpaperMasking"
-          pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-homepage-bg-mask"
-          duration-300 z--1 transform-gpu
-          :style="{
-            backdropFilter: `blur(${settings.wallpaperBlurIntensity}px)`,
-          }"
+          pos="absolute bottom--30% left-50%" transform="translate-x--1/2" w="110%" h="50%" bg="$bew-theme-color"
+          important-blur-120 important-brightness-120
+          rounded-full z-2
         />
-      </Transition>
-    </div>
-  </Transition>
+        <div
+          pos="absolute bottom--30% left-50%" transform="translate-x--1/2" w="110%" h="50%" bg="$bew-theme-color"
+          important-blur-100 important-brightness-180
+          rounded-full z-3
+        />
+        <div
+          pos="absolute bottom--36% left-50%" transform="translate-x--1/2" w="110%" h="40%" bg-white
+          important-blur-100
+          rounded-full z-3
+        />
+      </div>
+    </Transition>
+
+    <Transition name="fade">
+      <div v-if="activatedPage === AppPage.Search">
+        <!-- background -->
+        <div
+          pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg"
+          z--1 transform-gpu
+          :style="{ backgroundImage: `url('${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaper : settings.wallpaper}')` }"
+        />
+        <!-- background mask -->
+        <Transition name="fade">
+          <div
+            v-if="(!settings.individuallySetSearchPageWallpaper && settings.enableWallpaperMasking) || (settings.searchPageEnableWallpaperMasking)"
+            pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-homepage-bg-mask"
+            duration-300 z--1 transform-gpu
+            :style="{
+              backdropFilter: `blur(${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaperBlurIntensity : settings.wallpaperBlurIntensity}px)`,
+            }"
+          />
+        </Transition>
+      </div>
+      <div v-else>
+        <!-- background -->
+        <div
+          :style="{ backgroundImage: `url('${settings.wallpaper}')` }"
+          pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg"
+          z--1 transform-gpu
+        />
+        <!-- background mask -->
+        <Transition name="fade">
+          <div
+            v-if="settings.enableWallpaperMasking"
+            pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-homepage-bg-mask"
+            duration-300 z--1 transform-gpu
+            :style="{
+              backdropFilter: `blur(${settings.wallpaperBlurIntensity}px)`,
+            }"
+          />
+        </Transition>
+      </div>
+    </Transition>
+  </div>
 </template>
diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue
index d9d12319..915b5809 100644
--- a/src/components/Settings/components/Appearance.vue
+++ b/src/components/Settings/components/Appearance.vue
@@ -115,6 +115,10 @@ function changeWallpaper(url: string) {
           </div>
         </div>
       </SettingsItem>
+
+      <SettingsItem title="Use linear gradient theme color background when in dark mode">
+        <Radio v-model="settings.useLinearGradientThemeColorBackground" />
+      </SettingsItem>
     </SettingsItemGroup>
 
     <ChangeWallpaper type="global" />
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index 6219259b..a5e591f3 100644
--- a/src/logic/storage.ts
+++ b/src/logic/storage.ts
@@ -30,6 +30,7 @@ export interface Settings {
 
   theme: 'light' | 'dark' | 'auto'
   themeColor: string
+  useLinearGradientThemeColorBackground: boolean
   wallpaperMode: 'buildIn' | 'byUrl'
   wallpaper: string
   enableWallpaperMasking: boolean
@@ -87,6 +88,7 @@ export const settings = useStorageLocal('settings', ref<Settings>({
 
   theme: 'auto',
   themeColor: '#00a1d6',
+  useLinearGradientThemeColorBackground: false,
   wallpaperMode: 'buildIn',
   wallpaper: '',
   enableWallpaperMasking: false,