Fix: #2 : Text and form are now more visible in dark and light modes

client/src/chakra/theme.ts

@@ -10,9 +10,9 @@
 const theme = extendTheme({
 	config,
 	styles: {
 		global: (props: any) => ({
 			body: {
-				backgroundColor: mode("gray.500", "")(props),
+				backgroundColor: mode("gray.300", "")(props),
 			},
 		}),
 	},

client/src/components/TodoForm.tsx

@@ -1,68 +1,72 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Button, Flex, Input, Spinner } from "@chakra-ui/react";
+import { Button, Flex, Input, Spinner, useColorMode } from "@chakra-ui/react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { IoMdAdd } from "react-icons/io";
 import { BASE_URL } from "../App";
 
 const TodoForm = () => {
-	const [newTodo, setNewTodo] = useState("");
+  const [newTodo, setNewTodo] = useState("");
+  const { colorMode } = useColorMode(); // Chakra UI hook to get the current color mode
 
-	const queryClient = useQueryClient();
+  const queryClient = useQueryClient();
 
-	const { mutate: createTodo, isPending: isCreating } = useMutation({
-		mutationKey: ["createTodo"],
-		mutationFn: async (e: React.FormEvent) => {
-			e.preventDefault();
-			try {
-				const res = await fetch(BASE_URL + `/todos`, {
-					method: "POST",
-					headers: {
-						"Content-Type": "application/json",
-					},
-					body: JSON.stringify({ body: newTodo }),
-				});
-				const data = await res.json();
+  const { mutate: createTodo, isPending: isCreating } = useMutation({
+    mutationKey: ["createTodo"],
+    mutationFn: async (e: React.FormEvent) => {
+      e.preventDefault();
+      try {
+        const res = await fetch(BASE_URL + `/todos`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ body: newTodo }),
+        });
+        const data = await res.json();
 
-				if (!res.ok) {
-					throw new Error(data.error || "Something went wrong");
-				}
+        if (!res.ok) {
+          throw new Error(data.error || "Something went wrong");
+        }
 
-				setNewTodo("");
-				return data;
-			} catch (error: any) {
-				throw new Error(error);
-			}
-		},
-		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["todos"] });
-		},
-		onError: (error: any) => {
-			alert(error.message);
-		},
-	});
+        setNewTodo("");
+        return data;
+      } catch (error: any) {
+        throw new Error(error);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["todos"] });
+    },
+    onError: (error: any) => {
+      alert(error.message);
+    },
+  });
 
-	return (
-		<form onSubmit={createTodo}>
-			<Flex gap={2}>
-				<Input
-					type='text'
-					value={newTodo}
-					onChange={(e) => setNewTodo(e.target.value)}
-					ref={(input) => input && input.focus()}
-				/>
-				<Button
-					mx={2}
-					type='submit'
-					_active={{
-						transform: "scale(.97)",
-					}}
-				>
-					{isCreating ? <Spinner size={"xs"} /> : <IoMdAdd size={30} />}
-				</Button>
-			</Flex>
-		</form>
-	);
+  return (
+    <form onSubmit={createTodo}>
+      <Flex gap={2}>
+        <Input
+          type="text"
+          value={newTodo}
+          onChange={(e) => setNewTodo(e.target.value)}
+          ref={(input) => input && input.focus()}
+          style={{
+            border: `1px solid ${colorMode === "dark" ? "white" : "black"}`, // Change border color based on mode
+          }}
+        />
+        <Button
+          mx={2}
+          type="submit"
+          _active={{
+            transform: "scale(.97)",
+          }}
+        >
+          {isCreating ? <Spinner size={"xs"} /> : <IoMdAdd size={30} />}
+        </Button>
+      </Flex>
+    </form>
+  );
 };
 export default TodoForm;