Mejorar tema oscuro, añadir dropdownmenu en laboratorios, unificar estilos de botones a outline

src/contexts/ThemeContext.tsx

@@ -1,40 +1,19 @@
-import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
-
-interface ThemeContextType {
-  isDarkMode: boolean;
-  toggleDarkMode: () => void;
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+import { ThemeProvider as NextThemesProvider, useTheme as useNextTheme } from 'next-themes';
+import type { ReactNode } from 'react';
 
 export function ThemeProvider({ children }: { children: ReactNode }) {
-  const [isDarkMode, setIsDarkMode] = useState(() => {
-    const saved = localStorage.getItem('darkMode');
-    return saved ? JSON.parse(saved) : false;
-  });
-
-  useEffect(() => {
-    localStorage.setItem('darkMode', JSON.stringify(isDarkMode));
-    if (isDarkMode) {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  }, [isDarkMode]);
-
-  const toggleDarkMode = () => setIsDarkMode((prev: boolean) => !prev);
-
   return (
-    <ThemeContext.Provider value={{ isDarkMode, toggleDarkMode }}>
+    <NextThemesProvider attribute="class" defaultTheme="system" enableSystem>
       {children}
-    </ThemeContext.Provider>
+    </NextThemesProvider>
   );
 }
 
 export function useTheme() {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within ThemeProvider');
-  }
-  return context;
-}
+  const { theme, setTheme } = useNextTheme();
+  const isDarkMode = theme === 'dark';
+  const toggleDarkMode = () => setTheme(theme === 'dark' ? 'light' : 'dark');
+  return { isDarkMode, toggleDarkMode, theme, setTheme };
+}
+
+export { NextThemesProvider };