From 6c43282d6f208e906a3f05894841ee1d5e870efd Mon Sep 17 00:00:00 2001
From: Reviflow Bot <bot@reviflow.ai>
Date: Thu, 5 Feb 2026 21:52:18 +0100
Subject: [PATCH] feat(quiz): implement dark mode for quiz interface

- Apply dark mode styling to QuizPage and RevisionViewPage
- Add dark mode support to QuestionCard and ResultCard components
- Style HistoryPage (Mes Cours) for dark theme
- Update loading skeletons, buttons, and text colors for dark mode visibility
---
 frontend/src/features/quiz/HistoryPage.tsx    | 32 +++++++++----------
 frontend/src/features/quiz/QuestionCard.tsx   | 30 ++++++++---------
 frontend/src/features/quiz/QuizPage.tsx       | 24 +++++++-------
 frontend/src/features/quiz/ResultCard.tsx     | 26 +++++++--------
 .../src/features/quiz/RevisionViewPage.tsx    | 26 +++++++--------
 5 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/frontend/src/features/quiz/HistoryPage.tsx b/frontend/src/features/quiz/HistoryPage.tsx
index ac5f858..7bbba0b 100644
--- a/frontend/src/features/quiz/HistoryPage.tsx
+++ b/frontend/src/features/quiz/HistoryPage.tsx
@@ -70,21 +70,21 @@ export const HistoryPage: React.FC = () => {
     const getSubjectStyle = (subject: string) => SUBJECT_STYLES[subject] || SUBJECT_STYLES['default'];
 
     return (
-        <div className="min-h-screen bg-[#f8fafc] font-sans text-gray-900 pb-20">
+        <div className="min-h-screen bg-[#f8fafc] dark:bg-slate-900 font-sans text-gray-900 dark:text-gray-100 pb-20 transition-colors duration-300">
             {/* Nav */}
-            <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-40">
+            <nav className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-gray-200 dark:border-slate-800 sticky top-0 z-40 transition-colors duration-300">
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                     <div className="flex items-center justify-between h-16">
                         <motion.button
                             whileHover={{ scale: 1.05 }}
                             whileTap={{ scale: 0.95 }}
                             onClick={() => navigate('/dashboard')}
-                            className="flex items-center gap-2 px-4 py-2 bg-white border-2 border-slate-100 text-slate-500 font-bold rounded-xl hover:text-indigo-600 hover:border-indigo-100 transition-all shadow-sm"
+                            className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 text-slate-500 dark:text-slate-400 font-bold rounded-xl hover:text-indigo-600 dark:hover:text-indigo-400 hover:border-indigo-100 dark:hover:border-indigo-900 transition-all shadow-sm"
                         >
                             <ChevronLeft className="w-5 h-5" />
                             <span>Retour</span>
                         </motion.button>
-                        <h1 className="text-xl font-black tracking-tight text-gray-900">Mes Cours</h1>
+                        <h1 className="text-xl font-black tracking-tight text-gray-900 dark:text-white">Mes Cours</h1>
                         <div className="w-20"></div> {/* spacer */}
                     </div>
                 </div>
@@ -97,7 +97,7 @@ export const HistoryPage: React.FC = () => {
                     <input
                         type="text"
                         placeholder="Rechercher un cours ou une matière..."
-                        className="w-full pl-12 pr-6 py-4 bg-white border border-slate-200 rounded-2xl shadow-sm focus:ring-4 focus:ring-indigo-50 focus:border-indigo-200 transition-all outline-none font-medium"
+                        className="w-full pl-12 pr-6 py-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-sm focus:ring-4 focus:ring-indigo-50 dark:focus:ring-indigo-900/30 focus:border-indigo-200 dark:focus:border-indigo-700 text-gray-900 dark:text-white placeholder-slate-400 transition-all outline-none font-medium"
                         value={searchTerm}
                         onChange={(e) => setSearchTerm(e.target.value)}
                     />
@@ -118,9 +118,9 @@ export const HistoryPage: React.FC = () => {
                                     initial={{ opacity: 0, y: 10 }}
                                     animate={{ opacity: 1, y: 0 }}
                                     onClick={() => navigate(`/play/${rev.id}`)}
-                                    className="group bg-white border border-slate-200 p-5 rounded-2xl hover:border-indigo-200 hover:shadow-xl hover:shadow-indigo-50/50 transition-all cursor-pointer flex items-center gap-6"
+                                    className="group bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-5 rounded-2xl hover:border-indigo-200 dark:hover:border-indigo-900 hover:shadow-xl hover:shadow-indigo-50/50 dark:hover:shadow-none transition-all cursor-pointer flex items-center gap-6"
                                 >
-                                    <div className={`w-14 h-14 rounded-2xl flex items-center justify-center shrink-0 ${style.bg} ${style.color}`}>
+                                    <div className={`w-14 h-14 rounded-2xl flex items-center justify-center shrink-0 ${style.bg} ${style.color} dark:bg-opacity-20`}>
                                         {style.icon}
                                     </div>
 
@@ -128,15 +128,15 @@ export const HistoryPage: React.FC = () => {
                                         <div className={`text-[11px] font-black uppercase tracking-widest mb-1 ${style.color}`}>
                                             {rev.subject || 'Général'}
                                         </div>
-                                        <h3 className="text-lg font-bold text-slate-800 group-hover:text-indigo-600 transition-colors truncate">
+                                        <h3 className="text-lg font-bold text-slate-800 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors truncate">
                                             {rev.topic}
                                         </h3>
                                         <div className="flex items-center gap-3 mt-1.5">
-                                            <div className="flex items-center gap-1 text-xs font-bold text-slate-400 bg-slate-50 px-2 py-0.5 rounded-md">
+                                            <div className="flex items-center gap-1 text-xs font-bold text-slate-400 dark:text-slate-500 bg-slate-50 dark:bg-slate-700/50 px-2 py-0.5 rounded-md">
                                                 <Calendar className="w-3 h-3" />
                                                 {new Date(rev.created_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
                                             </div>
-                                            <span className="text-slate-300">•</span>
+                                            <span className="text-slate-300 dark:text-slate-600">•</span>
                                             <div className="text-xs font-black text-indigo-400 uppercase tracking-tight">
                                                 Quizz {rev.current_series}/{rev.total_series}
                                             </div>
@@ -145,11 +145,11 @@ export const HistoryPage: React.FC = () => {
 
                                     <div className="flex items-center gap-3">
                                         {rev.status === 'COMPLETED' && (
-                                            <span className="hidden sm:flex px-3 py-1.5 bg-green-50 text-green-600 text-[10px] font-black uppercase tracking-widest rounded-lg border border-green-100 items-center gap-2">
+                                            <span className="hidden sm:flex px-3 py-1.5 bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 text-[10px] font-black uppercase tracking-widest rounded-lg border border-green-100 dark:border-green-900/30 items-center gap-2">
                                                 <span>✅</span> Terminé
                                             </span>
                                         )}
-                                        <div className="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-300 group-hover:bg-indigo-600 group-hover:text-white transition-all">
+                                        <div className="w-10 h-10 rounded-full bg-slate-50 dark:bg-slate-700 flex items-center justify-center text-slate-300 dark:text-slate-500 group-hover:bg-indigo-600 group-hover:text-white transition-all">
                                             <ArrowRight className="w-5 h-5" />
                                         </div>
                                     </div>
@@ -158,11 +158,11 @@ export const HistoryPage: React.FC = () => {
                         })}
                     </div>
                 ) : (
-                    <div className="text-center py-20 bg-white rounded-[2rem] border border-dashed border-slate-200">
+                    <div className="text-center py-20 bg-white dark:bg-slate-800 rounded-[2rem] border border-dashed border-slate-200 dark:border-slate-700">
                         <div className="text-4xl mb-4">🔍</div>
-                        <h3 className="text-xl font-bold text-slate-800">Aucun cours trouvé</h3>
-                        <p className="text-slate-500 mt-2">Essaie une autre recherche ou crée un nouveau cours !</p>
-                        <Link to="/new" className="mt-6 inline-flex px-6 py-3 bg-indigo-600 text-white rounded-xl font-bold hover:bg-indigo-700 transition-all active:scale-95 shadow-lg shadow-indigo-100">
+                        <h3 className="text-xl font-bold text-slate-800 dark:text-white">Aucun cours trouvé</h3>
+                        <p className="text-slate-500 dark:text-slate-400 mt-2">Essaie une autre recherche ou crée un nouveau cours !</p>
+                        <Link to="/new" className="mt-6 inline-flex px-6 py-3 bg-indigo-600 text-white rounded-xl font-bold hover:bg-indigo-700 transition-all active:scale-95 shadow-lg shadow-indigo-100 dark:shadow-none">
                             Créer un cours
                         </Link>
                     </div>
diff --git a/frontend/src/features/quiz/QuestionCard.tsx b/frontend/src/features/quiz/QuestionCard.tsx
index ef49940..117079f 100644
--- a/frontend/src/features/quiz/QuestionCard.tsx
+++ b/frontend/src/features/quiz/QuestionCard.tsx
@@ -42,14 +42,14 @@ export function QuestionCard({
     const isCorrect = selectedOption === correctAnswer;
 
     return (
-        <div className={`bg-white rounded-xl border border-slate-200 shadow-soft-indigo overflow-hidden max-w-2xl mx-auto mt-8 p-8 transition-transform duration-300 ${animation === 'pop' ? 'scale-105' : animation === 'shake' ? 'animate-shake' : ''
+        <div className={`bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-soft-indigo dark:shadow-none overflow-hidden max-w-2xl mx-auto mt-8 p-8 transition-transform duration-300 ${animation === 'pop' ? 'scale-105' : animation === 'shake' ? 'animate-shake' : ''
             }`}>
             <div className="mb-10">
                 <div className="flex justify-between items-center mb-3">
                     <span className="text-xs font-black text-indigo-400 uppercase tracking-[0.2em]">Question {currentStep} / {totalSteps}</span>
-                    <span className="text-xs font-black text-slate-400">{Math.round((currentStep / totalSteps) * 100)}%</span>
+                    <span className="text-xs font-black text-slate-400 dark:text-slate-500">{Math.round((currentStep / totalSteps) * 100)}%</span>
                 </div>
-                <div className="w-full bg-slate-100 rounded-full h-2.5 p-0.5">
+                <div className="w-full bg-slate-100 dark:bg-slate-700/50 rounded-full h-2.5 p-0.5">
                     <div
                         className="bg-gradient-to-r from-indigo-500 to-purple-500 h-1.5 rounded-full transition-all duration-700 ease-out shadow-sm"
                         style={{ width: `${(currentStep / totalSteps) * 100}%` }}
@@ -57,7 +57,7 @@ export function QuestionCard({
                 </div>
             </div>
 
-            <h2 className="text-3xl font-black text-slate-900 mb-10 leading-tight tracking-tight">{question}</h2>
+            <h2 className="text-3xl font-black text-slate-900 dark:text-white mb-10 leading-tight tracking-tight">{question}</h2>
 
             <div className="grid grid-cols-1 gap-4 mb-4">
                 {options.map((option, index) => (
@@ -66,46 +66,46 @@ export function QuestionCard({
                         disabled={selectedOption !== null}
                         onClick={() => onSelectOption(index)}
                         className={`w-full text-left p-5 border-2 rounded-xl transition-all duration-200 group relative ${selectedOption === null
-                            ? 'border-slate-100 hover:border-soft-indigo hover:bg-indigo-50/30'
+                            ? 'border-slate-100 dark:border-slate-700 hover:border-soft-indigo dark:hover:border-indigo-500 hover:bg-indigo-50/30 dark:hover:bg-indigo-900/20'
                             : selectedOption === index
                                 ? index === correctAnswer
-                                    ? 'border-green-500 bg-green-50 text-green-700'
-                                    : 'border-orange-400 bg-orange-50 text-orange-700'
+                                    ? 'border-green-500 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400'
+                                    : 'border-orange-400 bg-orange-50 dark:bg-orange-900/20 text-orange-700 dark:text-orange-400'
                                 : index === correctAnswer
-                                    ? 'border-green-500 bg-green-50/50'
-                                    : 'border-slate-100 opacity-50'
+                                    ? 'border-green-500 bg-green-50/50 dark:bg-green-900/10'
+                                    : 'border-slate-100 dark:border-slate-700 opacity-50'
                             }`}
                     >
                         <div className="flex items-center">
                             <span className={`flex-shrink-0 h-8 w-8 flex items-center justify-center rounded-full border-2 text-sm font-bold transition-colors ${selectedOption === null
-                                ? 'border-slate-200 text-slate-400 group-hover:border-soft-indigo group-hover:text-soft-indigo'
+                                ? 'border-slate-200 dark:border-slate-600 text-slate-400 dark:text-slate-500 group-hover:border-soft-indigo dark:group-hover:border-indigo-400 group-hover:text-soft-indigo dark:group-hover:text-indigo-400'
                                 : selectedOption === index
                                     ? index === correctAnswer
                                         ? 'border-green-500 bg-green-500 text-white'
                                         : 'border-orange-400 bg-orange-400 text-white'
                                     : index === correctAnswer
                                         ? 'border-green-500 text-green-500'
-                                        : 'border-slate-200 text-slate-300'
+                                        : 'border-slate-200 dark:border-slate-600 text-slate-300 dark:text-slate-600'
                                 }`}>
                                 {String.fromCharCode(65 + index)}
                             </span>
-                            <span className="ml-4 text-lg font-medium">{option}</span>
+                            <span className="ml-4 text-lg font-medium text-slate-700 dark:text-slate-200">{option}</span>
                         </div>
                     </button>
                 ))}
             </div>
 
             {selectedOption !== null && (
-                <div className={`mt-6 p-6 rounded-2xl animate-in fade-in slide-in-from-top-2 duration-300 ${isCorrect ? 'bg-green-50 border border-green-100' : 'bg-orange-50 border border-orange-100'}`}>
+                <div className={`mt-6 p-6 rounded-2xl animate-in fade-in slide-in-from-top-2 duration-300 ${isCorrect ? 'bg-green-50 dark:bg-green-900/20 border border-green-100 dark:border-green-900/30' : 'bg-orange-50 dark:bg-orange-900/20 border border-orange-100 dark:border-orange-900/30'}`}>
                     <div className="flex items-start gap-4">
                         <div className={`text-2xl ${isCorrect ? 'grayscale-0' : 'grayscale-0'}`}>
                             {isCorrect ? '🎉' : '💡'}
                         </div>
                         <div>
-                            <h4 className={`font-black uppercase tracking-wider text-xs mb-1 ${isCorrect ? 'text-green-600' : 'text-orange-600'}`}>
+                            <h4 className={`font-black uppercase tracking-wider text-xs mb-1 ${isCorrect ? 'text-green-600 dark:text-green-400' : 'text-orange-600 dark:text-orange-400'}`}>
                                 {isCorrect ? 'Bonne réponse !' : 'Oups, pas tout à fait...'}
                             </h4>
-                            <p className="text-slate-800 font-medium leading-relaxed">
+                            <p className="text-slate-800 dark:text-slate-200 font-medium leading-relaxed">
                                 {explanation || "Pas d'explication disponible."}
                             </p>
                         </div>
diff --git a/frontend/src/features/quiz/QuizPage.tsx b/frontend/src/features/quiz/QuizPage.tsx
index b494d9e..b3d9b2d 100644
--- a/frontend/src/features/quiz/QuizPage.tsx
+++ b/frontend/src/features/quiz/QuizPage.tsx
@@ -246,7 +246,7 @@ export function QuizPage() {
     };
 
     return (
-        <div className={`min-h-screen bg-cream py-8 px-4 sm:px-6 lg:px-8 ${isDyslexic ? 'font-dyslexic' : 'font-sans'}`}>
+        <div className={`min-h-screen bg-cream dark:bg-slate-900 py-8 px-4 sm:px-6 lg:px-8 ${isDyslexic ? 'font-dyslexic' : 'font-sans'} transition-colors duration-300`}>
             <div className="max-w-screen-sm mx-auto relative content-center">
 
                 {/* Pause Button */}
@@ -255,44 +255,44 @@ export function QuizPage() {
                         whileHover={{ scale: 1.05 }}
                         whileTap={{ scale: 0.95 }}
                         onClick={handlePause}
-                        className="absolute -top-2 right-0 text-slate-400 hover:text-indigo-600 font-bold text-sm bg-white px-4 py-2 rounded-full shadow-sm hover:shadow-md transition-all border border-slate-100 flex items-center gap-2"
+                        className="absolute -top-2 right-0 text-slate-400 dark:text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400 font-bold text-sm bg-white dark:bg-slate-800 px-4 py-2 rounded-full shadow-sm hover:shadow-md transition-all border border-slate-100 dark:border-slate-700 flex items-center gap-2"
                     >
                         <span>⏸ Pause & Quitter</span>
                     </motion.button>
                 )}
 
                 {loading && (
-                    <div className="w-full max-w-2xl mx-auto bg-white rounded-3xl shadow-xl p-8 animate-pulse">
+                    <div className="w-full max-w-2xl mx-auto bg-white dark:bg-slate-800 rounded-3xl shadow-xl p-8 animate-pulse">
                         <div className="flex justify-between items-center mb-8">
-                            <Skeleton className="h-4 w-24 bg-indigo-50" />
-                            <Skeleton className="h-4 w-32 bg-indigo-50" />
+                            <Skeleton className="h-4 w-24 bg-indigo-50 dark:bg-indigo-900/30" />
+                            <Skeleton className="h-4 w-32 bg-indigo-50 dark:bg-indigo-900/30" />
                         </div>
 
-                        <Skeleton className="h-8 w-3/4 mb-4 bg-gray-200" />
-                        <Skeleton className="h-8 w-1/2 mb-12 bg-gray-200" />
+                        <Skeleton className="h-8 w-3/4 mb-4 bg-gray-200 dark:bg-slate-700" />
+                        <Skeleton className="h-8 w-1/2 mb-12 bg-gray-200 dark:bg-slate-700" />
 
                         <div className="space-y-4">
                             {[1, 2, 3, 4].map((i) => (
-                                <Skeleton key={i} className="h-16 w-full rounded-xl bg-gray-100" />
+                                <Skeleton key={i} className="h-16 w-full rounded-xl bg-gray-100 dark:bg-slate-700" />
                             ))}
                         </div>
 
                         <div className="mt-8 text-center">
-                            <p className="text-indigo-600 font-medium animate-pulse">Génération de votre quiz en cours...</p>
+                            <p className="text-indigo-600 dark:text-indigo-400 font-medium animate-pulse">Génération de votre quiz en cours...</p>
                         </div>
                     </div>
                 )}
 
                 {error && (
-                    <div className="text-center text-red-600 bg-red-50 p-8 rounded-[2.5rem] mt-10 border-2 border-red-100 shadow-xl shadow-red-50 animate-in zoom-in duration-300">
+                    <div className="text-center text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 p-8 rounded-[2.5rem] mt-10 border-2 border-red-100 dark:border-red-900/30 shadow-xl shadow-red-50 dark:shadow-none animate-in zoom-in duration-300">
                         <div className="text-5xl mb-4">⚠️</div>
                         <h3 className="text-2xl font-black mb-2">Une erreur est survenue</h3>
-                        <p className="font-medium text-red-500 opacity-80">{error}</p>
+                        <p className="font-medium text-red-500 dark:text-red-300 opacity-80">{error}</p>
                         <motion.button
                             whileHover={{ scale: 1.05 }}
                             whileTap={{ scale: 0.95 }}
                             onClick={() => navigate('/dashboard')}
-                            className="mt-8 px-8 py-4 bg-white border-2 border-red-100 text-red-600 font-black rounded-2xl hover:bg-red-50 transition-all shadow-lg shadow-red-50 flex items-center justify-center gap-3"
+                            className="mt-8 px-8 py-4 bg-white dark:bg-slate-800 border-2 border-red-100 dark:border-red-900/30 text-red-600 dark:text-red-400 font-black rounded-2xl hover:bg-red-50 dark:hover:bg-red-900/20 transition-all shadow-lg shadow-red-50 dark:shadow-none flex items-center justify-center gap-3"
                         >
                             Retour au tableau de bord
                         </motion.button>
diff --git a/frontend/src/features/quiz/ResultCard.tsx b/frontend/src/features/quiz/ResultCard.tsx
index c7da20e..202e0c4 100644
--- a/frontend/src/features/quiz/ResultCard.tsx
+++ b/frontend/src/features/quiz/ResultCard.tsx
@@ -47,34 +47,34 @@ export function ResultCard({ score, totalQuestions, topic, onRetry, onNextSeries
 
     if (isResumingSeries) {
         message = "Prêt pour la suite ?";
-        bgColor = "bg-blue-50";
-        color = "text-blue-600";
+        bgColor = "bg-blue-50 dark:bg-blue-900/20";
+        color = "text-blue-600 dark:text-blue-400";
     }
     else if (percentage >= 80) {
         message = "Excellent travail !";
-        color = "text-green-600";
-        bgColor = "bg-green-50";
+        color = "text-green-600 dark:text-green-400";
+        bgColor = "bg-green-50 dark:bg-green-900/20";
     } else if (percentage >= 50) {
         message = "Bravo, bel effort !";
-        color = "text-soft-indigo";
-        bgColor = "bg-indigo-50";
+        color = "text-soft-indigo dark:text-indigo-400";
+        bgColor = "bg-indigo-50 dark:bg-indigo-900/20";
     }
 
     return (
-        <div className="bg-white rounded-[3rem] shadow-2xl shadow-indigo-100 border border-slate-50 overflow-hidden max-w-xl mx-auto mt-10 p-12 text-center animate-in zoom-in-95 duration-500">
-            <h2 className="text-4xl font-black text-slate-900 mb-2 tracking-tight">Quiz Terminé !</h2>
-            <p className="text-slate-400 mb-10 font-bold uppercase tracking-widest text-xs">Sujet : {topic}</p>
+        <div className="bg-white dark:bg-slate-800 rounded-[3rem] shadow-2xl shadow-indigo-100 dark:shadow-none border border-slate-50 dark:border-slate-700 overflow-hidden max-w-xl mx-auto mt-10 p-12 text-center animate-in zoom-in-95 duration-500">
+            <h2 className="text-4xl font-black text-slate-900 dark:text-white mb-2 tracking-tight">Quiz Terminé !</h2>
+            <p className="text-slate-400 dark:text-slate-500 mb-10 font-bold uppercase tracking-widest text-xs">Sujet : {topic}</p>
 
             <div className={`mb-10 p-8 rounded-2xl ${bgColor}`}>
                 <div className={`text-7xl font-black ${color} mb-4`}>{percentage}%</div>
-                <p className="text-slate-700 text-xl font-semibold">{score} sur {totalQuestions} corrects</p>
+                <p className="text-slate-700 dark:text-slate-300 text-xl font-semibold">{score} sur {totalQuestions} corrects</p>
                 <p className={`text-lg mt-3 font-medium ${color}`}>{message}</p>
             </div>
 
             <div className="flex flex-col sm:flex-row justify-center gap-4">
                 <button
                     onClick={onRetry}
-                    className="flex-1 inline-flex justify-center items-center px-6 py-3 border-2 border-soft-indigo text-soft-indigo rounded-xl hover:bg-indigo-50 font-bold transition-all"
+                    className="flex-1 inline-flex justify-center items-center px-6 py-3 border-2 border-soft-indigo dark:border-indigo-500 text-soft-indigo dark:text-indigo-400 rounded-xl hover:bg-indigo-50 dark:hover:bg-indigo-900/20 font-bold transition-all"
                 >
                     Recommencer
                 </button>
@@ -82,14 +82,14 @@ export function ResultCard({ score, totalQuestions, topic, onRetry, onNextSeries
                 {onNextSeries && seriesInfo && seriesInfo.current < seriesInfo.total && (
                     <button
                         onClick={onNextSeries}
-                        className="flex-1 inline-flex justify-center items-center px-6 py-3 border-2 border-transparent bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 font-bold shadow-md shadow-indigo-200 transition-all animate-pulse"
+                        className="flex-1 inline-flex justify-center items-center px-6 py-3 border-2 border-transparent bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 font-bold shadow-md shadow-indigo-200 dark:shadow-none transition-all animate-pulse"
                     >
                         Suite (Partie {seriesInfo.current + 1}/{seriesInfo.total})
                     </button>
                 )}
                 <Link
                     to="/dashboard"
-                    className="flex-1 inline-flex justify-center items-center px-6 py-3 border-2 border-transparent bg-soft-indigo text-white rounded-xl hover:opacity-90 font-bold shadow-md shadow-indigo-200 transition-all"
+                    className="flex-1 inline-flex justify-center items-center px-6 py-3 border-2 border-transparent bg-soft-indigo dark:bg-indigo-600 text-white rounded-xl hover:opacity-90 font-bold shadow-md shadow-indigo-200 dark:shadow-none transition-all"
                 >
                     Tableau de bord
                 </Link>
diff --git a/frontend/src/features/quiz/RevisionViewPage.tsx b/frontend/src/features/quiz/RevisionViewPage.tsx
index e34e471..350caeb 100644
--- a/frontend/src/features/quiz/RevisionViewPage.tsx
+++ b/frontend/src/features/quiz/RevisionViewPage.tsx
@@ -73,14 +73,14 @@ export function RevisionViewPage() {
     }
 
     return (
-        <div className={`min-h-screen bg-[#FDFCF8] py-12 ${isDyslexic ? 'font-dyslexic' : ''}`}>
+        <div className={`min-h-screen bg-[#FDFCF8] dark:bg-slate-900 py-12 ${isDyslexic ? 'font-dyslexic' : ''} transition-colors duration-300`}>
             <div className="max-w-4xl mx-auto px-4">
                 <div className="flex justify-between items-center mb-10">
                     <motion.button
                         whileHover={{ scale: 1.05 }}
                         whileTap={{ scale: 0.95 }}
                         onClick={() => navigate('/dashboard')}
-                        className="flex items-center gap-2 px-4 py-2 bg-white border-2 border-slate-100 text-slate-500 font-bold rounded-xl hover:text-indigo-600 hover:border-indigo-100 transition-all shadow-sm"
+                        className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 text-slate-500 dark:text-slate-400 font-bold rounded-xl hover:text-indigo-600 dark:hover:text-indigo-400 hover:border-indigo-100 dark:hover:border-indigo-900 transition-all shadow-sm"
                     >
                         <span>← Retour</span>
                     </motion.button>
@@ -88,22 +88,22 @@ export function RevisionViewPage() {
                     <DyslexiaToggle />
                 </div>
 
-                <div className="bg-white rounded-[2.5rem] shadow-xl shadow-indigo-100/50 border border-slate-50 p-10 mb-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
-                    <div className="mb-8 border-b border-slate-100 pb-6">
-                        <h1 className="text-4xl font-black text-slate-900 mb-2">{revision.topic}</h1>
-                        <p className="text-slate-400 font-bold uppercase tracking-widest text-xs">
+                <div className="bg-white dark:bg-slate-800 rounded-[2.5rem] shadow-xl shadow-indigo-100/50 dark:shadow-none border border-slate-50 dark:border-slate-700 p-10 mb-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
+                    <div className="mb-8 border-b border-slate-100 dark:border-slate-700 pb-6">
+                        <h1 className="text-4xl font-black text-slate-900 dark:text-white mb-2">{revision.topic}</h1>
+                        <p className="text-slate-400 dark:text-slate-500 font-bold uppercase tracking-widest text-xs">
                             Révision du {new Date(revision.created_at).toLocaleDateString()}
                         </p>
                     </div>
 
-                    <div className="prose prose-indigo max-w-none text-slate-600 leading-relaxed whitespace-pre-wrap font-medium">
+                    <div className="prose prose-indigo dark:prose-invert max-w-none text-slate-600 dark:text-slate-300 leading-relaxed whitespace-pre-wrap font-medium">
                         {/* Synthesis Section */}
                         {revision.synthesis && (
                             <div className="mb-10">
-                                <h3 className="text-lg font-black text-indigo-900 mb-4 flex items-center gap-2">
+                                <h3 className="text-lg font-black text-indigo-900 dark:text-indigo-300 mb-4 flex items-center gap-2">
                                     <span className="text-2xl">✨</span> Résumé Magique
                                 </h3>
-                                <div className="p-6 bg-indigo-50/50 border border-indigo-100 rounded-2xl italic text-slate-700">
+                                <div className="p-6 bg-indigo-50/50 dark:bg-indigo-900/20 border border-indigo-100 dark:border-indigo-900/30 rounded-2xl italic text-slate-700 dark:text-slate-300">
                                     {revision.synthesis}
                                 </div>
                             </div>
@@ -112,7 +112,7 @@ export function RevisionViewPage() {
                         {/* Tips Section */}
                         {revision.study_tips && (
                             <div className="mb-10">
-                                <h3 className="text-lg font-black text-emerald-900 mb-4 flex items-center gap-2">
+                                <h3 className="text-lg font-black text-emerald-900 dark:text-emerald-400 mb-4 flex items-center gap-2">
                                     <span className="text-2xl">💡</span> Conseils Métho
                                 </h3>
                                 <div className="grid gap-4 md:grid-cols-2">
@@ -120,8 +120,8 @@ export function RevisionViewPage() {
                                         try {
                                             const tips = JSON.parse(revision.study_tips);
                                             return Array.isArray(tips) ? tips.map((tip: string, idx: number) => (
-                                                <div key={idx} className="p-4 bg-emerald-50 border border-emerald-100 rounded-xl text-emerald-800 text-sm font-bold flex gap-3">
-                                                    <span className="w-6 h-6 bg-white rounded-full flex items-center justify-center text-xs shadow-sm shrink-0">{idx + 1}</span>
+                                                <div key={idx} className="p-4 bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-100 dark:border-emerald-900/30 rounded-xl text-emerald-800 dark:text-emerald-200 text-sm font-bold flex gap-3">
+                                                    <span className="w-6 h-6 bg-white dark:bg-emerald-800 rounded-full flex items-center justify-center text-xs shadow-sm shrink-0">{idx + 1}</span>
                                                     {tip}
                                                 </div>
                                             )) : null;
@@ -131,7 +131,7 @@ export function RevisionViewPage() {
                             </div>
                         )}
 
-                        <h3 className="text-lg font-black text-slate-900 mb-4 uppercase tracking-widest text-sm">Contenu du Cours</h3>
+                        <h3 className="text-lg font-black text-slate-900 dark:text-white mb-4 uppercase tracking-widest text-sm">Contenu du Cours</h3>
                         {revision.text_content}
                     </div>
                 </div>