style: AnalogInputsSettingsModal 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.896
+NEXT_PUBLIC_APP_VERSION=1.6.897
 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.896
+NEXT_PUBLIC_APP_VERSION=1.6.897
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.897] – 2025-09-10
+
+- style: DigitalOutputsModal für dark mode
+
+---
 ## [1.6.896] – 2025-09-10
 
 - style: Digitale Ausgänge Switch

components/main/analogInputs/AnalogInputsSettingsModal.tsx

@@ -108,125 +108,118 @@ export default function AnalogInputsSettingsModal() {
 
   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 Messwerteingang {selectedInput.id}
           </h2>
           <button
             onClick={() => dispatch(setIsSettingsModalOpen(false))}
-            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>
-
-        {/* Bezeichnung */}
-        <div className="grid grid-cols-2 gap-x-4 gap-y-3">
-          <span className="font-normal">Bezeichnung:</span>
-          <input
-            type="text"
-            className="w-full border rounded px-3 py-1 mb-4"
-            value={label}
-            onChange={(e) => setLabel(e.target.value)}
-          />
-        </div>
-
-        {/* Offset */}
-        <div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
-          <span className="font-normal">Offset:</span>
-          <input
-            type="number"
-            step="0.001"
-            className="border border-gray-300 rounded px-2 py-1 w-full text-right"
-            value={offset}
-            onChange={(e) => setOffset(e.target.value)}
-          />
-        </div>
-
-        {/* Faktor */}
-        <div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
-          <span className="font-normal">Faktor:</span>
-          <input
-            type="number"
-            step="0.001"
-            className="border border-gray-300 rounded px-2 py-1 w-full text-right"
-            value={factor}
-            onChange={(e) => setFactor(e.target.value)}
-          />
-        </div>
-
-        {/* Einheit */}
-        <div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
-          <span className="font-normal">Einheit:</span>
-          <Listbox value={unit} onChange={setUnit}>
-            <div className="relative w-full">
-              <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm text-gray-900 font-sans">
-                <span>{unit}</span>
-                <svg
-                  className="w-5 h-5 text-gray-400"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                  aria-hidden="true"
-                >
-                  <path
-                    fillRule="evenodd"
-                    d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </Listbox.Button>
-              <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm text-gray-900 font-sans">
-                {unitOptions.map((opt) => (
-                  <Listbox.Option
-                    key={opt}
-                    value={opt}
-                    className={({ selected, active }) =>
-                      `px-4 py-1 cursor-pointer ${
-                        selected
-                          ? "bg-littwin-blue text-white font-medium"
-                          : active
-                          ? "bg-gray-200"
-                          : "text-gray-900"
-                      }`
-                    }
-                  >
-                    {opt}
-                  </Listbox.Option>
-                ))}
-              </Listbox.Options>
-            </div>
-          </Listbox>
-        </div>
-
-        {/* Speicherintervall */}
-        <div className="grid grid-cols-2 gap-x-4 gap-y-3">
-          <span className="font-normal">Speicherintervall:</span>
-          <div className="relative w-full">
+        </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">
+            <span className="font-normal text-fg-secondary">Bezeichnung:</span>
+            <input
+              type="text"
+              className="border border-base rounded px-2 py-1 w-full bg-[var(--color-surface-alt)] text-fg"
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
+            <span className="font-normal text-fg-secondary">Offset:</span>
             <input
               type="number"
-              className="border rounded px-2 py-1 pr-20 w-full text-right"
-              value={loggerInterval}
-              onChange={(e) => setLoggerInterval(e.target.value)}
+              step="0.001"
+              className="border border-base rounded px-2 py-1 w-full text-right bg-[var(--color-surface-alt)] text-fg"
+              value={offset}
+              onChange={(e) => setOffset(e.target.value)}
             />
-            <span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
-              Minuten
+          </div>
+          <div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
+            <span className="font-normal text-fg-secondary">Faktor:</span>
+            <input
+              type="number"
+              step="0.001"
+              className="border border-base rounded px-2 py-1 w-full text-right bg-[var(--color-surface-alt)] text-fg"
+              value={factor}
+              onChange={(e) => setFactor(e.target.value)}
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
+            <span className="font-normal text-fg-secondary">Einheit:</span>
+            <Listbox value={unit} onChange={setUnit}>
+              <div className="relative w-full">
+                <Listbox.Button className="w-full border border-base px-2 py-1 rounded text-left bg-[var(--color-surface-alt)] text-fg flex justify-between items-center text-sm font-sans">
+                  <span>{unit}</span>
+                  <svg
+                    className="w-5 h-5 text-muted"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </Listbox.Button>
+                <Listbox.Options className="absolute z-50 mt-1 w-full border border-base rounded bg-[var(--color-surface-alt)] shadow max-h-60 overflow-auto text-sm text-fg font-sans">
+                  {unitOptions.map((opt) => (
+                    <Listbox.Option
+                      key={opt}
+                      value={opt}
+                      className={({ selected, active }) =>
+                        `px-4 py-1 cursor-pointer ${
+                          selected
+                            ? "bg-littwin-blue text-white font-medium"
+                            : active
+                            ? "bg-base-muted"
+                            : "text-fg"
+                        }`
+                      }
+                    >
+                      {opt}
+                    </Listbox.Option>
+                  ))}
+                </Listbox.Options>
+              </div>
+            </Listbox>
+          </div>
+          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+            <span className="font-normal text-fg-secondary">
+              Speicherintervall:
             </span>
+            <div className="relative w-full">
+              <input
+                type="number"
+                className="border border-base rounded px-2 py-1 pr-20 w-full text-right bg-[var(--color-surface-alt)] text-fg"
+                value={loggerInterval}
+                onChange={(e) => setLoggerInterval(e.target.value)}
+              />
+              <span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-muted text-sm">
+                Minuten
+              </span>
+            </div>
           </div>
         </div>
-
-        {/* Speichern-Button */}
-        <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>
   );

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.896",
+  "version": "1.6.897",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.896",
+      "version": "1.6.897",
       "dependencies": {
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",

package.json

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