From 69a51abdd2791f094d8aee3c4f3c5cc1ab047704 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 24 Oct 2024 11:59:52 +0200
Subject: [PATCH] Light und Darkmodus in global.css eingestellt, in andere
 components text-black in root div

---
 app/globals.css                 | 16 ++++++++++++++++
 app/kabelueberwachung/page.jsx  |  2 +-
 components/Footer.jsx           |  2 +-
 components/Header.jsx           |  2 +-
 components/modales/KueModal.jsx |  9 +++++----
 5 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 37ab8ec..dbd1cc0 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -26,3 +26,19 @@ body {
     text-wrap: balance;
   }
 }
+
+@media (prefers-color-scheme: light) {
+  input {
+    background-color: #333 !important; /* Dunkler Hintergrund im Darkmode */
+    color: #fff !important; /* Weißer Text im Darkmode */
+    border: 1px solid #555; /* Optional: etwas hellerer Rahmen */
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  input {
+    background-color: white !important; /* Heller Hintergrund im Lightmode */
+    color: black !important; /* Schwarzer Text im Lightmode */
+    border: 1px solid #ccc; /* Optional: heller Rahmen */
+  }
+}
diff --git a/app/kabelueberwachung/page.jsx b/app/kabelueberwachung/page.jsx
index ac99828..83e7e0e 100644
--- a/app/kabelueberwachung/page.jsx
+++ b/app/kabelueberwachung/page.jsx
@@ -84,7 +84,7 @@ function Kabelueberwachung() {
   }, []);
 
   return (
-    <div className="bg-gray-100 flex-1 p-6">
+    <div className="bg-gray-100 flex-1 p-6 text-black">
       <h1 className="text-2xl mb-4">Kabelüberwachung</h1>
 
       <div className="mb-4">
diff --git a/components/Footer.jsx b/components/Footer.jsx
index e81629c..22756f2 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -90,7 +90,7 @@ function Footer() {
   }, [showSlider]);
 
   return (
-    <footer className="relative bg-gray-300 p-4 overflow-hidden">
+    <footer className="relative bg-gray-300 p-4 overflow-hidden text-black">
       <div className="container mx-auto flex justify-between">
         <div className="flex flex-row space-x-2">
           <Icon
diff --git a/components/Header.jsx b/components/Header.jsx
index a07af0f..cf0ee42 100644
--- a/components/Header.jsx
+++ b/components/Header.jsx
@@ -135,7 +135,7 @@ function Header() {
   if (!isClient) return null; // Rendere die Komponente nicht, bis sie clientseitig ausgeführt wird
 
   return (
-    <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative">
+    <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative text-black">
       <div className="absolute left-32 top-32 transform -translate-y-1/2">
         <Image
           src="/images/Logo.png"
diff --git a/components/modales/KueModal.jsx b/components/modales/KueModal.jsx
index 2eb1a7a..73bed1a 100644
--- a/components/modales/KueModal.jsx
+++ b/components/modales/KueModal.jsx
@@ -166,6 +166,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
         overlay: {
           backgroundColor: "rgba(0, 0, 0, 0.5)",
           zIndex: 100,
+          text: "black",
         },
         content: {
           top: "50%",
@@ -202,7 +203,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
       </div>
 
       {/* ID und Modulname anzeigen */}
-      <div className="p-2 mb-4">
+      <div className="p-2 mb-4 text-black">
         {/* 
            <div className="mb-2">
           <label className="font-bold">ID:</label>
@@ -215,8 +216,8 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
         </div>
         */}
 
-        <div className="mb-2">
-          <label className="font-bold">Kabelbezeichnung:</label>
+        <div className="mb-2 ">
+          <label className="font-bold ">Kabelbezeichnung:</label>
           <input
             type="text"
             className="border rounded p-1 w-full text-sm"
@@ -227,7 +228,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
       </div>
 
       {/* Modal Body */}
-      <div className="p-2">
+      <div className="p-2 text-black">
         <h3 className="font-bold text-center mb-4">Isolationsmessung</h3>
         <table className="w-full text-left border-collapse mb-4">
           <thead className="bg-gray-100">