feat: update color handling for dark mode compatibility

- Updated various components to utilize `getAdaptiveLabelColor` for dynamic label color adjustments based on the current theme.
- Enhanced dark mode styles in `globals.css` for better visual consistency across components.

Made-with: Cursor

frontend/app/globals.css

@@ -584,23 +584,24 @@ select {
 .dark .bg-orange-50 { background-color: hsl(25 40% 12%) !important; }
 .dark .bg-orange-100 { background-color: hsl(25 40% 15%) !important; }
 .dark .bg-orange-200 { background-color: hsl(25 40% 20%) !important; }
-.dark .text-orange-600 { color: hsl(25 90% 55%) !important; }
+.dark .text-orange-600 { color: hsl(25 90% 65%) !important; }
-.dark .text-orange-700 { color: hsl(25 90% 50%) !important; }
+.dark .text-orange-700 { color: hsl(25 90% 70%) !important; }
 .dark .border-orange-200 { border-color: hsl(25 40% 25%) !important; }
 .dark .border-orange-300 { border-color: hsl(25 40% 30%) !important; }
 
 /* --- 18. bg/text/border - violet (필터/관계 표시) --- */
 .dark .bg-violet-50 { background-color: hsl(263 40% 12%) !important; }
-.dark .bg-violet-100 { background-color: hsl(263 40% 15%) !important; }
+.dark .bg-violet-100 { background-color: hsl(263 40% 18%) !important; }
-.dark .bg-violet-200 { background-color: hsl(263 40% 20%) !important; }
+.dark .bg-violet-200 { background-color: hsl(263 40% 22%) !important; }
-.dark .text-violet-500 { color: hsl(263 70% 60%) !important; }
+.dark .text-violet-500 { color: hsl(263 80% 70%) !important; }
-.dark .text-violet-600 { color: hsl(263 70% 55%) !important; }
+.dark .text-violet-600 { color: hsl(263 80% 65%) !important; }
-.dark .text-violet-700 { color: hsl(263 70% 50%) !important; }
+.dark .text-violet-700 { color: hsl(263 80% 72%) !important; }
-.dark .border-violet-200 { border-color: hsl(263 40% 25%) !important; }
+.dark .border-violet-200 { border-color: hsl(263 40% 30%) !important; }
-.dark .border-violet-300 { border-color: hsl(263 40% 30%) !important; }
+.dark .border-violet-300 { border-color: hsl(263 40% 35%) !important; }
 
 /* --- 19. bg/text/border - amber (조인/경고) --- */
 .dark .bg-amber-200 { background-color: hsl(38 40% 20%) !important; }
-.dark .text-amber-500 { color: hsl(38 90% 55%) !important; }
+.dark .text-amber-500 { color: hsl(38 90% 60%) !important; }
+.dark .text-amber-600 { color: hsl(38 90% 65%) !important; }
 
 /* ===== End Dark Mode Compatibility Layer ===== */

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -27,6 +27,8 @@ import {
   subscribeDom as canvasSplitSubscribeDom,
 } from "@/lib/registry/components/v2-split-line/canvasSplitStore";
 
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
+
 // 컴포넌트 렌더러들을 강제로 로드하여 레지스트리에 등록
 import "@/lib/registry/components/ButtonRenderer";
 import "@/lib/registry/components/CardRenderer";
@@ -1288,7 +1290,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
       className="text-sm font-medium leading-none"
       style={{
         fontSize: style?.labelFontSize || "14px",
-        color: style?.labelColor || "hsl(var(--foreground))",
+        color: getAdaptiveLabelColor(style?.labelColor),
         fontWeight: style?.labelFontWeight || "500",
         ...(isHorizLabel ? { whiteSpace: "nowrap" as const, display: "flex", alignItems: "center" } : {}),
         ...(labelPos === "bottom" ? { marginTop: style?.labelMarginBottom || "4px" } : {}),
@@ -1344,7 +1346,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
                     ? { right: "100%", marginRight: labelGapValue }
                     : { left: "100%", marginLeft: labelGapValue }),
                   fontSize: style?.labelFontSize || "14px",
-                  color: style?.labelColor || "hsl(var(--foreground))",
+                  color: getAdaptiveLabelColor(style?.labelColor),
                   fontWeight: style?.labelFontWeight || "500",
                   whiteSpace: "nowrap",
                 }}

frontend/components/v2/V2Biz.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
+
 /**
  * V2Biz
  * 
@@ -335,7 +337,7 @@ export const V2Biz = forwardRef<HTMLDivElement, V2BizProps>(
               top: `-${estimatedLabelHeight}px`,
               left: 0,
               fontSize: style?.labelFontSize || "14px",
-              color: style?.labelColor || "#64748b",
+              color: getAdaptiveLabelColor(style?.labelColor),
               fontWeight: style?.labelFontWeight || "500",
             }}
             className="text-sm font-medium whitespace-nowrap"

frontend/components/v2/V2Date.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
+
 /**
  * V2Date
  *
@@ -719,7 +721,7 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
         ...(labelPos === "top" ? { position: "absolute" as const, top: `-${estimatedLabelHeight}px`, left: 0 } : {}),
         ...(labelPos === "bottom" ? { position: "absolute" as const, bottom: `-${estimatedLabelHeight}px`, left: 0 } : {}),
         fontSize: style?.labelFontSize || "14px",
-        color: style?.labelColor || "#64748b",
+        color: getAdaptiveLabelColor(style?.labelColor),
         fontWeight: style?.labelFontWeight || "500",
       }}
       className="text-sm font-medium whitespace-nowrap"
@@ -754,7 +756,7 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
           htmlFor={id}
           style={{
             fontSize: style?.labelFontSize || "14px",
-            color: style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(style?.labelColor),
             fontWeight: style?.labelFontWeight || "500",
           }}
           className="w-full text-sm font-medium whitespace-nowrap sm:w-[120px] sm:shrink-0"

frontend/components/v2/V2Hierarchy.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
+
 /**
  * V2Hierarchy
  * 
@@ -486,7 +488,7 @@ export const V2Hierarchy = forwardRef<HTMLDivElement, V2HierarchyProps>(
               top: `-${estimatedLabelHeight}px`,
               left: 0,
               fontSize: style?.labelFontSize || "14px",
-              color: style?.labelColor || "#64748b",
+              color: getAdaptiveLabelColor(style?.labelColor),
               fontWeight: style?.labelFontWeight || "500",
             }}
             className="text-sm font-medium whitespace-nowrap"

frontend/components/v2/V2Input.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
+
 /**
  * V2Input
  *
@@ -994,7 +996,7 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
         ...(labelPos === "top" ? { position: "absolute" as const, top: `-${estimatedLabelHeight}px`, left: 0 } : {}),
         ...(labelPos === "bottom" ? { position: "absolute" as const, bottom: `-${estimatedLabelHeight}px`, left: 0 } : {}),
         fontSize: style?.labelFontSize || "14px",
-        color: style?.labelColor || "#64748b",
+        color: getAdaptiveLabelColor(style?.labelColor),
         fontWeight: style?.labelFontWeight || "500",
       }}
       className="text-sm font-medium whitespace-nowrap"
@@ -1037,7 +1039,7 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
           htmlFor={id}
           style={{
             fontSize: style?.labelFontSize || "14px",
-            color: style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(style?.labelColor),
             fontWeight: style?.labelFontWeight || "500",
           }}
           className="w-full text-sm font-medium whitespace-nowrap sm:w-[120px] sm:shrink-0"

frontend/components/v2/V2Media.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
+
 /**
  * V2Media
  *
@@ -834,7 +836,7 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>((props, ref) =>
           htmlFor={id}
           style={{
             fontSize: style?.labelFontSize,
-            color: style?.labelColor,
+            color: getAdaptiveLabelColor(style?.labelColor),
             fontWeight: style?.labelFontWeight,
             marginBottom: style?.labelMarginBottom,
           }}

frontend/components/v2/V2Select.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
+
 /**
  * V2Select
  * 
@@ -1176,7 +1178,7 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
           ...(labelPos === "top" ? { position: "absolute" as const, top: `-${estimatedLabelHeight}px`, left: 0 } : {}),
           ...(labelPos === "bottom" ? { position: "absolute" as const, bottom: `-${estimatedLabelHeight}px`, left: 0 } : {}),
           fontSize: style?.labelFontSize || "14px",
-          color: style?.labelColor || "#64748b",
+          color: getAdaptiveLabelColor(style?.labelColor),
           fontWeight: style?.labelFontWeight || "500",
         }}
         className="text-sm font-medium whitespace-nowrap"
@@ -1220,7 +1222,7 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
             htmlFor={id}
             style={{
               fontSize: style?.labelFontSize || "14px",
-              color: style?.labelColor || "#64748b",
+              color: getAdaptiveLabelColor(style?.labelColor),
               fontWeight: style?.labelFontWeight || "500",
             }}
             className="w-full text-sm font-medium whitespace-nowrap sm:w-[120px] sm:shrink-0"

frontend/lib/registry/DynamicComponentRenderer.tsx

@@ -10,6 +10,8 @@ import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 import { useV2FormOptional } from "@/components/v2/V2FormContext";
 import { apiClient } from "@/lib/api/client";
 
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
+
 // 컬럼 메타데이터 캐시 (테이블명 → 컬럼 설정 맵)
 const columnMetaCache: Record<string, Record<string, any>> = {};
 const columnMetaLoading: Record<string, Promise<void>> = {};
@@ -433,7 +435,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
       if (catNeedsExternalHorizLabel) {
         const labelGap = component.style?.labelGap || "8px";
         const labelFontSize = component.style?.labelFontSize || "14px";
-        const labelColor = component.style?.labelColor || "#64748b";
+        const labelColor = getAdaptiveLabelColor(component.style?.labelColor);
         const labelFontWeight = component.style?.labelFontWeight || "500";
         const isRequired = component.required || (component as any).required;
         const isLeft = catLabelPosition === "left";
@@ -850,7 +852,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
         if (needsExternalHorizLabel) {
           const labelGap = component.style?.labelGap || "8px";
           const labelFontSize = component.style?.labelFontSize || "14px";
-          const labelColor = component.style?.labelColor || "#64748b";
+          const labelColor = getAdaptiveLabelColor(component.style?.labelColor);
           const labelFontWeight = component.style?.labelFontWeight || "500";
           const isRequired = component.required || (component as any).required;
           const isLeft = labelPosition === "left";

frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react";
 import { ComponentRendererProps } from "../../types";
 import { AccordionBasicConfig, AccordionItem, DataSourceConfig, ContentFieldConfig } from "./types";
 import { apiClient } from "@/lib/api/client";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 // 커스텀 아코디언 컴포넌트
 interface CustomAccordionProps {
@@ -692,7 +693,7 @@ export const AccordionBasicComponent: React.FC<AccordionBasicComponentProps> = (
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
           }}
         >

frontend/lib/registry/components/category-select/CategorySelectComponent.tsx

@@ -12,6 +12,7 @@ import { Label } from "@/components/ui/label";
 import { getCategoryValues } from "@/lib/api/tableCategoryValue";
 import { TableCategoryValue } from "@/types/tableCategoryValue";
 import { Loader2 } from "lucide-react";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 interface CategorySelectComponentProps {
   component?: any;
@@ -137,7 +138,7 @@ export const CategorySelectComponent: React.FC<
           top: `-${estimatedLabelHeight}px`,
           left: 0,
           fontSize: style?.labelFontSize || "14px",
-          color: style?.labelColor || "#64748b",
+          color: getAdaptiveLabelColor(style?.labelColor),
           fontWeight: style?.labelFontWeight || "500",
         }}
         className="text-sm font-medium whitespace-nowrap"

frontend/lib/registry/components/divider-line/DividerLineComponent.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { DividerLineConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface DividerLineComponentProps extends ComponentRendererProps {
   config?: DividerLineConfig;
@@ -119,7 +120,7 @@ export const DividerLineComponent: React.FC<DividerLineComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
           }}
         >

frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { ImageDisplayConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface ImageDisplayComponentProps extends ComponentRendererProps {
   config?: ImageDisplayConfig;
@@ -87,7 +88,7 @@ export const ImageDisplayComponent: React.FC<ImageDisplayComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
           }}
         >

frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { SliderBasicConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface SliderBasicComponentProps extends ComponentRendererProps {
   config?: SliderBasicConfig;
@@ -86,7 +87,7 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),

frontend/lib/registry/components/table-list/TableListComponent.tsx

@@ -9,6 +9,7 @@ import { codeCache } from "@/lib/caching/codeCache";
 import { useEntityJoinOptimization } from "@/lib/hooks/useEntityJoinOptimization";
 import { getFullImageUrl } from "@/lib/api/client";
 import { Button } from "@/components/ui/button";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 // 🆕 RelatedDataButtons 전역 레지스트리 타입 선언
 declare global {
@@ -268,7 +269,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
   // 디버그 로그 제거 (성능 최적화)
 
-  const buttonColor = component.style?.labelColor || "#212121";
+  const buttonColor = getAdaptiveLabelColor(component.style?.labelColor);
   const buttonTextColor = component.config?.buttonTextColor || "#ffffff";
 
   const gridColumns = component.gridColumns || 1;

frontend/lib/registry/components/test-input/TestInputComponent.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { TestInputConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface TestInputComponentProps extends ComponentRendererProps {
   config?: TestInputConfig;
@@ -81,7 +82,7 @@ export const TestInputComponent: React.FC<TestInputComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
           }}
         >

frontend/lib/registry/components/text-display/TextDisplayComponent.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "../../types";
 import { TextDisplayConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 
 export interface TextDisplayComponentProps extends ComponentRendererProps {
@@ -60,7 +61,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
   const textStyle: React.CSSProperties = {
     fontSize: componentConfig.fontSize || "14px",
     fontWeight: componentConfig.fontWeight || "normal",
-    color: componentConfig.color || "hsl(var(--foreground))",
+    color: getAdaptiveLabelColor(componentConfig.color),
     textAlign: componentConfig.textAlign || "left",
     backgroundColor: componentConfig.backgroundColor || "transparent",
     padding: componentConfig.padding || "0",
@@ -92,7 +93,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
           }}
         >

frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { TextareaBasicConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface TextareaBasicComponentProps extends ComponentRendererProps {
   config?: TextareaBasicConfig;
@@ -68,7 +69,7 @@ export const TextareaBasicComponent: React.FC<TextareaBasicComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),

frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { ToggleSwitchConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface ToggleSwitchComponentProps extends ComponentRendererProps {
   config?: ToggleSwitchConfig;
@@ -86,7 +87,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),

frontend/lib/registry/components/v2-divider-line/DividerLineComponent.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { DividerLineConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface DividerLineComponentProps extends ComponentRendererProps {
   config?: DividerLineConfig;
@@ -119,7 +120,7 @@ export const DividerLineComponent: React.FC<DividerLineComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
           }}
         >

frontend/lib/registry/components/v2-table-list/TableListComponent.tsx

@@ -11,6 +11,7 @@ import { getFullImageUrl } from "@/lib/api/client";
 import { getFilePreviewUrl } from "@/lib/api/file";
 import { Button } from "@/components/ui/button";
 import { v2EventBus, V2_EVENTS, V2ErrorBoundary } from "@/lib/v2-core";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 // 🖼️ 테이블 셀 이미지 썸네일 컴포넌트
 // objid인 경우 인증된 API로 blob URL 생성, 경로인 경우 직접 URL 사용
@@ -404,7 +405,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
   // 디버그 로그 제거 (성능 최적화)
 
-  const buttonColor = component.style?.labelColor || "#212121";
+  const buttonColor = getAdaptiveLabelColor(component.style?.labelColor);
   const buttonTextColor = component.config?.buttonTextColor || "#ffffff";
 
   const gridColumns = component.gridColumns || 1;

frontend/lib/registry/components/v2-text-display/TextDisplayComponent.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import { ComponentRendererProps } from "../../types";
 import { TextDisplayConfig } from "./types";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface TextDisplayComponentProps extends ComponentRendererProps {
   // 추가 props가 필요한 경우 여기에 정의
@@ -63,7 +64,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
   const textStyle: React.CSSProperties = {
     fontSize: customStyle.fontSize || componentConfig.fontSize || "14px",
     fontWeight: customStyle.fontWeight || componentConfig.fontWeight || "normal",
-    color: customStyle.color || componentConfig.color || "hsl(var(--foreground))",
+    color: getAdaptiveLabelColor(customStyle.color || componentConfig.color),
     textAlign: (customStyle.textAlign || componentConfig.textAlign || "left") as React.CSSProperties["textAlign"],
     backgroundColor: customStyle.backgroundColor || componentConfig.backgroundColor || "transparent",
     padding: componentConfig.padding || "0",

frontend/lib/utils/darkModeColor.ts

@@ -0,0 +1,18 @@
+/**
+ * 다크모드 대응 색상 유틸리티
+ * 화면 디자이너에서 기본값으로 저장된 어두운 색상을 감지하여
+ * 다크모드에서 자동으로 CSS 변수(foreground)로 대체
+ */
+
+const DEFAULT_DARK_COLORS = new Set([
+  "#212121", "#000000", "#333333", "#333", "#000",
+  "black", "#111111", "#1a1a1a", "#64748b",
+]);
+
+export const isDefaultDarkLabelColor = (color?: string): boolean => {
+  if (!color) return true;
+  return DEFAULT_DARK_COLORS.has(color.toLowerCase().trim());
+};
+
+export const getAdaptiveLabelColor = (labelColor?: string): string =>
+  isDefaultDarkLabelColor(labelColor) ? "hsl(var(--foreground))" : labelColor!;