style: DigitalOutputsModal für dark mode

components/main/digitalOutputs/DigitalOutputsModal.tsx

@@ -94,44 +94,48 @@ export default function DigitalOutputsModal({
 
   return (
     <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
-      <div className="bg-white rounded-lg shadow-lg p-6 w-1/2 max-w-lg">
-        <div className="mb-4 border-b pb-2 flex justify-between items-center">
-          <h2 className="text-base font-bold">
+      <div className="bg-[var(--color-surface)] border border-base rounded-xl shadow-xl w-[32rem] max-w-full p-0 flex flex-col">
+        <header className="modal-header flex items-center justify-between px-6 py-4 border-b border-base">
+          <h2 className="text-base font-bold text-fg">
             Einstellungen Schaltausgang {selectedOutput.id}
           </h2>
           <button
             onClick={closeOutputModal}
-            className="text-2xl hover:text-gray-400"
+            className="icon-btn text-2xl"
             aria-label="Modal schließen"
+            type="button"
           >
-            <i className="bi bi-x-circle-fill"></i>
+            <i className="bi bi-x-circle-fill" />
           </button>
-        </div>
-
-        <div className="grid grid-cols-2 gap-x-4 gap-y-3">
-          <div>
-            <span className="font-normal">Bezeichnung:</span>
+        </header>
+        <div className="modal-body-scroll px-6 py-5 flex-1 text-fg">
+          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+            <div>
+              <span className="font-normal text-fg-secondary">
+                Bezeichnung:
+              </span>
+            </div>
+            <div>
+              <input
+                type="text"
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                className="border border-base rounded px-2 py-1 w-full bg-[var(--color-surface-alt)] text-fg"
+                placeholder="z. B. Licht Relais 1"
+              />
+            </div>
           </div>
-          <input
-            type="text"
-            value={label}
-            onChange={(e) => setLabel(e.target.value)}
-            className="w-full border border-gray-300 rounded px-3 py-2"
-            placeholder="z. B. Licht Relais 1"
-          />
+          {errorMsg && <p className="text-red-600 text-sm mb-2">{errorMsg}</p>}
         </div>
-
-        {errorMsg && <p className="text-red-600 text-sm mb-2">{errorMsg}</p>}
-
-        <div className="flex justify-end gap-2 mt-6">
+        <footer className="px-6 py-4 border-t border-base flex justify-end">
           <button
             onClick={handleSave}
             disabled={isSaving}
-            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
+            className="btn-primary px-4 py-2 rounded flex items-center"
           >
             {isSaving ? "Speichern..." : "Speichern"}
           </button>
-        </div>
+        </footer>
       </div>
     </div>
   );