feat(ui): enhance dark mode support across components for improved accessibility and user experience

fix(Footer): update email address in social links to the correct contact
style(Header): adjust dropdown margin for better alignment and consistency
style(ThemeToggle): improve button hover effect and icon color for dark mode
style(StepperHeader): modify margin based on theme for better layout
style(WorkoutSessionSets): change background color for current exercise to enhance visibility

src/components/ui/link.tsx

@@ -13,9 +13,9 @@ interface LinkProps extends ComponentProps<typeof NextLink> {
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   ({ className, variant = "default", size = "base", children, ...props }, ref) => {
     const variants = {
-      default: "link link-hover text-base-content hover:text-primary transition-colors",
-      nav: "link link-hover text-base-content/80 hover:text-base-content transition-colors",
-      footer: "link link-hover text-base-content/70 hover:text-base-content transition-colors",
+      default: "link link-hover text-base-content hover:text-primary transition-colors dark:text-gray-200 dark:hover:text-primary",
+      nav: "link link-hover text-base-content/80 hover:text-base-content transition-colors dark:text-gray-200 dark:hover:text-primary",
+      footer: "link link-hover text-base-content/70 hover:text-base-content transition-colors dark:text-gray-200 dark:hover:text-primary",
       button: "btn btn-link no-underline hover:underline",
     };
 

src/features/layout/Footer.tsx

@@ -16,7 +16,7 @@ const SOCIAL_LINKS = [
     label: "Twitter/X",
   },
   {
-    href: "mailto:info@workout.cool",
+    href: "mailto:coolworkout6@gmail.com",
     icon: Mail,
     label: "Email",
   },
@@ -32,14 +32,14 @@ export const Footer = async () => {
   const t = await getI18n();
 
   return (
-    <footer className="border-t border-base-300 bg-base-100 px-6 py-4">
+    <footer className="border-t border-base-300 dark:border-gray-800 bg-base-100 dark:bg-black px-6 py-4 rounded-b-lg">
       <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
         {/* Social Icons */}
         <div className="flex gap-2">
           {SOCIAL_LINKS.map(({ href, icon: Icon, label }) => (
             <a
               aria-label={label}
-              className="btn btn-ghost btn-sm btn-circle text-gray-700"
+              className="btn btn-ghost btn-sm btn-circle text-gray-700 dark:text-gray-300 hover:bg-slate-100 dark:hover:bg-gray-800"
               href={href}
               key={label}
               rel="noopener noreferrer"
@@ -51,9 +51,10 @@ export const Footer = async () => {
         </div>
 
         {/* Navigation Links */}
-        <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 text-center text-gray-700">
+        <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 text-center text-gray-700 dark:text-gray-300">
           {NAVIGATION(t).map(({ name, href }) => (
             <Link
+              className="hover:underline hover:text-blue-500 dark:hover:text-blue-400"
               href={href}
               key={name}
               size="sm"

src/features/layout/Header.tsx

@@ -63,7 +63,7 @@ export const Header = () => {
 
         <ThemeToggle />
 
-        <div className="dropdown dropdown-end">
+        <div className="dropdown dropdown-end ml-1">
           <div className="btn btn-ghost btn-circle avatar" role="button" tabIndex={0}>
             <div className="w-8 rounded-full bg-primary text-primary-content !flex items-center justify-center text-sm font-medium">
               {userAvatar || <User className="w-4 h-4" />}
@@ -100,7 +100,7 @@ export const Header = () => {
             ) : (
               <li>
                 <button
-                  className="flex items-center gap-2 text-base text-gray-700 dark:text-gray-300 hover:bg-slate-100 dark:hover:bg-gray-800 rounded-lg px-3 py-2 transition-colors"
+                  className="flex items-center gap-2 text-base text-gray-700 dark:text-gray-300 hover:bg-slate-100  rounded-lg px-3 py-2 transition-colors"
                   onClick={handleSignOut}
                 >
                   <LogOut className="w-4 h-4" />

src/features/release-notes/ui/release-notes-dialog.tsx

@@ -19,7 +19,7 @@ export function ReleaseNotesDialog() {
       <DialogTrigger asChild>
         <Button aria-label={t("release_notes.release_notes")} className="rounded-full hover:bg-slate-100" size="small" variant="ghost">
           <div className="tooltip" data-tip={t("commons.changelog")}>
-            <Bell className="text-blue-500 h-6 w-6" />
+            <Bell className="text-blue-500 dark:text-blue-400 h-6 w-6" />
           </div>
         </Button>
       </DialogTrigger>

src/features/theme/ThemeToggle.tsx

@@ -14,9 +14,17 @@ export function ThemeToggle() {
   }, [resolvedTheme]);
 
   return (
-    <Button className="rounded-full p-2 pr-2" onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")} variant="ghost">
+    <Button
+      className="hover:bg-slate-100 rounded-full p-2 pr-2"
+      onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}
+      variant="ghost"
+    >
       <div className="tooltip" data-tip={resolvedTheme === "light" ? "Dark mode" : "Light mode"}>
-        {resolvedTheme === "light" ? <MoonIcon /> : <SunIcon />}
+        {resolvedTheme === "light" ? (
+          <MoonIcon className="text-blue-500 dark:text-blue-400" />
+        ) : (
+          <SunIcon className="text-blue-500 dark:text-blue-400" />
+        )}
       </div>
     </Button>
   );

src/features/workout-builder/ui/stepper-header.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React from "react";
+import { useTheme } from "next-themes";
 import { Check } from "lucide-react";
 
 import { cn } from "@/shared/lib/utils";
@@ -88,8 +89,9 @@ function StepperStep({ description, isActive, isCompleted, stepNumber, title }:
 }
 
 export function StepperHeader({ steps }: StepperHeaderProps) {
+  const { resolvedTheme } = useTheme();
   return (
-    <div className="w-full mb-8">
+    <div className={cn("w-full", resolvedTheme === "dark" ? "my-8" : "mb-8")}>
       {/* Layout mobile - vertical */}
       <div className="flex flex-col space-y-6 md:hidden">
         {steps.map((step, index) => (

src/features/workout-session/ui/workout-session-sets.tsx

@@ -163,7 +163,7 @@ export function WorkoutSessionSets({
               )}
               {/* Si exercice courant, afficher le détail */}
               {idx === currentExerciseIndex && (
-                <div className="bg-white dark:bg-slate-900 rounded-xl my-10">
+                <div className="bg-white dark:bg-transparent rounded-xl my-10">
                   {/* Liste des sets */}
                   <div className="space-y-10 mb-8">
                     {ex.sets.map((set, setIdx) => (