style: dark mode Modal KÜ Einstellungen

.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.878
+NEXT_PUBLIC_APP_VERSION=1.6.879
 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.878
+NEXT_PUBLIC_APP_VERSION=1.6.879
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.879] – 2025-09-08
+
+- WIP: dark mode Modale
+
+---
 ## [1.6.878] – 2025-09-08
 
 - WIP: dark mode Berichte

components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx

@@ -69,14 +69,20 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
         },
       }}
     >
-      <div className="p-2 flex justify-between items-center rounded-t-md">
+      <div className="p-2 flex justify-between items-center rounded-t-md bg-surface-alt border-b border-base">
-        <h2 className="text-base font-bold">Einstellungen KÜ {slot + 1}</h2>
+        <h2 className="text-base font-bold text-fg">
-        <button onClick={onClose} className="text-2xl hover:text-gray-200">
+          Einstellungen KÜ {slot + 1}
+        </h2>
+        <button
+          onClick={onClose}
+          className="text-2xl text-fg-muted hover:text-fg transition-colors focus:outline-none focus:ring-2 focus:ring-accent/50 rounded"
+          aria-label="Modal schließen"
+        >
           <i className="bi bi-x-circle-fill"></i>
         </button>
       </div>
 
-      <div className="flex justify-start bg-gray-100 space-x-2 p-2">
+      <div className="flex justify-start bg-surface-alt space-x-2 p-2 border-b border-base">
         {[
           { label: "Allgemein", key: "kue" as const },
           { label: "TDR ", key: "tdr" as const },
@@ -86,18 +92,17 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
           <button
             key={key}
             onClick={() => setActiveTab(key)}
-            className={`px-4 py-1 rounded-t font-bold text-sm ${
+            className={`px-4 py-1 rounded-t font-semibold text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-accent/40 ${
               activeTab === key
-                ? "bg-white text-littwin-blue"
+                ? "bg-surface text-accent shadow-sm"
-                : "text-gray-500 hover:text-black"
+                : "text-fg-muted hover:text-fg"
             }`}
           >
             {label}
           </button>
         ))}
       </div>
-
+      <div className="p-4 bg-surface rounded-b-md h-[20rem] laptop:h-[24rem] 2xl:h-[30rem] overflow-y-auto text-fg">
-      <div className="p-4 bg-white rounded-b-md h-[20rem] laptop:h-[24rem] 2xl:h-[30rem] overflow-y-auto">
         {activeTab === "kue" && (
           <KueEinstellung
             slot={slot}

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.878",
+  "version": "1.6.879",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",