WIP: dark mode

2025-09-08 15:01:34 +02:00
parent 12d3a17f60
commit d163df0d96
30 changed files with 380 additions and 262 deletions
--- a/components/main/dashboard/DashboardView.tsx
+++ b/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 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+  <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-[var(--color-background)] text-[var(--color-fg)]">
      {/* Header */}
      <div className="flex justify-between items-center w-full lg:w-2/3">
        <div className="flex justify-between gap-1">
@@ -33,7 +33,7 @@ const DashboardView: React.FC = () => {
            icon="ri:calendar-schedule-line"
            className="text-littwin-blue text-4xl xl:text-2xl"
          />
-          <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100 xl:text-base">
+          <h1 className="text-xl font-bold xl:text-base text-[var(--color-fg)] tracking-wide">
            Letzten 20 Meldungen
          </h1>
        </div>
--- a/components/main/dashboard/Last20MessagesTable.tsx
+++ b/components/main/dashboard/Last20MessagesTable.tsx
@@ -48,22 +48,22 @@ export default function Last20MessagesTable({ className }: Props) {
  return (
    <div className={`flex flex-col gap-3 p-4 ${className}`}>
      <div className="overflow-auto max-h-[80vh]">
-        <table className="min-w-full border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
-          <thead className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 text-left sticky top-0 z-10">
+        <table className="min-w-full border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-fg)]">
+          <thead className="text-left sticky top-0 z-10 bg-[var(--color-surface-alt)]/70 dark:bg-[var(--color-surface-alt)]/25 text-[var(--color-fg)]">
            <tr>
-              <th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+              <th className="p-2 border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-fg)]">
                Prio
              </th>
-              <th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+              <th className="p-2 border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-fg)]">
                Zeitstempel
              </th>
-              <th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+              <th className="p-2 border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-fg)]">
                Quelle
              </th>
-              <th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+              <th className="p-2 border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-fg)]">
                Meldung
              </th>
-              <th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+              <th className="p-2 border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-fg)]">
                Status
              </th>
            </tr>
@@ -72,24 +72,24 @@ export default function Last20MessagesTable({ className }: Props) {
            {filteredMessages.slice(0, 20).map((msg, index) => (
              <tr
                key={index}
-                className="hover:bg-gray-100 dark:hover:bg-gray-800"
+                className="hover:bg-[var(--color-surface-alt)]/70 dark:hover:bg-[var(--color-surface-alt)]/30 transition"
              >
-                <td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+                <td className="border p-2 bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]">
                  <div
                    className="w-4 h-4 rounded"
                    style={{ backgroundColor: msg.c }}
                  ></div>
                </td>
-                <td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+                <td className="border p-2 bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]">
                  {msg.t}
                </td>
-                <td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+                <td className="border p-2 bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]">
                  {msg.i}
                </td>
-                <td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+                <td className="border p-2 bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]">
                  {msg.m}
                </td>
-                <td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+                <td className="border p-2 bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]">
                  {msg.v}
                </td>
              </tr>
@@ -97,7 +97,7 @@ export default function Last20MessagesTable({ className }: Props) {
          </tbody>
        </table>
        {messages.length === 0 && (
-          <div className="mt-4 text-center text-gray-500 italic dark:text-gray-400">
+          <div className="mt-4 text-center italic text-[var(--color-fg-muted)]">
            Keine Meldungen im gewählten Zeitraum vorhanden.
          </div>
        )}
--- a/components/main/dashboard/NetworkInfo.tsx
+++ b/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 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-grow flex justify-between items-center mt-1 p-2 rounded-lg shadow-sm bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-[var(--color-border)] 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,10 +49,10 @@ const NetworkInfo: React.FC = () => {
            priority
          />
          <div>
-            <p className="text-xs text-gray-500 dark:text-gray-400">
+            <p className="text-xs text-[var(--color-fg-muted)]">
              IP-Adresse
            </p>
-            <p className="text-sm font-medium text-gray-700 dark:text-gray-200">
+            <p className="text-sm font-medium text-[var(--color-fg)]">
              {ip}
            </p>
          </div>
@@ -68,10 +68,10 @@ const NetworkInfo: React.FC = () => {
            priority
          />
          <div>
-            <p className="text-xs text-gray-500 dark:text-gray-400">
+            <p className="text-xs text-[var(--color-fg-muted)]">
              Subnet-Maske
            </p>
-            <p className="text-sm font-medium text-gray-700 dark:text-gray-200">
+            <p className="text-sm font-medium text-[var(--color-fg)]">
              {subnet}
            </p>
          </div>
@@ -87,8 +87,8 @@ const NetworkInfo: React.FC = () => {
            priority
          />
          <div>
-            <p className="text-xs text-gray-500 dark:text-gray-400">Gateway</p>
-            <p className="text-sm font-medium text-gray-700 dark:text-gray-200">
+            <p className="text-xs text-[var(--color-fg-muted)]">Gateway</p>
+            <p className="text-sm font-medium text-[var(--color-fg)]">
              {gateway}
            </p>
          </div>
@@ -97,8 +97,8 @@ const NetworkInfo: React.FC = () => {
        <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 dark:text-gray-400">Status</p>
-            <p className="text-sm font-medium text-gray-700 dark:text-gray-200">
+            <p className="text-xs text-[var(--color-fg-muted)]">Status</p>
+            <p className="text-sm font-medium text-[var(--color-fg)]">
              {opcUaZustand}
            </p>
          </div>
--- a/components/main/dashboard/VersionInfo.tsx
+++ b/components/main/dashboard/VersionInfo.tsx
@@ -4,9 +4,7 @@ import { Icon } from "@iconify/react";
 import { useSelector } from "react-redux";
 import { RootState } from "../../../redux/store";

-type VersionInfoProps = {
-  className?: string;
-};
+type VersionInfoProps = { className?: string };

 const VersionInfo: React.FC<VersionInfoProps> = ({ className = "" }) => {
  const appVersion =
@@ -17,26 +15,26 @@ const VersionInfo: React.FC<VersionInfoProps> = ({ className = "" }) => {
  );

  return (
-    <div
-      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 dark:text-gray-200 mb-2">
+    <div className={`card w-full p-3 laptop:p-2 ${className}`}>
+      <h2 className="text-base font-semibold mb-2 text-[var(--color-fg)]">
        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 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 dark:text-gray-300">
-          Webversion: {webVersion}
-        </p>
-      </div>
+      <ul className="space-y-1">
+        <li className="flex items-start gap-2">
+          <Icon icon="bx:code-block" className="text-xl text-accent" />
+          <p className="text-sm text-fg-muted">
+            Applikationsversion: {" "}
+            <span className="text-[var(--color-fg)]">{appVersion}</span>
+          </p>
+        </li>
+        <li className="flex items-start gap-2">
+          <Icon icon="mdi:web" className="text-xl text-accent" />
+          <p className="text-sm text-fg-muted">
+            Webversion: {" "}
+            <span className="text-[var(--color-fg)]">{webVersion}</span>
+          </p>
+        </li>
+      </ul>
    </div>
  );
 };