feat: Berichte light und dark mode

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.742
+NEXT_PUBLIC_APP_VERSION=1.6.743
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.742
+NEXT_PUBLIC_APP_VERSION=1.6.743
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.743] – 2025-08-18
+
+- feat: einstellungen dark und light mode
+
+---
 ## [1.6.742] – 2025-08-18
 
 - feat: Einstellungen in dark und light mode

components/main/reports/MeldungenTabelle.tsx

@@ -15,25 +15,38 @@ export default function MeldungenTabelle({
   return (
     <div className="overflow-auto max-h-[80vh]">
       <table className="min-w-full border">
-        <thead className="bg-gray-100 text-left sticky top-0 z-10">
+        <thead className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 text-left sticky top-0 z-10">
           <tr>
-            <th className="p-2 border">Prio</th>
-            <th className="p-2 border">Zeitstempel</th>
-            <th className="p-2 border">Quelle</th>
-            <th className="p-2 border">Meldung</th>
-            <th className="p-2 border">Status</th>
+            <th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+              Prio
+            </th>
+            <th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+              Zeitstempel
+            </th>
+            <th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+              Quelle
+            </th>
+            <th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+              Meldung
+            </th>
+            <th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+              Status
+            </th>
           </tr>
         </thead>
         <tbody>
           {messages.map((msg, index) => (
-            <tr key={index} className="hover:bg-gray-200">
-              <td className="border p-2">
+            <tr
+              key={index}
+              className="hover:bg-gray-100 dark:hover:bg-gray-700"
+            >
+              <td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
                 <div
                   className="w-4 h-4 rounded"
                   style={{ backgroundColor: msg.c }}
                 ></div>
               </td>
-              <td className="border p-2">
+              <td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
                 {new Date(msg.t).toLocaleString("de-DE", {
                   day: "2-digit",
                   month: "2-digit",
@@ -43,10 +56,15 @@ export default function MeldungenTabelle({
                   second: "2-digit",
                 })}
               </td>
-
-              <td className="border p-2">{msg.i}</td>
-              <td className="border p-2">{msg.m}</td>
-              <td className="border p-2">{msg.v}</td>
+              <td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+                {msg.i}
+              </td>
+              <td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+                {msg.m}
+              </td>
+              <td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+                {msg.v}
+              </td>
             </tr>
           ))}
         </tbody>

components/main/reports/MeldungenView.tsx

@@ -67,7 +67,7 @@ export default function MeldungenView() {
 
         <Listbox value={sourceFilter} onChange={setSourceFilter}>
           <div className="relative ml-6 w-64">
-            <Listbox.Button className="w-full border px-4 py-2 rounded text-left bg-white flex justify-between items-center">
+            <Listbox.Button className="bg-white text-gray-900 w-full border px-4 py-2 rounded text-left flex justify-between items-center dark:bg-gray-900 dark:text-gray-100">
               <span>{sourceFilter}</span>
               <svg
                 className="w-5 h-5 text-gray-400"
@@ -83,17 +83,19 @@ export default function MeldungenView() {
                 />
               </svg>
             </Listbox.Button>
-            <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto">
+            <Listbox.Options className="bg-white absolute z-50 mt-1 w-full border rounded dark:bg-gray-900">
               {sources.map((src) => (
                 <Listbox.Option
                   key={src}
                   value={src}
-                  className={({ selected, active }) =>
-                    `px-4 py-2 cursor-pointer ${
+                  className={({ selected, active, disabled }) =>
+                    `px-4 py-2 cursor-pointer text-gray-900 dark:text-gray-100 ${
                       selected
                         ? "bg-littwin-blue text-white"
                         : active
-                        ? "bg-blue-100"
+                        ? "bg-blue-100 dark:bg-gray-700 dark:text-white"
+                        : disabled
+                        ? "opacity-50 text-gray-400 dark:text-gray-500 cursor-not-allowed"
                         : ""
                     }`
                   }

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.742",
+  "version": "1.6.743",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.742",
+      "version": "1.6.743",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.742",
+  "version": "1.6.743",
   "private": true,
   "scripts": {
     "dev": "next dev",