From 83b8f2e72fbf9509bd9ce435010eb3fe7c94d3d1 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 15 Aug 2026 23:01:43 +0900
Subject: [PATCH] style(fe): apply theme-aware colors to SkeletonLoader

- Light theme: neutral-100/200 with white background
- Dark theme: dark grays (2d3748/4a5568) with dark background
- Uses CSS variables for dark mode support
- Shimmer animation adapts to theme
- Automatic light/dark switching via prefers-color-scheme

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../shared/ui/components/SkeletonLoader.vue   | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/frontend/src/shared/ui/components/SkeletonLoader.vue b/frontend/src/shared/ui/components/SkeletonLoader.vue
index 99eb0819..197539dc 100644
--- a/frontend/src/shared/ui/components/SkeletonLoader.vue
+++ b/frontend/src/shared/ui/components/SkeletonLoader.vue
@@ -72,7 +72,12 @@ defineProps<Props>()
 }
 
 .skeleton-line, .skeleton-cell, .skeleton-header-cell, .skeleton-avatar {
-  background: linear-gradient(90deg, var(--ks-color-neutral-100) 25%, var(--ks-color-neutral-200) 37%, var(--ks-color-neutral-100) 63%);
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-base) 25%,
+    var(--skeleton-highlight) 37%,
+    var(--skeleton-base) 63%
+  );
   background-size: 400% 100%;
   animation: skeleton-shimmer 1.4s ease infinite;
   border-radius: var(--ks-radius-sm);
@@ -85,8 +90,8 @@ defineProps<Props>()
 
 .skeleton-card {
   padding: var(--ks-space-3);
-  background: #fff;
-  border: 1px solid var(--ks-color-neutral-200);
+  background: var(--skeleton-bg);
+  border: 1px solid var(--skeleton-border);
   border-radius: var(--ks-radius-md);
 }
 
@@ -103,10 +108,26 @@ defineProps<Props>()
   display: flex;
   flex-direction: column;
   gap: 4px;
-  border: 1px solid var(--ks-color-neutral-200);
+  border: 1px solid var(--skeleton-border);
   border-radius: var(--ks-radius-md);
   padding: 6px;
-  background: #fff;
+  background: var(--skeleton-bg);
+}
+
+:root {
+  --skeleton-base: var(--ks-color-neutral-100, #f3f4f6);
+  --skeleton-highlight: var(--ks-color-neutral-200, #e5e7eb);
+  --skeleton-bg: #ffffff;
+  --skeleton-border: var(--ks-color-neutral-200, #e5e7eb);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --skeleton-base: #2d3748;
+    --skeleton-highlight: #4a5568;
+    --skeleton-bg: #1a202c;
+    --skeleton-border: #4a5568;
+  }
 }
 
 .skeleton-table-header {