feat: Dashboard light and 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.737
+NEXT_PUBLIC_APP_VERSION=1.6.738
 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.737
+NEXT_PUBLIC_APP_VERSION=1.6.738
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.738] – 2025-08-18
+
+- feat: Navigation dar und light mode
+
+---
 ## [1.6.737] – 2025-08-18
 
 - feat: playwright scraper

components/header/Header.tsx

@@ -121,9 +121,15 @@ function Header() {
             title={isDark ? "Light Mode" : "Dark Mode"}
           >
             {isDark ? (
-              <Icon icon="mdi:weather-night" className="text-xl text-yellow-300" />
+              <Icon
+                icon="mdi:weather-night"
+                className="text-xl text-yellow-300"
+              />
             ) : (
-              <Icon icon="mdi:white-balance-sunny" className="text-xl text-yellow-500" />
+              <Icon
+                icon="mdi:white-balance-sunny"
+                className="text-xl text-yellow-500"
+              />
             )}
           </button>
         </div>

components/main/dashboard/DashboardView.tsx

@@ -25,7 +25,7 @@ const DashboardView: React.FC = () => {
   }, [dispatch]);
   //-------------------------------------
   return (
-    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
+    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
       {/* Header */}
       <div className="flex justify-between items-center w-full lg:w-2/3">
         <div className="flex justify-between gap-1">

components/main/dashboard/NetworkInfo.tsx

@@ -38,7 +38,7 @@ const NetworkInfo: React.FC = () => {
 
   return (
     <div className="w-full flex-direction: row flex">
-      <div className=" flex-grow flex justify-between items-center mt-1 bg-white p-2 rounded-lg shadow-md border border-gray-200 laptop:m-0 laptop:scale-y-75 2xl:scale-y-75">
+      <div className=" flex-grow flex justify-between items-center mt-1 bg-white dark:bg-gray-800 p-2 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 laptop:m-0 laptop:scale-y-75 2xl:scale-y-75">
         <div className="flex items-center space-x-4">
           <Image
             src="/images/IP-icon.svg"
@@ -49,8 +49,12 @@ const NetworkInfo: React.FC = () => {
             priority
           />
           <div>
-            <p className="text-xs text-gray-500">IP-Adresse</p>
+            <p className="text-xs text-gray-500 dark:text-gray-400">
-            <p className="text-sm font-medium text-gray-700">{ip}</p>
+              IP-Adresse
+            </p>
+            <p className="text-sm font-medium text-gray-700 dark:text-gray-200">
+              {ip}
+            </p>
           </div>
         </div>
 
@@ -64,8 +68,12 @@ const NetworkInfo: React.FC = () => {
             priority
           />
           <div>
-            <p className="text-xs text-gray-500">Subnet-Maske</p>
+            <p className="text-xs text-gray-500 dark:text-gray-400">
-            <p className="text-sm font-medium text-gray-700">{subnet}</p>
+              Subnet-Maske
+            </p>
+            <p className="text-sm font-medium text-gray-700 dark:text-gray-200">
+              {subnet}
+            </p>
           </div>
         </div>
 
@@ -79,16 +87,20 @@ const NetworkInfo: React.FC = () => {
             priority
           />
           <div>
-            <p className="text-xs text-gray-500">Gateway</p>
+            <p className="text-xs text-gray-500 dark:text-gray-400">Gateway</p>
-            <p className="text-sm font-medium text-gray-700">{gateway}</p>
+            <p className="text-sm font-medium text-gray-700 dark:text-gray-200">
+              {gateway}
+            </p>
           </div>
         </div>
 
         <div className="flex items-center space-x-4">
           <div className="text-xs font-bold text-littwin-blue">OPC-UA</div>
           <div>
-            <p className="text-xs text-gray-500">Status</p>
+            <p className="text-xs text-gray-500 dark:text-gray-400">Status</p>
-            <p className="text-sm font-medium text-gray-700">{opcUaZustand}</p>
+            <p className="text-sm font-medium text-gray-700 dark:text-gray-200">
+              {opcUaZustand}
+            </p>
           </div>
         </div>
         {/* OPC UA Nodeset Name */}

components/main/dashboard/VersionInfo.tsx

@@ -18,22 +18,24 @@ const VersionInfo: React.FC<VersionInfoProps> = ({ className = "" }) => {
 
   return (
     <div
-      className={`bg-gray-50 rounded-lg shadow-sm border border-gray-200 w-full laptop:p-2 ${className}`}
+      className={`bg-gray-50 dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 w-full laptop:p-2 ${className}`}
     >
-      <h2 className="text-lg font-semibold text-gray-700 mb-2">
+      <h2 className="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">
         Versionsinformationen
       </h2>
 
       <div className="flex flex-row p-2 space-x-2">
         <Icon icon="bx:code-block" className="text-xl text-blue-400" />
-        <p className="text-sm text-gray-600">
+        <p className="text-sm text-gray-600 dark:text-gray-300">
           Applikationsversion: {appVersion}
         </p>
       </div>
 
       <div className="flex flex-row p-2 space-x-2">
         <Icon icon="mdi:web" className="text-xl text-blue-400" />
-        <p className="text-sm text-gray-600">Webversion: {webVersion}</p>
+        <p className="text-sm text-gray-600 dark:text-gray-300">
+          Webversion: {webVersion}
+        </p>
       </div>
     </div>
   );

package-lock.json

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

package.json

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