<div data-theme="dark" class="h-full flex w-full flex-col items-center justify-center bg-[#1a1d21]">
  
<button class="btn btn-outline" onclick="my_modal_2.showModal()">open modal</button>
  
<dialog id="my_modal_2" class="modal">
  <div class="modal-box">
    <h3 class="text-lg font-bold">Hello!</h3>
    <form method="dialog">
      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
    </form>
    <p class="py-4">Press ESC key,  click on ✕ button or click outside to close</p>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>
</div>

document.body.classList.add('bg-[#1a1d21]', 'h-screen');