feat: Added darktheme for the signup and signin page

frontend/src/pages/signin-page.tsx

@@ -10,51 +10,51 @@ import { toast } from 'react-toastify';
 import { AxiosError, isAxiosError } from 'axios';
 import axiosInstance from '@/helpers/axios-instance';
 import userState from '@/utils/user-state';
-
+import ThemeToggle from '@/components/theme-toggle-button';
 function signin() {
   const navigate = useNavigate();
   const {
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
     reset,
-    setError
+    setError,
   } = useForm<TSignInSchema>({ resolver: zodResolver(signInSchema) });
 
   const onSubmit = async (data: FieldValues) => {
     try {
-      const response = axiosInstance.post('/api/auth/email-password/signin',
-        data
-      );
+      const response = axiosInstance.post('/api/auth/email-password/signin', data);
 
       toast.promise(response, {
         pending: 'Checking credentials ...',
         success: {
           render({ data }) {
             const userId = data?.data?.data?.user?._id;
             const userRole = data?.data?.data?.user?.role;
-            userState.setUser({ _id: userId, role: userRole })
-            reset()
-            navigate('/')
-            return data?.data?.message
+            userState.setUser({ _id: userId, role: userRole });
+            reset();
+            navigate('/');
+            return data?.data?.message;
           },
         },
         error: {
           render({ data }) {
             if (data instanceof AxiosError) {
               if (data?.response?.data?.message.includes('User')) {
-                setError('userNameOrEmail',{ type: 'manual', message: data?.response?.data?.message});
+                setError('userNameOrEmail', {
+                  type: 'manual',
+                  message: data?.response?.data?.message,
+                });
               } else {
-                setError("password",{ type: 'manual', message: data?.response?.data?.message});
+                setError('password', { type: 'manual', message: data?.response?.data?.message });
               }
             }
-            return "Signin failed"
+            return 'Signin failed';
           },
         },
-      }
-      )
+      });
 
-      return (await response).data
+      return (await response).data;
     } catch (error) {
       if (isAxiosError(error)) {
         console.error(error.response?.data?.message);
@@ -65,12 +65,15 @@ function signin() {
   };
 
   return (
-    <div className="m-4 flex-grow cursor-default bg-white py-4">
-      <div className="mb-4 flex justify-center">
+    <div className="flex-grow cursor-default bg-white py-4 dark:bg-dark-card">
+      <div className="m-4 mb-4 flex justify-center">
         <div className="flex w-full items-center justify-center">
-          <h2 className="w-3/4 text-center text-lg font-bold text-black sm:text-xl">
+          <h2 className="w-3/4 pl-48 text-center text-lg font-bold text-black dark:text-dark-primary sm:text-xl">
             Sign in to WanderLust
           </h2>
+          <div className="flex items-center justify-end px-4 sm:px-20">
+            <ThemeToggle />
+          </div>
         </div>
       </div>
       <div className="m-2 mt-8 flex flex-col items-center justify-center gap-2">
@@ -80,7 +83,7 @@ function signin() {
               {...register('userNameOrEmail')}
               type="text"
               placeholder="Username or Email"
-              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
             />
             {errors.userNameOrEmail && (
               <p className="p-3 text-xs text-red-500">{`${errors.userNameOrEmail.message}`}</p>
@@ -92,7 +95,7 @@ function signin() {
               {...register('password')}
               type="password"
               placeholder="Password"
-              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
             />
             {errors.password && (
               <p className="p-3 text-xs text-red-500">{`${errors.password.message}`}</p>
@@ -102,12 +105,12 @@ function signin() {
           <button
             disabled={isSubmitting}
             type="submit"
-            className="flex w-full items-center justify-center rounded-lg bg-neutral-800 p-3 text-base font-medium text-light disabled:bg-neutral-600 sm:text-lg sm:font-semibold"
+            className="flex w-full items-center justify-center rounded-lg bg-neutral-800 p-3 text-base font-medium text-light disabled:bg-neutral-600  dark:bg-dark-button sm:text-lg sm:font-semibold"
           >
             Log In
           </button>
         </form>
-        <div className="mt-2 flex w-5/6 flex-col items-center justify-center gap-4 text-center text-sm font-normal sm:text-base">
+        <div className="mt-2 flex w-5/6 flex-col items-center justify-center gap-4 text-center text-sm font-normal dark:text-dark-primary sm:text-base">
           <p>
             Don't have an account?
             <Link to={'/signup'} className="text-blue-600 hover:text-blue-500">
@@ -121,18 +124,18 @@ function signin() {
 
         <Link
           to={'/google-auth'}
-          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4  border-gray-300 p-3 text-center hover:bg-gray-50 md:w-3/4 lg:w-2/5"
+          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4  border-gray-300 p-3 text-center hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 md:w-3/4 lg:w-2/5"
         >
           <img className="h-4 w-6 pl-1 sm:h-5 sm:w-10" src={AddGoogleIcon} />
-          <span className="text-sm sm:text-base">Continue with Google</span>
+          <span className="text-sm dark:text-dark-primary sm:text-base">Continue with Google</span>
         </Link>
 
         <Link
           to={'/github-auth'}
-          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4 border-gray-300 p-3 text-center hover:bg-gray-50 md:w-3/4 lg:w-2/5"
+          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4 border-gray-300 p-3 text-center hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 md:w-3/4 lg:w-2/5"
         >
           <img className="h-4 w-6 sm:h-5 sm:w-10" src={AddGithubIcon} />
-          <span className="text-sm sm:text-base">Continue with Github</span>
+          <span className="text-sm dark:text-dark-primary sm:text-base">Continue with Github</span>
         </Link>
       </div>
     </div>

frontend/src/pages/signup-page.tsx

@@ -10,48 +10,46 @@ import { toast } from 'react-toastify';
 import { AxiosError, isAxiosError } from 'axios';
 import axiosInstance from '@/helpers/axios-instance';
 import userState from '@/utils/user-state';
-
+import ThemeToggle from '@/components/theme-toggle-button';
 function signup() {
   const navigate = useNavigate();
   const {
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
     reset,
-    setError
+    setError,
   } = useForm<TSignUpSchema>({ resolver: zodResolver(signUpSchema) });
 
   const onSubmit = async (data: FieldValues) => {
     try {
-      const res = axiosInstance.post('/api/auth/email-password/signup', data)
+      const res = axiosInstance.post('/api/auth/email-password/signup', data);
       toast.promise(res, {
         pending: 'Creating account ...',
         success: {
           render({ data }) {
             const userId = data?.data?.data?.user?._id;
             const userRole = data?.data?.data?.user?.role;
-            userState.setUser({ _id: userId, role: userRole })
-            reset()
-            navigate('/')
-            return data?.data?.message
+            userState.setUser({ _id: userId, role: userRole });
+            reset();
+            navigate('/');
+            return data?.data?.message;
           },
         },
         error: {
           render({ data }) {
             if (data instanceof AxiosError) {
               if (data?.response?.data?.message.includes('Username')) {
-                setError('userName',{ type: 'manual', message: data?.response?.data?.message }); 
+                setError('userName', { type: 'manual', message: data?.response?.data?.message });
               } else {
-                setError('email',{ type: 'manual', message: data?.response?.data?.message });
+                setError('email', { type: 'manual', message: data?.response?.data?.message });
               }
             }
-            return "Signup failed"
+            return 'Signup failed';
           },
         },
-      }
-      )
-      return (await res).data
-
+      });
+      return (await res).data;
     } catch (error) {
       if (isAxiosError(error)) {
         console.error(error.response?.data?.message);
@@ -61,14 +59,16 @@ function signup() {
     }
   };
 
-
   return (
-    <div className="m-4 flex-grow cursor-default bg-white py-4">
-      <div className="mb-4 flex justify-center">
+    <div className="flex-grow cursor-default bg-white py-4 dark:bg-dark-card">
+      <div className="m-4 mb-4 flex justify-center">
         <div className="flex w-full items-center justify-center">
-          <h2 className="w-3/4 text-center text-lg font-bold text-black sm:text-xl">
+          <h2 className="w-3/4 pl-48 text-center text-lg font-bold text-black dark:text-dark-primary sm:text-xl">
             Sign up to WanderLust
           </h2>
+          <div className="flex items-center justify-end px-4 sm:px-20">
+            <ThemeToggle />
+          </div>
         </div>
       </div>
       <div className="m-2 mt-8 flex flex-col items-center justify-center gap-2">
@@ -78,7 +78,7 @@ function signup() {
               {...register('userName')}
               type="text"
               placeholder="Username"
-              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+              className="dark:placholder w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
             />
             {errors.userName && (
               <p className="p-3 text-xs text-red-500">{`${errors.userName.message}`}</p>
@@ -89,7 +89,7 @@ function signup() {
               {...register('fullName')}
               type="text"
               placeholder="Name"
-              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
             />
             {errors.fullName && (
               <p className="p-3 text-xs text-red-500">{`${errors.fullName.message}`}</p>
@@ -100,7 +100,7 @@ function signup() {
               {...register('email')}
               type="email"
               placeholder="Email"
-              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
             />
             {errors.email && (
               <p className="p-3 text-xs text-red-500">{`${errors.email.message}`}</p>
@@ -111,7 +111,7 @@ function signup() {
               {...register('password')}
               type="password"
               placeholder="Password"
-              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
             />
             {errors.password && (
               <p className="p-3 text-xs text-red-500">{`${errors.password.message}`}</p>
@@ -122,7 +122,7 @@ function signup() {
               {...register('confirmPassword')}
               type="password"
               placeholder="Confirm Password"
-              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm dark:bg-dark-field dark:text-dark-textInField"
             />
             {errors.confirmPassword && (
               <p className="p-3 text-xs text-red-500">{`${errors.confirmPassword.message}`}</p>
@@ -131,12 +131,12 @@ function signup() {
           <button
             disabled={isSubmitting}
             type="submit"
-            className="flex w-full items-center justify-center rounded-lg bg-neutral-800 p-3 text-base font-medium text-light disabled:bg-neutral-600 sm:text-lg sm:font-semibold"
+            className="flex w-full items-center justify-center rounded-lg bg-neutral-800 p-3 text-base font-medium text-light disabled:bg-neutral-600 dark:bg-dark-button sm:text-lg sm:font-semibold"
           >
             Sign Up
           </button>
         </form>
-        <div className="mt-2 flex w-5/6 flex-col items-center justify-center gap-4 text-center text-sm font-normal sm:text-base">
+        <div className="mt-2 flex w-5/6 flex-col items-center justify-center gap-4 text-center text-sm font-normal dark:text-dark-primary sm:text-base">
           <p>
             Already have an account?
             <Link to={'/signin'} className="text-blue-600 hover:text-blue-500">
@@ -150,15 +150,15 @@ function signup() {
 
         <Link
           to={'/google-auth'}
-          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4  border-gray-300 p-3 text-center hover:bg-gray-50 md:w-3/4 lg:w-2/5"
+          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4 border-gray-300 p-3 text-center hover:bg-gray-50 dark:border-gray-700 dark:text-dark-primary dark:hover:bg-gray-700 md:w-3/4 lg:w-2/5"
         >
           <img className="h-4 w-6 pl-1 sm:h-5 sm:w-10" src={AddGoogleIcon} />
           <span className="text-sm sm:text-base">Continue with Google</span>
         </Link>
 
         <Link
           to={'/github-auth'}
-          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4 border-gray-300 p-3 text-center hover:bg-gray-50 md:w-3/4 lg:w-2/5"
+          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4 border-gray-300 p-3 text-center hover:bg-gray-50 dark:border-gray-700 dark:text-dark-primary dark:hover:bg-gray-700 md:w-3/4 lg:w-2/5"
         >
           <img className="h-4 w-6 sm:h-5 sm:w-10" src={AddGithubIcon} />
           <span className="text-sm sm:text-base">Continue with Github</span>

frontend/tailwind.config.js

@@ -17,6 +17,9 @@ export default {
           title: colors.slate[50],
           description: colors.slate[400],
           info: colors.slate[500],
+          field: colors.slate[900],
+          button: colors.slate[700],
+          textInField: colors.slate[50]
         },
         light: {
           DEFAULT: colors.slate[50],