WIP: dark mode Modale

components/main/kabelueberwachung/KabelueberwachungView.tsx

@@ -119,19 +119,23 @@ function KabelueberwachungView() {
   return (
     <div>
       <div className="mb-4">
-        {[1, 2, 3, 4].map((rack) => (
-          <button
-            key={rack}
-            onClick={() => changeRack(rack)}
-            className={`mr-2 ${
-              Number(activeRack) === Number(rack)
-                ? "bg-littwin-blue text-white p-1 rounded-sm"
-                : "bg-gray-300 p-1 text-sm"
-            }`}
-          >
-            Rack {rack}
-          </button>
-        ))}
+        {[1, 2, 3, 4].map((rack) => {
+          const isActive = Number(activeRack) === Number(rack);
+          return (
+            <button
+              key={rack}
+              onClick={() => changeRack(rack)}
+              aria-pressed={isActive}
+              className={`mr-2 px-2 py-1 rounded-sm text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-accent/50 ${
+                isActive
+                  ? "btn-primary"
+                  : "btn-muted text-fg-muted hover:text-fg"
+              }`}
+            >
+              Rack {rack}
+            </button>
+          );
+        })}
       </div>
       <div className="flex flex-row space-x-8 xl:space-x-0 2xl:space-x-8 qhd:space-x-16 ml-[5%] mt-[5%]">
         {(