add dark styles to modal

crates/librqbit/webui/src/components/modal/DeleteTorrentModal.tsx

@@ -52,7 +52,7 @@ export const DeleteTorrentModal: React.FC<{
   return (
     <Modal isOpen={show} onClose={onHide} title="Delete torrent">
       <ModalBody>
-        <p className="text-gray-700">
+        <p className="text-gray-700 dark:text-slate-300">
           Are you sure you want to delete the torrent?
         </p>
 
@@ -65,7 +65,10 @@ export const DeleteTorrentModal: React.FC<{
             checked={deleteFiles}
             placeholder="Also delete files"
           />
-          <label htmlFor="deleteFiles" className="ml-2 text-gray-700">
+          <label
+            htmlFor="deleteFiles"
+            className="ml-2 text-gray-700 dark:text-slate-300"
+          >
             Also delete files
           </label>
         </div>

crates/librqbit/webui/src/components/modal/Modal.tsx

@@ -16,8 +16,8 @@ const ModalHeader: React.FC<{
   title: string;
 }> = ({ onClose, title }) => {
   return (
-    <div className="flex p-3 justify-between items-center border-b">
-      <h2 className="text-xl font-semibold">{title}</h2>
+    <div className="flex p-3 justify-between items-center border-b dark:border-slate-600">
+      <h2 className="text-xl font-semibold dark:slate-300">{title}</h2>
       {onClose && (
         <button
           className="text-gray-500 hover:text-gray-700"
@@ -39,17 +39,19 @@ export const Modal: React.FC<ModalProps> = ({
   className,
 }) => {
   const renderBackdrop = () => {
-    return <div className="fixed inset-0 bg-black/30 z-[300]"></div>;
+    return (
+      <div className="fixed inset-0 bg-black/30 z-[300] dark:bg-black/60"></div>
+    );
   };
   return (
     <RestartModal
       show={isOpen}
       onHide={onClose}
       renderBackdrop={renderBackdrop}
-      className={`fixed z-[301] top-0 left-0 w-full h-full block overflow-x-hidden overflow-y-auto`}
+      className="fixed z-[301] top-0 left-0 w-full h-full block overflow-x-hidden overflow-y-auto"
     >
       <div
-        className={`bg-white shadow-lg my-8 mx-auto max-w-2xl rounded ${className}`}
+        className={`bg-white shadow-lg my-8 mx-auto max-w-2xl rounded ${className} dark:bg-slate-800`}
       >
         <ModalHeader onClose={onClose} title={title} />
         {children}

crates/librqbit/webui/src/components/modal/ModalBody.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
 
 export const ModalBody = ({ children }: { children: ReactNode }) => {
-  return <div className="p-3 border-b">{children}</div>;
+  return <div className="p-3 border-b dark:border-slate-500">{children}</div>;
 };