From 3abd16fd3251f5031f6d5b7840d7d90f3da39877 Mon Sep 17 00:00:00 2001
From: Lateefat Abdullahi <abdullahilateefat03@gmail.com>
Date: Tue, 30 Jun 2026 00:33:28 +0100
Subject: [PATCH 1/2] feat(profile): add dark mode support to profile page

---
 src/app/globals.css                           |  5 ++
 .../profile/components/AchievementsPanel.tsx  | 12 +--
 .../profile/components/CertificatesPanel.tsx  |  2 +-
 .../components/CustomerSupportPanel.tsx       | 48 +++++-----
 src/app/profile/components/ProfileHeader.tsx  |  6 +-
 .../profile/components/ProfileInfoPanel.tsx   | 26 +++---
 .../components/ProfilePanelSkeleton.tsx       | 10 +--
 src/app/profile/components/ProfileTabs.tsx    |  6 +-
 src/app/profile/components/SettingsPanel.tsx  | 49 ++++++----
 src/app/profile/page.tsx                      |  2 +-
 src/components/profile/PreferencesSection.tsx | 89 ++++++++++---------
 src/components/profile/ProfileEditForm.tsx    | 10 +--
 tailwind.config.js                            |  1 +
 13 files changed, 150 insertions(+), 116 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index ffe3d807..8b13cf38 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -39,6 +39,11 @@ html.a11y-high-contrast body {
   }
 }
 
+html.dark {
+  --background: #111827;
+  --foreground: #f9fafb;
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
diff --git a/src/app/profile/components/AchievementsPanel.tsx b/src/app/profile/components/AchievementsPanel.tsx
index 842b71eb..6b3637c7 100644
--- a/src/app/profile/components/AchievementsPanel.tsx
+++ b/src/app/profile/components/AchievementsPanel.tsx
@@ -10,13 +10,13 @@ interface AchievementCardProps {
 
 const AchievementCard = memo(function AchievementCard({ achievement }: AchievementCardProps) {
   return (
-    <article className="rounded-lg border border-gray-200 p-4 text-center">
+    <article className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-750 p-4 text-center transition-colors duration-200">
       <div className="mb-2 text-4xl" aria-hidden="true">
         {achievement.icon}
       </div>
-      <h3 className="font-semibold text-gray-900">{achievement.title}</h3>
-      <p className="text-sm text-gray-500">{achievement.description}</p>
-      <p className="mt-1 text-xs text-gray-400">{achievement.earnedAt}</p>
+      <h3 className="font-semibold text-gray-900 dark:text-gray-100">{achievement.title}</h3>
+      <p className="text-sm text-gray-500 dark:text-gray-400">{achievement.description}</p>
+      <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">{achievement.earnedAt}</p>
     </article>
   );
 });
@@ -27,9 +27,9 @@ function AchievementsPanel() {
       id="achievements-panel"
       role="tabpanel"
       aria-labelledby="achievements-tab"
-      className="rounded-lg bg-white p-6 shadow"
+      className="rounded-lg bg-white dark:bg-gray-800 p-6 shadow transition-colors duration-200"
     >
-      <h2 className="mb-6 text-xl font-semibold text-gray-900">Achievements</h2>
+      <h2 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">Achievements</h2>
 
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
         {achievements.map((achievement) => (
diff --git a/src/app/profile/components/CertificatesPanel.tsx b/src/app/profile/components/CertificatesPanel.tsx
index bd744238..68385a7e 100644
--- a/src/app/profile/components/CertificatesPanel.tsx
+++ b/src/app/profile/components/CertificatesPanel.tsx
@@ -50,7 +50,7 @@ function CertificatesPanel() {
       id="certificates-panel"
       role="tabpanel"
       aria-labelledby="certificates-tab"
-      className="rounded-lg bg-white p-6 shadow dark:bg-gray-900"
+      className="rounded-lg bg-white dark:bg-gray-800 p-6 shadow transition-colors duration-200"
     >
       <div className="mb-6">
         <p className="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">
diff --git a/src/app/profile/components/CustomerSupportPanel.tsx b/src/app/profile/components/CustomerSupportPanel.tsx
index 39505250..d8ec1a8c 100644
--- a/src/app/profile/components/CustomerSupportPanel.tsx
+++ b/src/app/profile/components/CustomerSupportPanel.tsx
@@ -20,7 +20,7 @@ function FaqItem({ id, question, answer }: FaqItemProps) {
   const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
 
   return (
-    <div className="border border-gray-200 rounded-lg overflow-hidden">
+    <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
       <h3>
         <button
           type="button"
@@ -28,13 +28,13 @@ function FaqItem({ id, question, answer }: FaqItemProps) {
           aria-expanded={isOpen}
           aria-controls={panelId}
           onClick={toggle}
-          className="flex w-full items-center justify-between px-4 py-4 text-left font-medium text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 transition-colors"
+          className="flex w-full items-center justify-between px-4 py-4 text-left font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 transition-colors"
         >
           <span>{question}</span>
           {isOpen ? (
-            <ChevronUp size={18} className="shrink-0 text-gray-500" aria-hidden="true" />
+            <ChevronUp size={18} className="shrink-0 text-gray-500 dark:text-gray-400" aria-hidden="true" />
           ) : (
-            <ChevronDown size={18} className="shrink-0 text-gray-500" aria-hidden="true" />
+            <ChevronDown size={18} className="shrink-0 text-gray-500 dark:text-gray-400" aria-hidden="true" />
           )}
         </button>
       </h3>
@@ -44,7 +44,7 @@ function FaqItem({ id, question, answer }: FaqItemProps) {
         role="region"
         aria-labelledby={headingId}
         hidden={!isOpen}
-        className="px-4 pb-4 text-sm text-gray-600 leading-relaxed"
+        className="px-4 pb-4 text-sm text-gray-600 dark:text-gray-300 leading-relaxed"
       >
         {answer}
       </div>
@@ -78,15 +78,15 @@ function ContactForm() {
       <div
         role="status"
         aria-live="polite"
-        className="rounded-lg bg-green-50 border border-green-200 p-6 text-center"
+        className="rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 p-6 text-center"
       >
-        <p className="text-green-800 font-medium">
+        <p className="text-green-800 dark:text-green-300 font-medium">
           ✅ Your message has been sent. We&apos;ll get back to you within 24 hours.
         </p>
         <button
           type="button"
           onClick={() => setSubmitState('idle')}
-          className="mt-4 text-sm text-green-700 underline hover:text-green-900 focus:outline-none focus:ring-2 focus:ring-green-500 rounded"
+          className="mt-4 text-sm text-green-700 dark:text-green-400 underline hover:text-green-900 dark:hover:text-green-200 focus:outline-none focus:ring-2 focus:ring-green-500 rounded"
         >
           Send another message
         </button>
@@ -97,7 +97,7 @@ function ContactForm() {
   return (
     <form onSubmit={handleSubmit} noValidate className="space-y-4">
       <div>
-        <label htmlFor="support-subject" className="mb-1 block text-sm font-medium text-gray-700">
+        <label htmlFor="support-subject" className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
           Subject
         </label>
         <input
@@ -107,12 +107,12 @@ function ContactForm() {
           value={subject}
           onChange={(e) => setSubject(e.target.value)}
           placeholder="Briefly describe your issue"
-          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500"
+          className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500 dark:placeholder-gray-400"
         />
       </div>
 
       <div>
-        <label htmlFor="support-message" className="mb-1 block text-sm font-medium text-gray-700">
+        <label htmlFor="support-message" className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
           Message
         </label>
         <textarea
@@ -122,12 +122,12 @@ function ContactForm() {
           value={message}
           onChange={(e) => setMessage(e.target.value)}
           placeholder="Describe your issue in detail…"
-          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500 resize-none"
+          className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500 resize-none dark:placeholder-gray-400"
         />
       </div>
 
       {submitState === 'error' && (
-        <p role="alert" className="text-sm text-red-600">
+        <p role="alert" className="text-sm text-red-600 dark:text-red-400">
           Something went wrong. Please try again.
         </p>
       )}
@@ -135,7 +135,7 @@ function ContactForm() {
       <button
         type="submit"
         disabled={submitState === 'submitting' || !subject.trim() || !message.trim()}
-        className="rounded-lg bg-blue-500 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        className="rounded-lg bg-blue-500 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:cursor-not-allowed disabled:opacity-50"
       >
         {submitState === 'submitting' ? 'Sending…' : 'Send Message'}
       </button>
@@ -157,8 +157,8 @@ function CustomerSupportPanel() {
   return (
     <section id="support-panel" role="tabpanel" aria-labelledby="support-tab" className="space-y-8">
       {/* Contact Options */}
-      <div className="rounded-lg bg-white p-6 shadow">
-        <h2 className="mb-6 text-xl font-semibold text-gray-900">Contact Us</h2>
+      <div className="rounded-lg bg-white dark:bg-gray-800 p-6 shadow transition-colors duration-200">
+        <h2 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">Contact Us</h2>
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
           {supportContactOptions.map((option) => {
             const Icon = contactIcons[option.icon as keyof typeof contactIcons] ?? Mail;
@@ -168,12 +168,12 @@ function CustomerSupportPanel() {
                 href={option.href}
                 target={option.href.startsWith('http') ? '_blank' : undefined}
                 rel={option.href.startsWith('http') ? 'noopener noreferrer' : undefined}
-                className="flex flex-col items-center gap-2 rounded-lg border border-gray-200 p-4 text-center transition-colors hover:border-blue-300 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="flex flex-col items-center gap-2 rounded-lg border border-gray-200 dark:border-gray-700 p-4 text-center transition-colors hover:border-blue-300 hover:bg-blue-50 dark:hover:border-blue-600 dark:hover:bg-blue-900/20 focus:outline-none focus:ring-2 focus:ring-blue-500"
                 aria-label={option.ariaLabel}
               >
                 <Icon size={24} className="text-blue-500" aria-hidden="true" />
-                <span className="font-medium text-gray-900">{option.label}</span>
-                <span className="text-xs text-gray-500">{option.description}</span>
+                <span className="font-medium text-gray-900 dark:text-gray-100">{option.label}</span>
+                <span className="text-xs text-gray-500 dark:text-gray-400">{option.description}</span>
               </a>
             );
           })}
@@ -181,8 +181,8 @@ function CustomerSupportPanel() {
       </div>
 
       {/* FAQ */}
-      <div className="rounded-lg bg-white p-6 shadow">
-        <h2 className="mb-6 text-xl font-semibold text-gray-900">Frequently Asked Questions</h2>
+      <div className="rounded-lg bg-white dark:bg-gray-800 p-6 shadow transition-colors duration-200">
+        <h2 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">Frequently Asked Questions</h2>
         <div className="space-y-3">
           {supportFaqs.map((faq) => (
             <FaqItem key={faq.id} id={faq.id} question={faq.question} answer={faq.answer} />
@@ -191,9 +191,9 @@ function CustomerSupportPanel() {
       </div>
 
       {/* Contact Form */}
-      <div className="rounded-lg bg-white p-6 shadow">
-        <h2 className="mb-2 text-xl font-semibold text-gray-900">Send Us a Message</h2>
-        <p className="mb-6 text-sm text-gray-500">
+      <div className="rounded-lg bg-white dark:bg-gray-800 p-6 shadow transition-colors duration-200">
+        <h2 className="mb-2 text-xl font-semibold text-gray-900 dark:text-gray-100">Send Us a Message</h2>
+        <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
           Can&apos;t find what you&apos;re looking for? Fill out the form below and our support team
           will respond within 24 hours.
         </p>
diff --git a/src/app/profile/components/ProfileHeader.tsx b/src/app/profile/components/ProfileHeader.tsx
index fa4c5ef1..bfe559a7 100644
--- a/src/app/profile/components/ProfileHeader.tsx
+++ b/src/app/profile/components/ProfileHeader.tsx
@@ -6,10 +6,10 @@ interface ProfileHeaderProps {
 
 export default function ProfileHeader({ user }: ProfileHeaderProps) {
   return (
-    <header className="border-b bg-white shadow-sm">
+    <header className="border-b bg-white dark:bg-gray-800 dark:border-gray-700 shadow-sm">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="flex h-16 items-center justify-between">
-          <h1 className="text-2xl font-bold text-gray-900">Profile</h1>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Profile</h1>
           <div className="flex items-center space-x-2" aria-label={`Signed in as ${user.name}`}>
             <div
               className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 font-semibold text-white"
@@ -17,7 +17,7 @@ export default function ProfileHeader({ user }: ProfileHeaderProps) {
             >
               {user.initials}
             </div>
-            <span className="text-gray-700">{user.name}</span>
+            <span className="text-gray-700 dark:text-gray-300">{user.name}</span>
           </div>
         </div>
       </div>
diff --git a/src/app/profile/components/ProfileInfoPanel.tsx b/src/app/profile/components/ProfileInfoPanel.tsx
index 72b48f3f..b06d8433 100644
--- a/src/app/profile/components/ProfileInfoPanel.tsx
+++ b/src/app/profile/components/ProfileInfoPanel.tsx
@@ -9,15 +9,15 @@ function ProfileInfoPanel() {
       id="profile-panel"
       role="tabpanel"
       aria-labelledby="profile-tab"
-      className="rounded-lg bg-white p-6 shadow"
+      className="rounded-lg bg-white dark:bg-gray-800 p-6 shadow transition-colors duration-200"
     >
-      <h2 className="mb-6 text-xl font-semibold text-gray-900">Personal Information</h2>
+      <h2 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">Personal Information</h2>
 
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
         <div>
           <label
             htmlFor="profile-full-name"
-            className="mb-2 block text-sm font-medium text-gray-700"
+            className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
           >
             Full Name
           </label>
@@ -26,12 +26,12 @@ function ProfileInfoPanel() {
             type="text"
             defaultValue={profileUser.name}
             autoComplete="name"
-            className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500"
+            className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 dark:placeholder-gray-400"
           />
         </div>
 
         <div>
-          <label htmlFor="profile-email" className="mb-2 block text-sm font-medium text-gray-700">
+          <label htmlFor="profile-email" className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
             Email
           </label>
           <input
@@ -39,21 +39,21 @@ function ProfileInfoPanel() {
             type="email"
             defaultValue={profileUser.email}
             autoComplete="email"
-            className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500"
+            className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 dark:placeholder-gray-400"
           />
         </div>
 
         <div>
           <label
             htmlFor="profile-learning-goal"
-            className="mb-2 block text-sm font-medium text-gray-700"
+            className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
           >
             Learning Goal
           </label>
           <select
             id="profile-learning-goal"
             defaultValue="monthly-course"
-            className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500"
+            className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500"
           >
             {learningGoalOptions.map((option) => (
               <option key={option.value} value={option.value}>
@@ -66,14 +66,14 @@ function ProfileInfoPanel() {
         <div>
           <label
             htmlFor="profile-daily-time"
-            className="mb-2 block text-sm font-medium text-gray-700"
+            className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
           >
             Daily Learning Time
           </label>
           <select
             id="profile-daily-time"
             defaultValue="30-minutes"
-            className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500"
+            className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500"
           >
             {dailyLearningTimeOptions.map((option) => (
               <option key={option.value} value={option.value}>
@@ -85,21 +85,21 @@ function ProfileInfoPanel() {
       </div>
 
       <div className="mt-6">
-        <label htmlFor="profile-bio" className="mb-2 block text-sm font-medium text-gray-700">
+        <label htmlFor="profile-bio" className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
           Bio
         </label>
         <textarea
           id="profile-bio"
           rows={4}
           defaultValue={profileUser.bio}
-          className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500"
+          className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 dark:placeholder-gray-400"
         />
       </div>
 
       <div className="mt-6">
         <button
           type="button"
-          className="rounded-lg bg-blue-500 px-6 py-2 text-white transition-colors hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          className="rounded-lg bg-blue-500 px-6 py-2 text-white transition-colors hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
         >
           Save Changes
         </button>
diff --git a/src/app/profile/components/ProfilePanelSkeleton.tsx b/src/app/profile/components/ProfilePanelSkeleton.tsx
index cdfb50a9..d68cf16e 100644
--- a/src/app/profile/components/ProfilePanelSkeleton.tsx
+++ b/src/app/profile/components/ProfilePanelSkeleton.tsx
@@ -5,16 +5,16 @@ interface ProfilePanelSkeletonProps {
 export default function ProfilePanelSkeleton({ label }: ProfilePanelSkeletonProps) {
   return (
     <div
-      className="rounded-lg bg-white p-6 shadow"
+      className="rounded-lg bg-white dark:bg-gray-800 p-6 shadow transition-colors duration-200"
       role="status"
       aria-label={`Loading ${label}`}
       aria-live="polite"
     >
-      <div className="mb-6 h-6 w-40 rounded bg-gray-200" />
+      <div className="mb-6 h-6 w-40 rounded bg-gray-200 dark:bg-gray-700" />
       <div className="space-y-4">
-        <div className="h-12 rounded bg-gray-100" />
-        <div className="h-12 rounded bg-gray-100" />
-        <div className="h-12 rounded bg-gray-100" />
+        <div className="h-12 rounded bg-gray-100 dark:bg-gray-700" />
+        <div className="h-12 rounded bg-gray-100 dark:bg-gray-700" />
+        <div className="h-12 rounded bg-gray-100 dark:bg-gray-700" />
       </div>
     </div>
   );
diff --git a/src/app/profile/components/ProfileTabs.tsx b/src/app/profile/components/ProfileTabs.tsx
index 63d5bf65..29970d06 100644
--- a/src/app/profile/components/ProfileTabs.tsx
+++ b/src/app/profile/components/ProfileTabs.tsx
@@ -47,8 +47,10 @@ const ProfileTabButton = memo(function ProfileTabButton({
       aria-controls={`${tab.id}-panel`}
       tabIndex={isActive ? 0 : -1}
       onClick={handleClick}
-      className={`rounded-lg px-4 py-2 font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
-        isActive ? 'bg-blue-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'
+      className={`rounded-lg px-4 py-2 font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 ${
+        isActive
+          ? 'bg-blue-500 text-white'
+          : 'bg-white text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
       }`}
     >
       {tab.label}
diff --git a/src/app/profile/components/SettingsPanel.tsx b/src/app/profile/components/SettingsPanel.tsx
index 9382d2fc..49e4291b 100644
--- a/src/app/profile/components/SettingsPanel.tsx
+++ b/src/app/profile/components/SettingsPanel.tsx
@@ -1,11 +1,14 @@
 'use client';
 
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { useTheme } from '@/lib/theme-provider';
 import type { PreferenceOption } from '../profile-data';
 import { settingsPreferences } from '../profile-data';
 
-const defaultSettings = Object.fromEntries(
-  settingsPreferences.map((preference) => [preference.id, preference.enabled]),
+const NON_THEME_DEFAULTS = Object.fromEntries(
+  settingsPreferences
+    .filter((p) => p.id !== 'dark-mode')
+    .map((p) => [p.id, p.enabled]),
 ) as Record<string, boolean>;
 
 interface PreferenceSwitchProps {
@@ -26,8 +29,8 @@ const PreferenceSwitch = memo(function PreferenceSwitch({
   return (
     <div className="flex items-center justify-between gap-6">
       <div>
-        <h3 className="font-medium text-gray-900">{preference.label}</h3>
-        <p id={`${preference.id}-description`} className="text-sm text-gray-500">
+        <h3 className="font-medium text-gray-900 dark:text-gray-100">{preference.label}</h3>
+        <p id={`${preference.id}-description`} className="text-sm text-gray-500 dark:text-gray-400">
           {preference.description}
         </p>
       </div>
@@ -41,37 +44,51 @@ const PreferenceSwitch = memo(function PreferenceSwitch({
           aria-describedby={`${preference.id}-description`}
           className="peer sr-only"
         />
-        <span className="h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300" />
+        <span className="h-6 w-11 rounded-full bg-gray-200 dark:bg-gray-600 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800" />
       </label>
     </div>
   );
 });
 
 function SettingsPanel() {
-  const [settings, setSettings] = useState<Record<string, boolean>>(defaultSettings);
+  const { resolvedTheme, setTheme } = useTheme();
+  const [settings, setSettings] = useState<Record<string, boolean>>({
+    ...NON_THEME_DEFAULTS,
+    'dark-mode': resolvedTheme === 'dark',
+  });
 
-  const handleToggle = useCallback((id: string) => {
-    setSettings((currentSettings) => ({
-      ...currentSettings,
-      [id]: !currentSettings[id],
-    }));
-  }, []);
+  // Keep the dark-mode toggle in sync if theme changes externally
+  useEffect(() => {
+    setSettings((prev) => ({ ...prev, 'dark-mode': resolvedTheme === 'dark' }));
+  }, [resolvedTheme]);
+
+  const handleToggle = useCallback(
+    (id: string) => {
+      if (id === 'dark-mode') {
+        const next = resolvedTheme === 'dark' ? 'light' : 'dark';
+        setTheme(next);
+        return;
+      }
+      setSettings((current) => ({ ...current, [id]: !current[id] }));
+    },
+    [resolvedTheme, setTheme],
+  );
 
   return (
     <section
       id="settings-panel"
       role="tabpanel"
       aria-labelledby="settings-tab"
-      className="rounded-lg bg-white p-6 shadow"
+      className="rounded-lg bg-white dark:bg-gray-800 p-6 shadow transition-colors duration-200"
     >
-      <h2 className="mb-6 text-xl font-semibold text-gray-900">Settings</h2>
+      <h2 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">Settings</h2>
 
       <div className="space-y-6">
         {settingsPreferences.map((preference) => (
           <PreferenceSwitch
             key={preference.id}
             preference={preference}
-            checked={settings[preference.id]}
+            checked={settings[preference.id] ?? false}
             onToggle={handleToggle}
           />
         ))}
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 14b1aa7b..cdf57b39 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -4,7 +4,7 @@ import { profileUser } from './profile-data';
 
 export default function Profile() {
   return (
-    <main className="min-h-screen bg-gray-50">
+    <main className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
       <ProfileHeader user={profileUser} />
 
       <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
diff --git a/src/components/profile/PreferencesSection.tsx b/src/components/profile/PreferencesSection.tsx
index bd9ab63d..698050a4 100644
--- a/src/components/profile/PreferencesSection.tsx
+++ b/src/components/profile/PreferencesSection.tsx
@@ -1,82 +1,91 @@
 'use client';
 
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
+import { useTheme } from '@/lib/theme-provider';
+import type { Theme } from '@/lib/theme-provider';
 
 function PreferencesSection() {
-  const { register } = useFormContext();
+  const { register, watch, setValue } = useFormContext();
+  const { theme, setTheme } = useTheme();
+
+  // Sync the form field with the live theme context on mount
+  useEffect(() => {
+    setValue('theme', theme);
+  }, [theme, setValue]);
+
+  // When the form radio changes, propagate to ThemeContext
+  const watchedTheme = watch('theme') as Theme;
+  useEffect(() => {
+    if (watchedTheme && watchedTheme !== theme) {
+      setTheme(watchedTheme);
+    }
+  }, [watchedTheme, theme, setTheme]);
 
   return (
     <div className="space-y-6">
       <div>
-        <h3 className="text-lg font-medium text-gray-900 border-b pb-2 mb-4">Notifications</h3>
+        <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 border-b border-gray-200 dark:border-gray-700 pb-2 mb-4">
+          Notifications
+        </h3>
         <div className="space-y-4">
           <label className="flex items-center space-x-3 cursor-pointer">
             <input
               type="checkbox"
               {...register('notifications.email')}
-              className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+              className="w-4 h-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500"
             />
-            <span className="text-gray-700">Email Notifications</span>
+            <span className="text-gray-700 dark:text-gray-300">Email Notifications</span>
           </label>
 
           <label className="flex items-center space-x-3 cursor-pointer">
             <input
               type="checkbox"
               {...register('notifications.push')}
-              className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+              className="w-4 h-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500"
             />
-            <span className="text-gray-700">Push Notifications</span>
+            <span className="text-gray-700 dark:text-gray-300">Push Notifications</span>
           </label>
         </div>
       </div>
 
       <div>
-        <h3 className="text-lg font-medium text-gray-900 border-b pb-2 mb-4">Display Settings</h3>
+        <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 border-b border-gray-200 dark:border-gray-700 pb-2 mb-4">
+          Display Settings
+        </h3>
         <div className="space-y-4">
           <div>
-            <span className="block text-sm font-medium text-gray-700 mb-2">Theme Preference</span>
+            <span className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              Theme Preference
+            </span>
             <div className="flex items-center space-x-6">
-              <label className="flex items-center space-x-2 cursor-pointer">
-                <input
-                  type="radio"
-                  value="light"
-                  {...register('theme')}
-                  className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
-                />
-                <span className="text-gray-700">Light</span>
-              </label>
-              <label className="flex items-center space-x-2 cursor-pointer">
-                <input
-                  type="radio"
-                  value="dark"
-                  {...register('theme')}
-                  className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
-                />
-                <span className="text-gray-700">Dark</span>
-              </label>
-              <label className="flex items-center space-x-2 cursor-pointer">
-                <input
-                  type="radio"
-                  value="system"
-                  {...register('theme')}
-                  className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
-                />
-                <span className="text-gray-700">System</span>
-              </label>
+              {(['light', 'dark', 'system'] as const).map((option) => (
+                <label key={option} className="flex items-center space-x-2 cursor-pointer">
+                  <input
+                    type="radio"
+                    value={option}
+                    {...register('theme')}
+                    className="w-4 h-4 text-blue-600 border-gray-300 dark:border-gray-600 focus:ring-blue-500"
+                  />
+                  <span className="text-gray-700 dark:text-gray-300 capitalize">{option}</span>
+                </label>
+              ))}
             </div>
           </div>
+
           <div>
-            <span className="block text-sm font-medium text-gray-700 mb-2">Performance</span>
+            <span className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              Performance
+            </span>
             <label className="flex items-center space-x-3 cursor-pointer">
               <input
                 type="checkbox"
                 {...register('prefetching')}
-                className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                className="w-4 h-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500"
               />
               <div className="flex flex-col">
-                <span className="text-gray-700">Enable Smart Prefetching</span>
-                <span className="text-xs text-gray-500">
+                <span className="text-gray-700 dark:text-gray-300">Enable Smart Prefetching</span>
+                <span className="text-xs text-gray-500 dark:text-gray-400">
                   Automatically load pages before you click. Disabled on slow connections.
                 </span>
               </div>
diff --git a/src/components/profile/ProfileEditForm.tsx b/src/components/profile/ProfileEditForm.tsx
index 152893a7..3a43ada3 100644
--- a/src/components/profile/ProfileEditForm.tsx
+++ b/src/components/profile/ProfileEditForm.tsx
@@ -87,8 +87,8 @@ export default function ProfileEditForm() {
   );
 
   return (
-    <div className="max-w-2xl mx-auto bg-white p-6 sm:p-8 rounded-xl shadow-sm border border-gray-100">
-      <h2 className="text-2xl font-bold text-gray-900 mb-6">Edit Profile</h2>
+    <div className="max-w-2xl mx-auto bg-white dark:bg-gray-800 p-6 sm:p-8 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 transition-colors duration-200">
+      <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">Edit Profile</h2>
 
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
@@ -126,15 +126,15 @@ export default function ProfileEditForm() {
             </div>
           </div>
 
-          <hr className="border-gray-200" />
+          <hr className="border-gray-200 dark:border-gray-700" />
 
           {/* Section 2: Preferences */}
           <PreferencesSection />
 
-          <div className="flex justify-end pt-4 border-t border-gray-100">
+          <div className="flex justify-end pt-4 border-t border-gray-100 dark:border-gray-700">
             <button
               type="button"
-              className="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 font-medium mr-4 hover:bg-gray-50 transition-colors"
+              className="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 font-medium mr-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
               disabled={isLoading}
             >
               Cancel
diff --git a/tailwind.config.js b/tailwind.config.js
index 657e38cb..bba0a5d1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: [
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/components/**/*.{js,ts,jsx,tsx,mdx}',

From ae58dc76fb89107c7d17e2d08f5338f7403e108e Mon Sep 17 00:00:00 2001
From: Lateefat Abdullahi <abdullahilateefat03@gmail.com>
Date: Tue, 30 Jun 2026 00:51:22 +0100
Subject: [PATCH 2/2] fix(profile): fix prettier formatting and wrap test with
 ThemeProvider

---
 .../profile/__tests__/ProfileTabs.test.tsx    | 13 ++++---
 .../components/CustomerSupportPanel.tsx       | 34 +++++++++++++++----
 .../profile/components/ProfileInfoPanel.tsx   | 14 ++++++--
 src/app/profile/components/SettingsPanel.tsx  |  4 +--
 4 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/src/app/profile/__tests__/ProfileTabs.test.tsx b/src/app/profile/__tests__/ProfileTabs.test.tsx
index b66b78aa..19170266 100644
--- a/src/app/profile/__tests__/ProfileTabs.test.tsx
+++ b/src/app/profile/__tests__/ProfileTabs.test.tsx
@@ -1,11 +1,16 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it } from 'vitest';
+import { ThemeProvider } from '@/lib/theme-provider';
 import ProfileTabs from '../components/ProfileTabs';
 
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider defaultTheme="light">{ui}</ThemeProvider>);
+}
+
 describe('ProfileTabs', () => {
   it('renders the profile panel first to keep initial work minimal', () => {
-    render(<ProfileTabs />);
+    renderWithTheme(<ProfileTabs />);
 
     expect(screen.getByRole('tab', { name: 'Profile' })).toHaveAttribute('aria-selected', 'true');
     expect(screen.getByRole('tabpanel', { name: 'Profile' })).toBeInTheDocument();
@@ -17,7 +22,7 @@ describe('ProfileTabs', () => {
   it('loads settings only when the settings tab is selected', async () => {
     const user = userEvent.setup();
 
-    render(<ProfileTabs />);
+    renderWithTheme(<ProfileTabs />);
     await user.click(screen.getByRole('tab', { name: 'Settings' }));
 
     await waitFor(() =>
@@ -33,7 +38,7 @@ describe('ProfileTabs', () => {
   it('loads achievements only when the achievements tab is selected', async () => {
     const user = userEvent.setup();
 
-    render(<ProfileTabs />);
+    renderWithTheme(<ProfileTabs />);
     await user.click(screen.getByRole('tab', { name: 'Achievements' }));
 
     await waitFor(() =>
@@ -50,7 +55,7 @@ describe('ProfileTabs', () => {
   it('loads certificates only when the certificates tab is selected', async () => {
     const user = userEvent.setup();
 
-    render(<ProfileTabs />);
+    renderWithTheme(<ProfileTabs />);
     await user.click(screen.getByRole('tab', { name: 'Certification Program' }));
 
     await waitFor(() =>
diff --git a/src/app/profile/components/CustomerSupportPanel.tsx b/src/app/profile/components/CustomerSupportPanel.tsx
index d8ec1a8c..15df44fb 100644
--- a/src/app/profile/components/CustomerSupportPanel.tsx
+++ b/src/app/profile/components/CustomerSupportPanel.tsx
@@ -32,9 +32,17 @@ function FaqItem({ id, question, answer }: FaqItemProps) {
         >
           <span>{question}</span>
           {isOpen ? (
-            <ChevronUp size={18} className="shrink-0 text-gray-500 dark:text-gray-400" aria-hidden="true" />
+            <ChevronUp
+              size={18}
+              className="shrink-0 text-gray-500 dark:text-gray-400"
+              aria-hidden="true"
+            />
           ) : (
-            <ChevronDown size={18} className="shrink-0 text-gray-500 dark:text-gray-400" aria-hidden="true" />
+            <ChevronDown
+              size={18}
+              className="shrink-0 text-gray-500 dark:text-gray-400"
+              aria-hidden="true"
+            />
           )}
         </button>
       </h3>
@@ -97,7 +105,10 @@ function ContactForm() {
   return (
     <form onSubmit={handleSubmit} noValidate className="space-y-4">
       <div>
-        <label htmlFor="support-subject" className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+        <label
+          htmlFor="support-subject"
+          className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
+        >
           Subject
         </label>
         <input
@@ -112,7 +123,10 @@ function ContactForm() {
       </div>
 
       <div>
-        <label htmlFor="support-message" className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+        <label
+          htmlFor="support-message"
+          className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
+        >
           Message
         </label>
         <textarea
@@ -173,7 +187,9 @@ function CustomerSupportPanel() {
               >
                 <Icon size={24} className="text-blue-500" aria-hidden="true" />
                 <span className="font-medium text-gray-900 dark:text-gray-100">{option.label}</span>
-                <span className="text-xs text-gray-500 dark:text-gray-400">{option.description}</span>
+                <span className="text-xs text-gray-500 dark:text-gray-400">
+                  {option.description}
+                </span>
               </a>
             );
           })}
@@ -182,7 +198,9 @@ function CustomerSupportPanel() {
 
       {/* FAQ */}
       <div className="rounded-lg bg-white dark:bg-gray-800 p-6 shadow transition-colors duration-200">
-        <h2 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">Frequently Asked Questions</h2>
+        <h2 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">
+          Frequently Asked Questions
+        </h2>
         <div className="space-y-3">
           {supportFaqs.map((faq) => (
             <FaqItem key={faq.id} id={faq.id} question={faq.question} answer={faq.answer} />
@@ -192,7 +210,9 @@ function CustomerSupportPanel() {
 
       {/* Contact Form */}
       <div className="rounded-lg bg-white dark:bg-gray-800 p-6 shadow transition-colors duration-200">
-        <h2 className="mb-2 text-xl font-semibold text-gray-900 dark:text-gray-100">Send Us a Message</h2>
+        <h2 className="mb-2 text-xl font-semibold text-gray-900 dark:text-gray-100">
+          Send Us a Message
+        </h2>
         <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
           Can&apos;t find what you&apos;re looking for? Fill out the form below and our support team
           will respond within 24 hours.
diff --git a/src/app/profile/components/ProfileInfoPanel.tsx b/src/app/profile/components/ProfileInfoPanel.tsx
index b06d8433..d023782c 100644
--- a/src/app/profile/components/ProfileInfoPanel.tsx
+++ b/src/app/profile/components/ProfileInfoPanel.tsx
@@ -11,7 +11,9 @@ function ProfileInfoPanel() {
       aria-labelledby="profile-tab"
       className="rounded-lg bg-white dark:bg-gray-800 p-6 shadow transition-colors duration-200"
     >
-      <h2 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">Personal Information</h2>
+      <h2 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-100">
+        Personal Information
+      </h2>
 
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
         <div>
@@ -31,7 +33,10 @@ function ProfileInfoPanel() {
         </div>
 
         <div>
-          <label htmlFor="profile-email" className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+          <label
+            htmlFor="profile-email"
+            className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
+          >
             Email
           </label>
           <input
@@ -85,7 +90,10 @@ function ProfileInfoPanel() {
       </div>
 
       <div className="mt-6">
-        <label htmlFor="profile-bio" className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+        <label
+          htmlFor="profile-bio"
+          className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
+        >
           Bio
         </label>
         <textarea
diff --git a/src/app/profile/components/SettingsPanel.tsx b/src/app/profile/components/SettingsPanel.tsx
index 49e4291b..6781ee36 100644
--- a/src/app/profile/components/SettingsPanel.tsx
+++ b/src/app/profile/components/SettingsPanel.tsx
@@ -6,9 +6,7 @@ import type { PreferenceOption } from '../profile-data';
 import { settingsPreferences } from '../profile-data';
 
 const NON_THEME_DEFAULTS = Object.fromEntries(
-  settingsPreferences
-    .filter((p) => p.id !== 'dark-mode')
-    .map((p) => [p.id, p.enabled]),
+  settingsPreferences.filter((p) => p.id !== 'dark-mode').map((p) => [p.id, p.enabled]),
 ) as Record<string, boolean>;
 
 interface PreferenceSwitchProps {