feat: enhance theme management and customization options

- Added support for multiple themes (dracula, monokai, nord, gruvbox, tokyo_night, catppuccin, rose_pine, one_dark, material, solarized) in the application.
- Updated `setTheme` function to accept the new `Theme` type, allowing for more flexible theme selection.
- Introduced `ThemeSelector` component in GeneralSettingsPage for user-friendly theme selection.
- Modified `ThemeProvider` to handle user preferred themes and improved theme toggling logic.
- Updated CSS variables in `globals.css` to support new themes, enhancing visual consistency across the app.

src/contexts/ThemeContext.tsx

@@ -2,13 +2,13 @@
 
 import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
 import { updateViewPreferences } from '@/actions/preferences';
-
-type Theme = 'light' | 'dark';
+import { Theme } from '@/lib/types';
 
 interface ThemeContextType {
   theme: Theme;
   toggleTheme: () => void;
   setTheme: (theme: Theme) => void;
+  userPreferredTheme: Theme;
 }
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
@@ -16,10 +16,12 @@ const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 interface ThemeProviderProps {
   children: ReactNode;
   initialTheme?: Theme;
+  userPreferredTheme?: Theme;
 }
 
-export function ThemeProvider({ children, initialTheme = 'dark' }: ThemeProviderProps) {
+export function ThemeProvider({ children, initialTheme = 'dark', userPreferredTheme: initialUserPreferredTheme = 'dark' }: ThemeProviderProps) {
   const [theme, setThemeState] = useState<Theme>(initialTheme);
+  const [userPreferredTheme, setUserPreferredTheme] = useState<Theme>(initialUserPreferredTheme);
   const [mounted, setMounted] = useState(false);
 
   // Hydration safe initialization
@@ -30,12 +32,16 @@ export function ThemeProvider({ children, initialTheme = 'dark' }: ThemeProvider
   // Apply theme class to document
   useEffect(() => {
     if (mounted) {
-      document.documentElement.className = theme;
+      // Remove all existing theme classes
+      document.documentElement.classList.remove('light', 'dark', 'dracula', 'monokai', 'nord', 'gruvbox', 'tokyo_night', 'catppuccin', 'rose_pine', 'one_dark', 'material', 'solarized');
+      // Add the current theme class
+      document.documentElement.classList.add(theme);
     }
   }, [theme, mounted]);
 
   const toggleTheme = async () => {
-    const newTheme = theme === 'dark' ? 'light' : 'dark';
+    // Toggle between light and the user's chosen dark theme
+    const newTheme = theme === 'light' ? userPreferredTheme : 'light';
     setThemeState(newTheme);
     
     // Sauvegarder en base de façon asynchrone via server action
@@ -54,6 +60,11 @@ export function ThemeProvider({ children, initialTheme = 'dark' }: ThemeProvider
   const setTheme = async (newTheme: Theme) => {
     setThemeState(newTheme);
     
+    // Si ce n'est pas le thème light, c'est le thème préféré de l'utilisateur
+    if (newTheme !== 'light') {
+      setUserPreferredTheme(newTheme);
+    }
+    
     // Sauvegarder en base de façon asynchrone via server action
     try {
       const result = await updateViewPreferences({
@@ -68,7 +79,7 @@ export function ThemeProvider({ children, initialTheme = 'dark' }: ThemeProvider
   };
 
   return (
-    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
+    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme, userPreferredTheme }}>
       <div className={mounted ? theme : initialTheme}>
         {children}
       </div>