✨ Feature(custom): support theme system and add a new theme hub for piclist

src/renderer/App.vue

@@ -1,34 +1,25 @@
 <template>
   <div id="app" :key="pageReloadCount">
     <router-view />
+    <div class="bg-images" />
     <UIServiceProvider />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeMount, onMounted } from 'vue'
+import { onBeforeMount } from 'vue'
 
 import UIServiceProvider from '@/components/ui/UIServiceProvider.vue'
-import { useAppStore } from '@/hooks/useAppStore'
 import { useATagClick } from '@/hooks/useATagClick'
 import { pageReloadCount, usePicBed } from '@/hooks/useGlobal'
 
 useATagClick()
 
-const appStore = useAppStore()
 const { updatePicBeds } = usePicBed()
 
 onBeforeMount(() => {
   updatePicBeds()
 })
-
-onMounted(async () => {
-  try {
-    appStore.init()
-  } catch (error) {
-    console.error('Failed to load settings:', error)
-  }
-})
 </script>
 
 <script lang="ts">
@@ -43,7 +34,23 @@ html
   padding 0
   margin 0
   height 100%
+
 #app
   height 100%
   user-select none
+
+.bg-images {
+  position: absolute;
+  inset: 0;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  background-image: var(--background-image);
+  background-repeat: no-repeat, no-repeat;
+  opacity: var(--background-image-opacity);
+  filter: var(--background-blur);
+  z-index: -1;
+  pointer-events: none;
+}
 </style>