UI added toggle theme

src/modules/auth/components/AuthThemeToggle.jsx

@@ -0,0 +1,22 @@
+import { Sun, Moon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useTheme } from '@/contexts/ThemeContext'
+
+export function AuthThemeToggle({ className }) {
+  const { toggleTheme } = useTheme()
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label="Toggle light/dark theme"
+      className={cn(
+        'flex size-9 items-center justify-center rounded-xl border dark:border-blue-500 bg-background/80 backdrop-blur-sm transition-colors hover:bg-accent',
+        className,
+      )}
+    >
+      <Sun className="size-4 block dark:hidden" />
+      <Moon className="size-4 hidden dark:block" />
+    </button>
+  )
+}

src/modules/auth/pages/ForgotPassword.jsx

@@ -8,6 +8,7 @@
  ***********************************************************************************************************************************************************************/
 import { Link } from 'react-router-dom'
 import { ForgotPasswordForm } from '../components/ForgotPasswordForm'
+import { AuthThemeToggle } from '../components/AuthThemeToggle'
 import { MetadataProvider } from '@/contexts/MetadataContext'
 
 export default function ForgotPassword() {
@@ -21,7 +22,8 @@ export default function ForgotPassword() {
         ogDescription: 'Reset your account password.',
       }}
     >
-      <div className="grid min-h-svh lg:grid-cols-2">
+      <div className="relative grid min-h-svh lg:grid-cols-2">
+        <AuthThemeToggle className="absolute top-4 right-4 z-10" />
         <div className="flex flex-col gap-4 p-6 md:p-10">
           <div className="flex justify-center">
             <Link to="/" className="flex items-center gap-2 font-medium">

src/modules/auth/pages/Login.jsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom'
 import { LoginForm } from "../components/LoginForm";
+import { AuthThemeToggle } from "../components/AuthThemeToggle";
 import { MetadataProvider } from "@/contexts/MetadataContext";
 
 export default function Login() {
@@ -13,7 +14,8 @@ export default function Login() {
         ogDescription: "Kindly login to access our online course platform.",
       }}
     >
-      <div className="grid min-h-svh lg:grid-cols-2">
+      <div className="relative grid min-h-svh lg:grid-cols-2">
+        <AuthThemeToggle className="absolute top-4 right-4 z-10" />
         <div className="flex flex-col gap-4 p-6 md:p-10">
           <div className="flex justify-center">
             <Link to="/" className="flex items-center gap-2 font-medium">

src/modules/auth/pages/Register.jsx

@@ -14,6 +14,7 @@
  ***********************************************************************************************************************************************************************/
 import { Link } from 'react-router-dom'
 import { RegisterForm } from '../components/RegisterForm'
+import { AuthThemeToggle } from '../components/AuthThemeToggle'
 import { MetadataProvider } from '@/contexts/MetadataContext'
 
 // TODO: flip to true once the hero banner asset is ready; grid auto-centers the
@@ -31,7 +32,8 @@ export default function Register() {
         ogDescription: 'Create an account to access our online course platform.',
       }}
     >
-      <div className={`grid min-h-svh ${SHOW_BANNER ? 'lg:grid-cols-2' : ''}`}>
+      <div className={`relative grid min-h-svh ${SHOW_BANNER ? 'lg:grid-cols-2' : ''}`}>
+        <AuthThemeToggle className="absolute top-4 right-4 z-10" />
         {/* ── Left panel ── */}
         <div className="flex flex-col gap-4 p-6 md:p-10">
           <div className="flex justify-center">