From 45c3f2ee07d314f32ebf6fe776d8c63d29b854be Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <hi@jhbruhn.de>
Date: Sun, 7 Dec 2025 13:52:08 +0100
Subject: [PATCH] Add dark mode support to skeleton loaders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update all skeleton components to properly support dark mode with appropriate color variants for backgrounds, borders, and gradients.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/SkeletonLoader.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/SkeletonLoader.tsx b/src/components/SkeletonLoader.tsx
index 13ffd5c..73b4f4d 100644
--- a/src/components/SkeletonLoader.tsx
+++ b/src/components/SkeletonLoader.tsx
@@ -4,7 +4,7 @@ interface SkeletonLoaderProps {
 }
 
 export function SkeletonLoader({ className = '', variant = 'rect' }: SkeletonLoaderProps) {
-  const baseClasses = 'animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%]';
+  const baseClasses = 'animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 bg-[length:200%_100%]';
 
   const variantClasses = {
     text: 'h-4 rounded',
@@ -19,17 +19,17 @@ export function SkeletonLoader({ className = '', variant = 'rect' }: SkeletonLoa
 
 export function PatternCanvasSkeleton() {
   return (
-    <div className="bg-white p-6 rounded-lg shadow-md">
-      <div className="flex items-center justify-between mb-4 pb-2 border-b-2 border-gray-300">
+    <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
+      <div className="flex items-center justify-between mb-4 pb-2 border-b-2 border-gray-300 dark:border-gray-600">
         <SkeletonLoader className="h-7 w-40" variant="text" />
       </div>
-      <div className="relative w-full h-[600px] border border-gray-300 rounded bg-gray-50 overflow-hidden">
+      <div className="relative w-full h-[600px] border border-gray-300 dark:border-gray-600 rounded bg-gray-50 dark:bg-gray-900 overflow-hidden">
         <div className="flex items-center justify-center h-full">
           <div className="text-center space-y-4">
             <div className="relative w-24 h-24 mx-auto">
               <SkeletonLoader className="w-24 h-24" variant="circle" />
               <div className="absolute inset-0 flex items-center justify-center">
-                <svg className="w-12 h-12 text-gray-400 animate-spin" fill="none" viewBox="0 0 24 24">
+                <svg className="w-12 h-12 text-gray-400 dark:text-gray-500 animate-spin" fill="none" viewBox="0 0 24 24">
                   <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                   <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                 </svg>
@@ -50,7 +50,7 @@ export function PatternInfoSkeleton() {
   return (
     <div className="mt-4">
       <SkeletonLoader className="h-6 w-40 mb-4" variant="text" />
-      <div className="bg-gray-50 p-4 rounded-lg space-y-3">
+      <div className="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg space-y-3">
         {[1, 2, 3, 4].map((i) => (
           <div key={i} className="flex justify-between">
             <SkeletonLoader className="h-4 w-24" variant="text" />
@@ -64,8 +64,8 @@ export function PatternInfoSkeleton() {
 
 export function MachineConnectionSkeleton() {
   return (
-    <div className="bg-white p-6 rounded-lg shadow-md">
-      <div className="flex items-center justify-between mb-4 pb-2 border-b-2 border-gray-300">
+    <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
+      <div className="flex items-center justify-between mb-4 pb-2 border-b-2 border-gray-300 dark:border-gray-600">
         <SkeletonLoader className="h-7 w-48" variant="text" />
       </div>
       <div className="space-y-4">
@@ -73,7 +73,7 @@ export function MachineConnectionSkeleton() {
           <SkeletonLoader className="h-4 w-16" variant="text" />
           <SkeletonLoader className="h-8 w-32 rounded-lg" />
         </div>
-        <div className="bg-gray-50 p-4 rounded-lg space-y-2">
+        <div className="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg space-y-2">
           <div className="flex justify-between">
             <SkeletonLoader className="h-4 w-20" variant="text" />
             <SkeletonLoader className="h-4 w-24" variant="text" />