Refactor le composant AppBackground pour utiliser un dégradé de fond basé sur les couleurs de navigation et le mode de couleur, en supprimant l'ancienne logique de points animés.

app/components/AppBackground.vue

@@ -1,47 +1,31 @@
 <script lang="ts" setup>
-const points = useState(() => Array.from({ length: 45 }).fill(0).map(() => [Math.random(), Math.random()]))
-const poly = computed(() => points.value.map(([x, y]) => `${x! * 100}% ${y! * 100}%`).join(', '))
-
-function jumpVal(val: number) {
-  return Math.random() > 0.5 ? val + (Math.random() - 0.5) / 2 : Math.random()
-}
-
-let timeout: NodeJS.Timeout
-function jumpPoints() {
-  for (let i = 0; i < points.value.length; i++)
-    points.value[i] = [jumpVal(points.value[i][0]), jumpVal(points.value[i][1])]
-
-  timeout = setTimeout(jumpPoints, Math.random() * 1000)
-}
-
-onMounted(() => jumpPoints())
-onUnmounted(() => clearTimeout(timeout))
+import { navColors } from '~~/types'
 
 const route = useRoute()
+const colorMode = useColorMode()
+
+const backgroundStyle = computed(() => {
+  const colors = navColors.find(nav => nav.label === route.path)!.colors
+  const fallback = colorMode.value === 'dark' ? '#000000' : '#ffffff'
+
+  const currentColors = colors || [fallback, fallback]
+
+  return {
+    colorOne: currentColors[0],
+    colorTwo: currentColors[1],
+    backgroundImage: `
+    radial-gradient(circle 500px at ${colorOne.x}% ${colorOne.y}%, ${colorOne.color}4D, transparent),
+    radial-gradient(circle 500px at ${colorTwo.x}% ${colorTwo.y}%, ${colorTwo.color}4D, transparent)
+  `,
+    backgroundSize: '100% 100%',
+  }
+})
 </script>
 
 <template>
   <ClientOnly>
-    <div
-      v-show="route.path === '/'"
-      aria-hidden="true"
-      class="duration-300 bg sm:mx-8 absolute inset-0 z-20 transform-gpu blur-3xl overflow-hidden"
-    >
-      <div
-        :style="{ 'clip-path': `polygon(${poly})` }"
-        class="aspect-[2] h-full w-full bg-gradient-to-r from-neutral-400 dark:from-neutral-600 to-white/10 lg:opacity-30 xs:opacity-50"
-      />
+    <div class="min-h-screen w-full absolute inset-0">
+      <div class="absolute inset-0 z-0" :style="backgroundStyle" />
     </div>
   </ClientOnly>
 </template>
-
-<style scoped>
-.bg > div {
-  clip-path: circle(75%);
-  transition: clip-path 3s;
-}
-
-.light .bg > div {
-  opacity: 1 !important;
-}
-</style>