From e12b2e5303d6192464cc70155af3c6b61febe05c Mon Sep 17 00:00:00 2001
From: ghzhost <patricknasci@ghzhost.com>
Date: Wed, 2 Sep 2026 09:06:27 +0000
Subject: [PATCH] fix(theme): configure darkMode class strategy and style
 common components (#41)

- Add `darkMode: 'class'` to tailwind.config.js so useTheme's class toggle correctly drives dark: variants
- Update common/Skeleton and common/NetworkError to use app navy and slate palette matching fixed design system
---
 src/components/common/NetworkError.tsx |  4 ++--
 src/components/common/Skeleton.tsx     | 10 +++++-----
 tailwind.config.js                     |  1 +
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/common/NetworkError.tsx b/src/components/common/NetworkError.tsx
index d9f764f..2a09a18 100644
--- a/src/components/common/NetworkError.tsx
+++ b/src/components/common/NetworkError.tsx
@@ -4,8 +4,8 @@ export function NetworkError({ onRetry, message = "Failed to load data" }: Props
   return (
     <div className="flex flex-col items-center gap-3 py-8 text-center">
       <span className="text-3xl">⚠️</span>
-      <p className="text-sm font-medium text-gray-700">{message}</p>
-      <p className="text-xs text-gray-400">Check your connection and try again</p>
+      <p className="text-sm font-medium text-slate-300">{message}</p>
+      <p className="text-xs text-slate-500">Check your connection and try again</p>
       {onRetry && (
         <button onClick={onRetry} className="btn-secondary btn-sm mt-2">
           Retry
diff --git a/src/components/common/Skeleton.tsx b/src/components/common/Skeleton.tsx
index d901a67..12ecaa5 100644
--- a/src/components/common/Skeleton.tsx
+++ b/src/components/common/Skeleton.tsx
@@ -4,19 +4,19 @@ export function Skeleton({ className = "", rows = 1 }: Props) {
   return (
     <div className="animate-pulse space-y-2">
       {Array.from({ length: rows }).map((_, i) => (
-        <div key={i} className={"bg-gray-200 dark:bg-gray-700 rounded " + (className || "h-4 w-full")} />
+        <div key={i} className={"bg-navy-700/60 rounded " + (className || "h-4 w-full")} />
       ))}
     </div>
   )
 }
 export function TransactionSkeleton() {
   return (
-    <div className="flex items-center justify-between py-3 border-b animate-pulse">
+    <div className="flex items-center justify-between py-3 border-b border-navy-700/50 animate-pulse">
       <div className="flex items-center gap-3">
-        <div className="h-8 w-8 bg-gray-200 rounded-full" />
-        <div className="space-y-1"><div className="h-3 w-32 bg-gray-200 rounded" /><div className="h-2 w-20 bg-gray-100 rounded" /></div>
+        <div className="h-8 w-8 bg-navy-700/60 rounded-full" />
+        <div className="space-y-1"><div className="h-3 w-32 bg-navy-700/60 rounded" /><div className="h-2 w-20 bg-navy-800/60 rounded" /></div>
       </div>
-      <div className="h-4 w-16 bg-gray-200 rounded" />
+      <div className="h-4 w-16 bg-navy-700/60 rounded" />
     </div>
   )
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 6563969..0742f30 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class',
   content: [
     './index.html',
     './src/**/*.{js,ts,jsx,tsx}',