create blog dark mode issue fixed

Author: viki-777

src/components/BlogForm.jsx

@@ -1,3 +1,125 @@
+// import ReactQuill from 'react-quill';
+// import 'react-quill/dist/quill.snow.css';
+// import { useForm, Controller } from "react-hook-form";
+// import { yupResolver } from "@hookform/resolvers/yup";
+// import * as Yup from "yup";
+// import { useEffect } from 'react';
+
+// const BlogForm = ({ onCreateBlog }) => {
+//   const schema = Yup.object().shape({
+//     title: Yup.string().required("Title is required"),
+//     author: Yup.string().required("Author is required"),
+//     description: Yup.string().required("Description is required"),
+//     imgUrl: Yup.string().url("Must be a valid URL").required("Image URL is required"),
+//   });
+
+//   const { register, handleSubmit, control, formState: { errors } } = useForm({
+//     resolver: yupResolver(schema),
+//   });
+
+//   // Add an effect to dynamically apply dark mode styles to ReactQuill's editor content
+//   useEffect(() => {
+//     const quillEditor = document.querySelector('.ql-editor');
+//     if (quillEditor) {
+//       if (document.documentElement.classList.contains('dark')) {
+//         quillEditor.style.color = 'white';
+//       } else {
+//         quillEditor.style.color = 'black';
+//       }
+//     }
+//   }, []);
+
+//   const onSubmit = (data) => {
+//     const newBlog = {
+//       ...data,
+//       date: new Date().toLocaleDateString(),
+//     };
+//     onCreateBlog(newBlog);
+//   };
+
+//   return (
+//     <div className="border-gray-600 mt-20 max-w-lg mx-auto p-6 rounded-lg shadow-2xl bg-white dark:bg-gray-800">
+//       <h2 className="text-2xl font-bold mb-6 text-center text-primary dark:text-primary">
+//         Create New Blog
+//       </h2>
+
+//       <form onSubmit={handleSubmit(onSubmit)}>
+//         <div className="mb-4">
+//           <label htmlFor="title" className="block text-gray-700 dark:text-gray-300">
+//             Blog Title
+//           </label>
+//           <input
+//             id="title"
+//             type="text"
+//             className="w-full px-4 py-2 mt-1 border border-primary rounded-lg dark:bg-gray-700 dark:text-white"
+//             {...register("title")}
+//             placeholder="Enter blog title"
+//           />
+//           {errors.title && <span className="text-red-500">{errors.title.message}</span>}
+//         </div>
+
+//         <div className="mb-4">
+//           <label htmlFor="author" className="block text-gray-700 dark:text-gray-300">
+//             Author
+//           </label>
+//           <input
+//             id="author"
+//             type="text"
+//             className="w-full px-4 py-2 mt-1 border border-primary rounded-lg dark:bg-gray-700 dark:text-white"
+//             {...register("author")}
+//             placeholder="Enter author name"
+//           />
+//           {errors.author && <span className="text-red-500">{errors.author.message}</span>}
+//         </div>
+
+//         <div className="mb-4">
+//           <label htmlFor="description" className="block text-gray-700 dark:text-gray-300">
+//             Description
+//           </label>
+//           <Controller 
+//             name="description"
+//             control={control}
+//             render={({ field }) => (
+//               <ReactQuill
+//                 theme="snow"
+//                 className="dark:bg-gray-700 dark:text-white"
+//                 value={field.value}
+//                 onChange={field.onChange}
+//                 placeholder="Enter your description..."
+//               />
+//             )}
+//           />
+//           {errors.description && <span className="text-red-500">{errors.description.message}</span>}
+//         </div>
+
+//         <div className="mb-4">
+//           <label htmlFor="imgUrl" className="block text-gray-700 dark:text-gray-300">
+//             Image URL
+//           </label>
+//           <input
+//             id="imgUrl"
+//             type="url"
+//             className="w-full px-4 py-2 mt-1 border border-primary rounded-lg dark:bg-gray-700 dark:text-white"
+//             {...register("imgUrl")}
+//             placeholder="Enter image URL"
+//           />
+//           {errors.imgUrl && <span className="text-red-500">{errors.imgUrl.message}</span>}
+//         </div>
+
+//         <button
+//           type="submit"
+//           className="w-full bg-primary text-white py-2 rounded-lg hover:scale-105 transition duration-300"
+//         >
+//           Create Blog
+//         </button>
+//       </form>
+//     </div>
+//   );
+// };
+
+// export default BlogForm;
+
+
 import { useState } from "react";
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
@@ -100,4 +222,4 @@ const BlogForm = ({ onCreateBlog }) => {
   );
 };
 
-export default BlogForm;
+export default BlogForm;

src/index.css

@@ -25,4 +25,15 @@
   /* border-color: rgba(31, 42, 55, 0.5) */
   border-color: rgba(255, 255, 255, 0.4);
   /* border-color: #151515; */
-}
+}
+
+.ql-editor {
+  color: black;
+  background-color: white;
+}
+
+/* Apply dark mode styles */
+.dark .ql-editor {
+  color: white;
+  background-color: #374151; /* Adjust as needed for dark backgrounds */
+}

tailwind.config.js

@@ -5,6 +5,7 @@ export default {
   theme: {
     extend: {
       colors: {
+        text: "#fff", // Light mode text color
         primary: "#9D5AE3",
         secondary: "#484848",
         darkFooter: "#333333", // Dark mode footer color