feat: update background gradients and presets in BackgroundImageSelector

- Adjusted gradient definitions for various themes to enhance visual appeal and consistency.
- Added new gradient presets (sunset, ocean, forest, galaxy) to the BackgroundContext for broader customization options.
- Cleaned up unused console logs in useBackgroundCycle for better performance and readability.

src/components/settings/BackgroundImageSelector.tsx

@@ -17,67 +17,67 @@ const PRESET_BACKGROUNDS = [
     id: 'theme-subtle',
     name: 'Dégradé subtil',
     description: 'Dégradé doux avec les couleurs du thème',
-    preview: 'linear-gradient(135deg, var(--background) 0%, var(--card-column) 100%)'
+    preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 100%)'
   },
   {
     id: 'theme-primary',
     name: 'Dégradé primaire',
     description: 'Dégradé marqué avec la couleur primaire',
-    preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 60%, var(--background)) 100%)'
+    preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 25%, var(--background)) 100%)'
   },
   {
     id: 'theme-accent',
     name: 'Dégradé accent',
     description: 'Dégradé marqué avec la couleur d\'accent',
-    preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--accent) 60%, var(--background)) 100%)'
+    preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--accent) 25%, var(--background)) 100%)'
   },
   {
     id: 'theme-success',
     name: 'Dégradé succès',
     description: 'Dégradé marqué avec la couleur de succès',
-    preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--success) 60%, var(--background)) 100%)'
+    preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--success) 25%, var(--background)) 100%)'
   },
   {
     id: 'theme-purple',
     name: 'Dégradé violet',
     description: 'Dégradé marqué avec la couleur violette',
-    preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--purple) 60%, var(--background)) 100%)'
+    preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--purple) 25%, var(--background)) 100%)'
   },
   {
     id: 'theme-diagonal',
     name: 'Dégradé diagonal',
     description: 'Dégradé diagonal avec plusieurs couleurs',
-    preview: 'linear-gradient(45deg, var(--background) 0%, color-mix(in srgb, var(--primary) 40%, var(--background)) 50%, color-mix(in srgb, var(--accent) 40%, var(--background)) 100%)'
+    preview: 'linear-gradient(45deg, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 50%, color-mix(in srgb, var(--accent) 20%, var(--background)) 100%)'
   },
   {
     id: 'theme-radial',
     name: 'Dégradé radial',
     description: 'Dégradé radial centré avec les couleurs du thème',
-    preview: 'radial-gradient(circle at center, var(--background) 0%, color-mix(in srgb, var(--primary) 50%, var(--background)) 100%)'
+    preview: 'radial-gradient(circle at center, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 100%)'
   },
   {
     id: 'theme-sunset',
     name: 'Dégradé coucher de soleil',
     description: 'Dégradé orange-rouge intense',
-    preview: 'linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, var(--background)) 0%, color-mix(in srgb, var(--destructive) 60%, var(--background)) 100%)'
+    preview: 'linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--background)) 0%, color-mix(in srgb, var(--destructive) 20%, var(--background)) 100%)'
   },
   {
     id: 'theme-ocean',
     name: 'Dégradé océan',
     description: 'Dégradé bleu profond',
-    preview: 'linear-gradient(135deg, color-mix(in srgb, var(--blue) 70%, var(--background)) 0%, color-mix(in srgb, var(--primary) 50%, var(--background)) 100%)'
+    preview: 'linear-gradient(135deg, color-mix(in srgb, var(--blue) 25%, var(--background)) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 100%)'
   },
   {
     id: 'theme-forest',
     name: 'Dégradé forêt',
     description: 'Dégradé vert naturel',
-    preview: 'linear-gradient(135deg, color-mix(in srgb, var(--green) 60%, var(--background)) 0%, color-mix(in srgb, var(--success) 40%, var(--background)) 100%)'
+    preview: 'linear-gradient(135deg, color-mix(in srgb, var(--green) 25%, var(--background)) 0%, color-mix(in srgb, var(--success) 15%, var(--background)) 100%)'
   },
   {
     id: 'theme-galaxy',
     name: 'Dégradé galaxie',
     description: 'Dégradé violet-bleu mystique',
-    preview: 'linear-gradient(135deg, color-mix(in srgb, var(--purple) 70%, var(--background)) 0%, color-mix(in srgb, var(--blue) 50%, var(--background)) 100%)'
+    preview: 'linear-gradient(135deg, color-mix(in srgb, var(--purple) 25%, var(--background)) 0%, color-mix(in srgb, var(--blue) 20%, var(--background)) 100%)'
   }
 ];
 

src/contexts/BackgroundContext.tsx

@@ -76,19 +76,27 @@ export function BackgroundProvider({ children }: BackgroundProviderProps) {
           'theme-success',
           'theme-purple',
           'theme-diagonal',
-          'theme-radial'
+          'theme-radial',
+          'theme-sunset',
+          'theme-ocean',
+          'theme-forest',
+          'theme-galaxy'
         ];
 
         if (PRESET_BACKGROUNDS.includes(backgroundImage)) {
           // Appliquer le preset basé sur le thème
           const presetStyles = {
-            'theme-subtle': 'linear-gradient(135deg, var(--background) 0%, var(--card-column) 100%)',
+            'theme-subtle': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 100%)',
-            'theme-primary': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 100%)',
+            'theme-primary': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 25%, var(--background)) 100%)',
-            'theme-accent': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--accent) 20%, var(--background)) 100%)',
+            'theme-accent': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--accent) 25%, var(--background)) 100%)',
-            'theme-success': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--success) 20%, var(--background)) 100%)',
+            'theme-success': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--success) 25%, var(--background)) 100%)',
-            'theme-purple': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--purple) 20%, var(--background)) 100%)',
+            'theme-purple': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--purple) 25%, var(--background)) 100%)',
-            'theme-diagonal': 'linear-gradient(45deg, var(--background) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 50%, color-mix(in srgb, var(--accent) 15%, var(--background)) 100%)',
+            'theme-diagonal': 'linear-gradient(45deg, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 50%, color-mix(in srgb, var(--accent) 20%, var(--background)) 100%)',
-            'theme-radial': 'radial-gradient(circle at center, var(--background) 0%, color-mix(in srgb, var(--primary) 25%, var(--background)) 100%)'
+            'theme-radial': 'radial-gradient(circle at center, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 100%)',
+            'theme-sunset': 'linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--background)) 0%, color-mix(in srgb, var(--destructive) 20%, var(--background)) 100%)',
+            'theme-ocean': 'linear-gradient(135deg, color-mix(in srgb, var(--blue) 25%, var(--background)) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 100%)',
+            'theme-forest': 'linear-gradient(135deg, color-mix(in srgb, var(--green) 25%, var(--background)) 0%, color-mix(in srgb, var(--success) 15%, var(--background)) 100%)',
+            'theme-galaxy': 'linear-gradient(135deg, color-mix(in srgb, var(--purple) 25%, var(--background)) 0%, color-mix(in srgb, var(--blue) 20%, var(--background)) 100%)'
           };
           
           backgroundElement.style.backgroundImage = presetStyles[backgroundImage as keyof typeof presetStyles];

src/hooks/useBackgroundCycle.ts

@@ -29,11 +29,6 @@ export function useBackgroundCycle() {
     
     // Ajouter l'image personnalisée préservée si elle existe
     const preservedCustomUrl = localStorage.getItem('preservedCustomBackground');
-    console.log('Debug cycle:', {
-      currentBackground,
-      preservedCustomUrl,
-      localStorageKeys: Object.keys(localStorage)
-    });
     
     if (preservedCustomUrl && !BACKGROUND_CYCLE.includes(preservedCustomUrl)) {
       allBackgrounds.push(preservedCustomUrl);
@@ -67,33 +62,10 @@ export function useBackgroundCycle() {
       const nextNextBackground = allBackgrounds[nextNextIndex];
       const finalBackgroundImage = nextNextBackground === 'none' ? undefined : nextNextBackground;
       
-      console.log('Cycle result:', {
-        allBackgrounds,
-        currentIndex,
-        actualCurrentIndex,
-        nextIndex,
-        nextBackground,
-        backgroundImage,
-        currentBackground,
-        nextNextIndex,
-        nextNextBackground,
-        finalBackgroundImage
-      });
-      
       updateViewPreferences({ backgroundImage: finalBackgroundImage });
       return;
     }
     
-    console.log('Cycle result:', {
-      allBackgrounds,
-      currentIndex,
-      actualCurrentIndex,
-      nextIndex,
-      nextBackground,
-      backgroundImage,
-      currentBackground
-    });
-    
     updateViewPreferences({ backgroundImage });
   };