edit input color in dark and lite login

src/components/layout/layout.jsx

@@ -42,7 +42,7 @@ export default function Layout() {
 
                 {/* Main Content Area */}
                 <main
-                    className={`flex-1 w-full overflow-x-hidden bg-[#FDF8F4] transition-all p-3 lg:p-6`}
+                    className={`flex-1 w-full overflow-x-hidden bg-background transition-all p-3 lg:p-6`}
                 >
                     <div className="max-w-full mx-auto">
                         <Outlet />

src/pages/Login/Login.jsx

@@ -15,6 +15,8 @@ import { setProfile } from "../../redux/slices/profileSlice";
 // Services
 import authService from "../../services/auth";
 
+import toggleTheme from "../../components/ToggleTheme";
+
 export default function Login() {
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -31,8 +33,8 @@ export default function Login() {
       setIsMobile(window.innerWidth < 768);
     };
 
-        window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener('resize', handleResize);
+    return () => window.removeEventListener("resize", handleResize);
   }, []);
 
   // Handle Login
@@ -55,7 +57,9 @@ export default function Login() {
       console.error("❌ Login error:", error);
       const errorMessage =
         error.response?.data?.message ||
-                (error.request ? "خطا در برقراری ارتباط با سرور" : "خطای نامشخص رخ داده است");
+        (error.request
+          ? "خطا در برقراری ارتباط با سرور"
+          : "خطای نامشخص رخ داده است");
       setError(errorMessage);
     } finally {
       setLoading(false);
@@ -69,7 +73,11 @@ export default function Login() {
         <div className="flex items-center justify-between px-6 md:px-8 lg:px-12 py-4">
           {/* Left Section */}
           <div className="flex items-center gap-4">
-                        <img src={LogoDM} alt="Logo" className="h-10 w-10 md:h-12 md:w-12" />
+            <img
+              src={LogoDM}
+              alt="Logo"
+              className="h-10 w-10 md:h-12 md:w-12"
+            />
             <div className="relative">
               <select className="appearance-none px-4 md:px-6 py-2 pr-4 pl-10 bg-white border-2 border-gray-300 rounded-xl text-sm focus:outline-none focus:border-button1 transition-colors cursor-pointer">
                 <option>شهر</option>
@@ -78,18 +86,53 @@ export default function Login() {
                 <option>شیراز</option>
                 <option>مشهد</option>
               </select>
-                            <svg className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 pointer-events-none"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M19 9l-7 7-7-7"
+                />
               </svg>
             </div>
           </div>
-
+          <button
+            onClick={toggleTheme}
+            className="w-12 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-header2 text-sm"
+          >
+            تغییر تم
+          </button>
           {/* Center Links (Hidden on Mobile) */}
           <nav className="hidden md:flex items-center gap-8 font-bold text-primary">
-                        <a href="#" className="hover:text-button1 transition-colors text-sm">خانه</a>
+            <a
-                        <a href="#" className="hover:text-button1 transition-colors text-sm">دسته بندی</a>
+              href="#"
-                        <a href="#" className="hover:text-button1 transition-colors text-sm">تماس با ما</a>
+              className="hover:text-button1 transition-colors text-sm"
-                        <a href="#" className="hover:text-button1 transition-colors text-sm">درباره ما</a>
+            >
+              خانه
+            </a>
+            <a
+              href="#"
+              className="hover:text-button1 transition-colors text-sm"
+            >
+              دسته بندی
+            </a>
+            <a
+              href="#"
+              className="hover:text-button1 transition-colors text-sm"
+            >
+              تماس با ما
+            </a>
+            <a
+              href="#"
+              className="hover:text-button1 transition-colors text-sm"
+            >
+              درباره ما
+            </a>
           </nav>
 
           {/* Right Section */}
@@ -104,12 +147,13 @@ export default function Login() {
         {/* Left Side - Login Form */}
         <div
           style={{
-                        backgroundImage: isMobile ? `url(${Loginpic})` : 'none',
+            backgroundImage: isMobile ? `url(${Loginpic})` : "none",
-                        backgroundSize: 'cover',
+            backgroundSize: "cover",
-                        backgroundPosition: 'center',
+            backgroundPosition: "center",
-                        backgroundAttachment: 'fixed'
+            backgroundAttachment: "fixed",
           }}
-                    className="w-full md:w-1/2 flex items-start justify-center md:justify-start md:bg-background px-4 md:px-12 lg:px-24 py-8 md:py-16 relative">
+          className="w-full md:w-1/2 flex items-start justify-center md:justify-start md:bg-background px-4 md:px-12 lg:px-24 py-8 md:py-16 relative"
+        >
           {/* Dark Overlay */}
           <div className="absolute inset-0 bg-black/10 backdrop-blur-[1px] md:bg-transparent"></div>
           <div className="w-full max-w-md relative z-10">
@@ -122,8 +166,12 @@ export default function Login() {
 
             {/* Header */}
             <div className="mb-8">
-                            <h1 className="text-2xl md:text-3xl font-bold  mb-2 text-white md:text-primary">ورود ادمین</h1>
+              <h1 className="text-2xl md:text-3xl font-bold  mb-2 text-white md:text-primary">
-                            <p className="text-sm md:text-base  md:text-gray-700 text-white/80">دسترسی ویژه برای مدیریت و گزارش‌ها</p>
+                ورود ادمین
+              </h1>
+              <p className="text-sm md:text-base  md:text-gray-700 text-white/80 dark:text-[#E6E2DE]">
+                دسترسی ویژه برای مدیریت و گزارش‌ها
+              </p>
             </div>
 
             {/* Login Form */}
@@ -137,14 +185,16 @@ export default function Login() {
 
               {/* Username Field */}
               <div className="relative">
-                                <label className="md:absolute -top-2.5 right-4 text-background md:text-primary md:bg-background z-50 px-1 text-sm">نام کاربری</label>
+                <label className="md:absolute -top-2.5 right-4 text-background md:text-primary md:bg-background z-50 px-1 text-sm">
+                  نام کاربری
+                </label>
                 <div className="relative mt-2">
                   <input
                     type="text"
                     value={userName}
                     onChange={(e) => setUserName(e.target.value)}
                     placeholder="userName"
-                                        className="w-full pl-12 pr-4 py-3 border-2 bg-background border-gray-300 rounded-xl focus:outline-none focus:border-button1 transition-colors text-sm"
+                    className="w-full pl-12 pr-4 py-3 border-2 bg-background border-gray-300 dark:text-white rounded-xl focus:outline-none focus:border-button1 transition-colors text-sm"
                     dir="ltr"
                     required
                   />
@@ -154,14 +204,16 @@ export default function Login() {
 
               {/* Password Field */}
               <div className="relative">
-                                <label className="md:absolute -top-2.5 right-4 z-50 md:bg-background md:text-primary px-1 text-sm text-background">رمز عبور</label>
+                <label className="md:absolute -top-2.5 right-4 z-50 md:bg-background md:text-primary px-1 text-sm text-background">
+                  رمز عبور
+                </label>
                 <div className="relative mt-2">
                   <input
                     type="password"
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                     placeholder="password"
-                                        className="w-full pl-12 pr-4 py-3 border-2 bg-background border-gray-300 rounded-xl focus:outline-none focus:border-button1 transition-colors text-sm"
+                    className="w-full pl-12 pr-4 py-3 border-2 bg-background border-gray-300 dark:text-white rounded-xl focus:outline-none focus:border-button1 transition-colors text-sm"
                     dir="ltr"
                     required
                   />
@@ -171,7 +223,10 @@ export default function Login() {
 
               {/* Forgot Password */}
               <div className="text-right">
-                                <a href="#" className="text-sm text-background hover:text-button1 transition-colors">
+                <a
+                  href="#"
+                  className="text-sm text-background hover:text-button1 transition-colors"
+                >
                   فراموشی رمز عبور؟
                 </a>
               </div>
@@ -190,7 +245,11 @@ export default function Login() {
 
         {/* Right Side - Image (Hidden on Mobile) */}
         <div className="hidden md:block w-1/2 h-[calc(100vh-5rem)] relative overflow-hidden">
-                    <img src={Loginpic} alt="Coffee workspace" className="w-full h-full object-cover " />
+          <img
+            src={Loginpic}
+            alt="Coffee workspace"
+            className="w-full h-full object-cover "
+          />
         </div>
       </div>
     </div>

src/styles/index.css

@@ -14,6 +14,7 @@
 
 
     --font-sans: "Vazirmatn", system-ui, sans-serif;
+    
 }
 
 .dark {
@@ -28,6 +29,35 @@
     --color-background: #272322;
 }
 
+/* Chrome / Edge / Safari autofill FIX (light + dark, no color) */
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px #fdf8f4 inset !important;
+  box-shadow: 0 0 0 1000px #fdf8f4 inset !important;
+  -webkit-text-fill-color: inherit !important;
+}
+
+.dark input:-webkit-autofill,
+.dark input:-webkit-autofill:hover,
+.dark input:-webkit-autofill:focus,
+.dark textarea:-webkit-autofill,
+.dark textarea:-webkit-autofill:focus,
+.dark select:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px #272322 inset !important;
+  box-shadow: 0 0 0 1000px #272322 inset !important;
+  -webkit-text-fill-color: inherit !important;
+}
+
+
+
+
+
+
 html {
     font-family: var(--font-sans);
 }