https://i.stack.imgur.com/fLQdY.png I have tried various methods, but I am unable to get rid of the strange color in the background of the Modal. Just for reference, I am using Tailwind CSS with Daisy UI on Next.JS.
<>
<button className='btn bg-gray-900 text-white border-none normal-case font-medium hover:bg-gray-900' onClick={()=>window.my_modal_1.showModal()}>Create Project</button>
<dialog id="my_modal_1" className="modal bg-transparent">
<form method="dialog" className="modal-box bg-gray-900">
<h3 className="font-bold text-lg">Project Information</h3>
<br /><br />
<input type="text" placeholder="Project's Name" onChange={(e) => {setName(e.target.value)}} className="input w-full max-w-xs bg-gray-950 font-bold border-none" />
<br /><br />
<input type="text" placeholder="Project's URL" onChange={(e) => {setUrl(e.target.value)}} className="input w-full max-w-xs bg-gray-950 font-bold border-none" />
<br /><br />
<button className="btn bg-indigo-700 text-white border-none hover:bg-indigo-800 normal-case" onClick={createProject}>Create Project</button>
<br /><br />
{response}
<p className='text-red-500 font-medium'>
{error}
</p>
<div className="modal-action">
<button className="btn bg-gray-950 border-none hover:bg-gray-950 normal-case -mt-7 text-white">Close</button>
</div>
</form>
</dialog>
</>