style: AnalogInputsChartModal 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.897
+NEXT_PUBLIC_APP_VERSION=1.6.898
 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.897
+NEXT_PUBLIC_APP_VERSION=1.6.898
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.898] – 2025-09-10
+
+- style: AnalogInputsSettingsModal dark mode
+
+---
 ## [1.6.897] – 2025-09-10
 
 - style: DigitalOutputsModal für dark mode

components/main/analogInputs/AnalogInputsChart.tsx

@@ -367,9 +367,9 @@ export default function AnalogInputsChart({
     <div
       className={`flex flex-col gap-2 h-full ${loading ? "cursor-wait" : ""}`}
     >
-      <div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-2">
+      <div className="flex justify-between items-center p-2 rounded-lg space-x-2 bg-[var(--color-surface-alt)] border border-base">
         <div className="flex justify-start">
-          <Dialog.Title className="text-lg font-semibold text-gray-700">
+          <Dialog.Title className="text-lg font-semibold text-fg">
             Eingang {selectedId ?? "–"}
           </Dialog.Title>
         </div>
@@ -385,7 +385,7 @@ export default function AnalogInputsChart({
             {/* ✅ Zeitraum-Auswahl (Listbox nur lokal) */}
             <Listbox value={localZeitraum} onChange={setLocalZeitraum}>
               <div className="relative w-48">
-                <Listbox.Button className="w-full border px-3 py-1 rounded bg-white flex justify-between items-center text-sm">
+                <Listbox.Button className="w-full border border-base px-3 py-1 rounded bg-[var(--color-surface)] text-fg flex justify-between items-center text-sm">
                   <span>
                     {localZeitraum === "DIA0"
                       ? "Alle Messwerte"
@@ -393,14 +393,14 @@ export default function AnalogInputsChart({
                       ? "Stündlich"
                       : "Täglich"}
                   </span>
-                  <i className="bi bi-chevron-down text-gray-400" />
+                  <i className="bi bi-chevron-down text-[var(--color-muted)]" />
                 </Listbox.Button>
-                <Listbox.Options className="absolute z-10 mt-1 w-full border bg-white shadow rounded text-sm">
+                <Listbox.Options className="absolute z-10 mt-1 w-full border border-base bg-[var(--color-surface)] shadow rounded text-sm">
                   {["DIA0", "DIA1", "DIA2"].map((option) => (
                     <Listbox.Option
                       key={option}
                       value={option}
-                      className="px-4 py-1 cursor-pointer hover:bg-gray-200"
+                      className="px-4 py-1 cursor-pointer hover:bg-[var(--color-surface-alt)] text-fg"
                     >
                       {option === "DIA0"
                         ? "Alle Messwerte"
@@ -416,7 +416,7 @@ export default function AnalogInputsChart({
             {/* ✅ Button: lädt die Daten & aktualisiert Redux */}
             <button
               onClick={handleFetchData}
-              className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
+              className="btn-primary px-4 py-1 rounded text-sm"
             >
               Daten laden
             </button>
@@ -427,11 +427,9 @@ export default function AnalogInputsChart({
       {/* Chart-Anzeige */}
       <div className="flex-1 min-h-0 w-full">
         {!selectedAnalogInput?.id ? (
-          <div className="flex items-center justify-center h-full text-gray-500 text-lg gap-2">
+          <div className="flex items-center justify-center h-full text-fg-secondary text-lg gap-2">
             <i className="bi bi-info-circle text-2xl mr-2" />
-            <span>
+            <span>Bitte Eingang auswählen</span>
-              Bitte wählen Sie einen Eingang aus, um die Messkurve anzuzeigen
-            </span>
           </div>
         ) : (
           <Line

components/main/analogInputs/AnalogInputsChartModal.tsx

@@ -35,82 +35,50 @@ export default function AnalogInputsChartModal({
       <div className="fixed inset-0 bg-black/50" aria-hidden="true" />
       {/* Centered panel */}
       <div className="fixed inset-0 flex items-center justify-center p-4">
-        <Dialog.Panel className="relative">
+        <Dialog.Panel className="relative outline-none">
           <div
-            className="bg-white rounded-xl shadow-xl border border-gray-200"
+            className={`rounded-xl shadow-xl border border-base bg-[var(--color-surface)] text-fg flex flex-col transition-all duration-300 overflow-hidden`}
             style={{
               width: isFullscreen ? "90vw" : "70rem",
-              height: isFullscreen ? "90vh" : "35rem",
+              height: isFullscreen ? "90vh" : "38rem",
-              padding: "1rem",
-              transition: "all 0.3s ease-in-out",
-              display: "flex",
-              flexDirection: "column",
             }}
           >
-            {/* Controls top-right (fullscreen + close) */}
+            {/* Header */}
-            <div
+            <header className="flex items-center justify-between px-6 py-4 border-b border-base select-none">
-              style={{
+              <h2 className="text-base font-bold">
-                position: "absolute",
-                top: "0.625rem",
-                right: "0.625rem",
-                display: "flex",
-                gap: "0.75rem",
-              }}
-            >
-              <button
-                onClick={() => setIsFullscreen((v) => !v)}
-                style={{
-                  background: "transparent",
-                  border: "none",
-                  fontSize: "1.5rem",
-                  cursor: "pointer",
-                }}
-                title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
-                aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
-              >
-                <i
-                  className={
-                    isFullscreen
-                      ? "bi bi-fullscreen-exit"
-                      : "bi bi-arrows-fullscreen"
-                  }
-                ></i>
-              </button>
-              <button
-                onClick={() => dispatch(setIsChartModalOpen(false))}
-                style={{
-                  background: "transparent",
-                  border: "none",
-                  fontSize: "1.5rem",
-                  cursor: "pointer",
-                }}
-                title="Schließen"
-                aria-label="Modal schließen"
-              >
-                <i className="bi bi-x-circle-fill"></i>
-              </button>
-            </div>
-
-            {/* Title row (align like IsoChartView) */}
-            <div className="flex justify-between items-center mb-2 pr-24">
-              <Dialog.Title className="text-lg font-semibold text-gray-700">
                 Messkurve Messwerteingang {selectedId ?? "–"}
-              </Dialog.Title>
+              </h2>
-            </div>
+              <div className="flex items-center gap-3">
-
+                <button
-            {/* Chart container (structure similar to IsoChartView) */}
+                  onClick={() => setIsFullscreen((v) => !v)}
-            <div
+                  className="icon-btn text-xl"
-              style={{
+                  aria-label={isFullscreen ? "Vollbild verlassen" : "Vollbild"}
-                flex: 1,
+                  type="button"
-                display: "flex",
+                  title={isFullscreen ? "Vollbild verlassen" : "Vollbild"}
-                flexDirection: "column",
+                >
-                height: "90%",
+                  <i
-              }}
+                    className={
-            >
+                      isFullscreen
-              {/* Optional: place an action bar here if needed */}
+                        ? "bi bi-fullscreen-exit"
-              <div style={{ flex: 1, height: "90%" }}>
+                        : "bi bi-arrows-fullscreen"
-                <AnalogInputsChart loading={loading} setLoading={setLoading} />
+                    }
+                  />
+                </button>
+                <button
+                  onClick={() => dispatch(setIsChartModalOpen(false))}
+                  className="icon-btn text-2xl"
+                  aria-label="Modal schließen"
+                  type="button"
+                  title="Schließen"
+                >
+                  <i className="bi bi-x-circle-fill" />
+                </button>
               </div>
+            </header>
+
+            {/* Body */}
+            <div className="flex-1 min-h-0 px-4 pt-3 pb-4 bg-[var(--color-surface)]">
+              <AnalogInputsChart loading={loading} setLoading={setLoading} />
             </div>
           </div>
         </Dialog.Panel>

package-lock.json

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

package.json

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