feat: add next-themes package and update styles

- Added `next-themes` package for theme management.
- Updated various components to use `hsl(var(--foreground))` for color consistency.
- Changed background colors from `bg-white` to `bg-card` in multiple components for better theming support.

Made-with: Cursor

frontend/app/globals.css

@@ -533,4 +533,74 @@ select {
 .dark .text-slate-700 { color: hsl(var(--foreground) / 0.8) !important; }
 .dark .border-slate-200 { border-color: hsl(var(--border)) !important; }
 
+/* --- 11. bg-white opacity 변형 --- */
+.dark .bg-white\/30 { background-color: hsl(var(--card) / 0.3) !important; }
+.dark .bg-white\/50 { background-color: hsl(var(--card) / 0.5) !important; }
+.dark .bg-white\/80 { background-color: hsl(var(--card) / 0.8) !important; }
+.dark .bg-white\/90 { background-color: hsl(var(--card) / 0.9) !important; }
+.dark .hover\:bg-white:hover { background-color: hsl(var(--card)) !important; }
+
+/* --- 12. text-black → foreground --- */
+.dark .text-black { color: hsl(var(--foreground)) !important; }
+
+/* --- 13. bg/text/border - purple (관리 UI) --- */
+.dark .bg-purple-50 { background-color: hsl(270 40% 12%) !important; }
+.dark .bg-purple-100 { background-color: hsl(270 40% 15%) !important; }
+.dark .bg-purple-200 { background-color: hsl(270 40% 20%) !important; }
+.dark .text-purple-500 { color: hsl(270 70% 60%) !important; }
+.dark .text-purple-600 { color: hsl(270 70% 55%) !important; }
+.dark .text-purple-700 { color: hsl(270 70% 50%) !important; }
+.dark .border-purple-200 { border-color: hsl(270 40% 25%) !important; }
+.dark .border-purple-300 { border-color: hsl(270 40% 30%) !important; }
+
+/* --- 14. bg/text/border - indigo --- */
+.dark .bg-indigo-50 { background-color: hsl(231 40% 12%) !important; }
+.dark .bg-indigo-100 { background-color: hsl(231 40% 15%) !important; }
+.dark .text-indigo-600 { color: hsl(231 70% 60%) !important; }
+.dark .text-indigo-700 { color: hsl(231 70% 55%) !important; }
+.dark .border-indigo-200 { border-color: hsl(231 40% 25%) !important; }
+
+/* --- 15. bg/text - pink/rose (상태 뱃지) --- */
+.dark .bg-pink-50 { background-color: hsl(330 40% 12%) !important; }
+.dark .bg-pink-100 { background-color: hsl(330 40% 15%) !important; }
+.dark .text-pink-600 { color: hsl(330 70% 60%) !important; }
+.dark .text-pink-700 { color: hsl(330 70% 55%) !important; }
+.dark .bg-rose-50 { background-color: hsl(350 40% 12%) !important; }
+.dark .bg-rose-100 { background-color: hsl(350 40% 15%) !important; }
+.dark .text-rose-600 { color: hsl(350 70% 60%) !important; }
+.dark .text-rose-700 { color: hsl(350 70% 55%) !important; }
+
+/* --- 16. bg/text - cyan/teal (정보/상태) --- */
+.dark .bg-cyan-50 { background-color: hsl(187 40% 12%) !important; }
+.dark .bg-cyan-100 { background-color: hsl(187 40% 15%) !important; }
+.dark .text-cyan-600 { color: hsl(187 70% 55%) !important; }
+.dark .text-cyan-700 { color: hsl(187 70% 50%) !important; }
+.dark .bg-teal-50 { background-color: hsl(162 40% 12%) !important; }
+.dark .bg-teal-100 { background-color: hsl(162 40% 15%) !important; }
+.dark .text-teal-600 { color: hsl(162 70% 55%) !important; }
+.dark .text-teal-700 { color: hsl(162 70% 50%) !important; }
+
+/* --- 17. bg/text - orange (경고 변형) --- */
+.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-700 { color: hsl(25 90% 50%) !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-200 { background-color: hsl(263 40% 20%) !important; }
+.dark .text-violet-500 { color: hsl(263 70% 60%) !important; }
+.dark .text-violet-600 { color: hsl(263 70% 55%) !important; }
+.dark .text-violet-700 { color: hsl(263 70% 50%) !important; }
+.dark .border-violet-200 { border-color: hsl(263 40% 25%) !important; }
+.dark .border-violet-300 { border-color: hsl(263 40% 30%) !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; }
+
 /* ===== End Dark Mode Compatibility Layer ===== */

frontend/components/screen/EditModal.tsx

@@ -1474,7 +1474,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
             >
             <div
               data-screen-runtime="true"
-              className="relative m-auto bg-white"
+              className="relative m-auto bg-card"
               style={{
                 width: screenDimensions?.width || 800,
                 // 조건부 레이어가 활성화되면 높이 자동 확장

frontend/components/screen/InteractiveScreenViewer.tsx

@@ -2217,7 +2217,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
   const labelStyle: React.CSSProperties = {
     fontSize: component.style?.labelFontSize || "14px",
-    color: component.style?.labelColor || "#212121",
+    color: component.style?.labelColor || "hsl(var(--foreground))",
     fontWeight: component.style?.labelFontWeight || "500",
     backgroundColor: component.style?.labelBackgroundColor || "transparent",
     padding: component.style?.labelPadding || "0",

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -1288,7 +1288,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
       className="text-sm font-medium leading-none"
       style={{
         fontSize: style?.labelFontSize || "14px",
-        color: style?.labelColor || "#212121",
+        color: style?.labelColor || "hsl(var(--foreground))",
         fontWeight: style?.labelFontWeight || "500",
         ...(isHorizLabel ? { whiteSpace: "nowrap" as const, display: "flex", alignItems: "center" } : {}),
         ...(labelPos === "bottom" ? { marginTop: style?.labelMarginBottom || "4px" } : {}),
@@ -1344,7 +1344,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
                     ? { right: "100%", marginRight: labelGapValue }
                     : { left: "100%", marginLeft: labelGapValue }),
                   fontSize: style?.labelFontSize || "14px",
-                  color: style?.labelColor || "#212121",
+                  color: style?.labelColor || "hsl(var(--foreground))",
                   fontWeight: style?.labelFontWeight || "500",
                   whiteSpace: "nowrap",
                 }}

frontend/components/screen/ScreenNode.tsx

@@ -221,7 +221,7 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
       </div>
 
       {/* 화면 미리보기 영역 (컴팩트) */}
-      <div className="h-[140px] overflow-hidden bg-slate-50 p-2">
+      <div className="h-[140px] overflow-hidden bg-muted/50 p-2">
         {layoutSummary ? (
           <ScreenPreview layoutSummary={layoutSummary} screenType={screenType} />
         ) : (
@@ -233,11 +233,11 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
       </div>
 
       {/* 필드 매핑 영역 */}
-      <div className="flex-1 overflow-hidden border-t border-slate-200 bg-white px-2 py-1.5">
-        <div className="mb-1 flex items-center gap-1 text-[9px] font-medium text-slate-500">
+      <div className="flex-1 overflow-hidden border-t border-border bg-card px-2 py-1.5">
+        <div className="mb-1 flex items-center gap-1 text-[9px] font-medium text-muted-foreground">
           <Columns3 className="h-3 w-3" />
           <span>필드 매핑</span>
-          <span className="ml-auto text-[8px] text-slate-400">
+          <span className="ml-auto text-[8px] text-muted-foreground/70">
             {layoutSummary?.layoutItems?.filter(i => i.label && !i.componentKind?.includes('button')).length || 0}개
           </span>
         </div>
@@ -319,7 +319,7 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 그리드 화면 일러스트
   if (screenType === "grid") {
   return (
-      <div className="flex h-full flex-col gap-2 rounded-lg border border-slate-200 bg-muted/30 p-3">
+      <div className="flex h-full flex-col gap-2 rounded-lg border border-border bg-muted/30 p-3">
         {/* 상단 툴바 */}
         <div className="flex items-center gap-2">
           <div className="h-4 w-16 rounded bg-pink-400/80 shadow-sm" />
@@ -337,19 +337,19 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
         {/* 테이블 행들 */}
         <div className="flex flex-1 flex-col gap-1 overflow-hidden">
           {[...Array(7)].map((_, i) => (
-            <div key={i} className={`flex gap-1 rounded px-2 py-1.5 ${i % 2 === 0 ? "bg-slate-100" : "bg-white"}`}>
+            <div key={i} className={`flex gap-1 rounded px-2 py-1.5 ${i % 2 === 0 ? "bg-muted" : "bg-card"}`}>
               {[...Array(5)].map((_, j) => (
-                <div key={j} className="h-2 flex-1 rounded bg-slate-300/70" />
+                <div key={j} className="h-2 flex-1 rounded bg-muted-foreground/30" />
               ))}
             </div>
           ))}
         </div>
         {/* 페이지네이션 */}
         <div className="flex items-center justify-center gap-2 pt-1">
-          <div className="h-2.5 w-4 rounded bg-slate-300" />
+          <div className="h-2.5 w-4 rounded bg-muted-foreground/40" />
           <div className="h-2.5 w-4 rounded bg-primary" />
-          <div className="h-2.5 w-4 rounded bg-slate-300" />
-          <div className="h-2.5 w-4 rounded bg-slate-300" />
+          <div className="h-2.5 w-4 rounded bg-muted-foreground/40" />
+          <div className="h-2.5 w-4 rounded bg-muted-foreground/40" />
         </div>
         {/* 컴포넌트 수 */}
         <div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
@@ -362,17 +362,17 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 폼 화면 일러스트
   if (screenType === "form") {
     return (
-      <div className="flex h-full flex-col gap-3 rounded-lg border border-slate-200 bg-muted/30 p-3">
+      <div className="flex h-full flex-col gap-3 rounded-lg border border-border bg-muted/30 p-3">
         {/* 폼 필드들 */}
         {[...Array(6)].map((_, i) => (
           <div key={i} className="flex items-center gap-3">
-            <div className="h-2.5 w-14 rounded bg-slate-400" />
-            <div className="h-5 flex-1 rounded-md border border-slate-300 bg-white shadow-sm" />
+            <div className="h-2.5 w-14 rounded bg-muted-foreground/50" />
+            <div className="h-5 flex-1 rounded-md border border-border bg-card shadow-sm" />
           </div>
         ))}
         {/* 버튼 영역 */}
-        <div className="mt-auto flex justify-end gap-2 border-t border-slate-100 pt-3">
-          <div className="h-5 w-14 rounded-md bg-slate-300 shadow-sm" />
+        <div className="mt-auto flex justify-end gap-2 border-t border-border pt-3">
+          <div className="h-5 w-14 rounded-md bg-muted-foreground/40 shadow-sm" />
           <div className="h-5 w-14 rounded-md bg-primary shadow-sm" />
         </div>
         {/* 컴포넌트 수 */}
@@ -386,7 +386,7 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 대시보드 화면 일러스트
   if (screenType === "dashboard") {
     return (
-      <div className="grid h-full grid-cols-2 gap-2 rounded-lg border border-slate-200 bg-muted/30 p-3">
+      <div className="grid h-full grid-cols-2 gap-2 rounded-lg border border-border bg-muted/30 p-3">
         {/* 카드/차트들 */}
         <div className="rounded-lg bg-emerald-100 p-2 shadow-sm">
           <div className="mb-2 h-2.5 w-10 rounded bg-emerald-400" />
@@ -419,15 +419,15 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 액션 화면 일러스트 (버튼 중심)
   if (screenType === "action") {
     return (
-      <div className="flex h-full flex-col items-center justify-center gap-4 rounded-lg border border-slate-200 bg-muted/30 p-3">
-        <div className="rounded-full bg-slate-100 p-4 text-slate-400">
+      <div className="flex h-full flex-col items-center justify-center gap-4 rounded-lg border border-border bg-muted/30 p-3">
+        <div className="rounded-full bg-muted p-4 text-muted-foreground">
           <MousePointer2 className="h-10 w-10" />
             </div>
         <div className="flex gap-3">
           <div className="h-7 w-16 rounded-md bg-primary shadow-sm" />
-          <div className="h-7 w-16 rounded-md bg-slate-300 shadow-sm" />
+          <div className="h-7 w-16 rounded-md bg-muted-foreground/40 shadow-sm" />
             </div>
-        <div className="text-xs font-medium text-slate-400">액션 화면</div>
+        <div className="text-xs font-medium text-muted-foreground">액션 화면</div>
         {/* 컴포넌트 수 */}
         <div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
           {totalComponents}개
@@ -695,7 +695,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
           if (filterRefs.length === 0 && lookupRefs.length === 0) return null;
           
           return (
-            <div className="flex items-center gap-1.5 px-2 py-1 mb-1.5 rounded border border-slate-300 bg-slate-50 text-[9px]">
+            <div className="flex items-center gap-1.5 px-2 py-1 mb-1.5 rounded border border-border bg-muted text-[9px]">
               {/* 필터 뱃지 */}
               {filterRefs.length > 0 && (
                 <span 
@@ -861,7 +861,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
 export const LegacyScreenNode = ScreenNode;
 export const AggregateNode: React.FC<{ data: any }> = ({ data }) => {
   return (
-    <div className="rounded-lg border-2 border-purple-300 bg-white p-3 shadow-lg">
+    <div className="rounded-lg border-2 border-purple-300 bg-card p-3 shadow-lg">
       <Handle type="target" position={Position.Left} id="left" className="!h-3 !w-3 !bg-purple-500" />
       <Handle type="source" position={Position.Right} id="right" className="!h-3 !w-3 !bg-purple-500" />
       <div className="flex items-center gap-2 text-purple-600">

frontend/components/screen/ScreenRelationFlow.tsx

@@ -690,7 +690,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
             type: "smoothstep",
               label: `${i + 1}`,
               labelStyle: { fontSize: 11, fill: "#0ea5e9", fontWeight: 600 },
-              labelBgStyle: { fill: "white", stroke: "#e2e8f0", strokeWidth: 1 },
+              labelBgStyle: { fill: "hsl(var(--card))", stroke: "hsl(var(--border))", strokeWidth: 1 },
               labelBgPadding: [4, 2] as [number, number],
               markerEnd: { type: MarkerType.ArrowClosed, color: "#0ea5e9" },
             animated: true,
@@ -1007,7 +1007,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
               type: "smoothstep",
                 label: rel.relation_type === "join" ? "조인" : rel.crud_operations || "",
                 labelStyle: { fontSize: 9, fill: "#10b981" },
-                labelBgStyle: { fill: "white", stroke: "#e2e8f0", strokeWidth: 1 },
+                labelBgStyle: { fill: "hsl(var(--card))", stroke: "hsl(var(--border))", strokeWidth: 1 },
                 labelBgPadding: [3, 2] as [number, number],
               style: { stroke: "#10b981", strokeWidth: 1.5 },
             });
@@ -1030,7 +1030,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
                 animated: true,
                 label: flow.flow_label || flow.flow_type || "이동",
                 labelStyle: { fontSize: 10, fill: "#8b5cf6", fontWeight: 500 },
-                labelBgStyle: { fill: "white", stroke: "#e2e8f0", strokeWidth: 1 },
+                labelBgStyle: { fill: "hsl(var(--card))", stroke: "hsl(var(--border))", strokeWidth: 1 },
                 labelBgPadding: [4, 2] as [number, number],
                 markerEnd: { type: MarkerType.ArrowClosed, color: "#8b5cf6" },
                 style: { stroke: "#8b5cf6", strokeWidth: 2 },
@@ -2333,7 +2333,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
         maxZoom={1.5}
         proOptions={{ hideAttribution: true }}
       >
-          <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#e2e8f0" />
+          <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="hsl(var(--border))" />
         <Controls position="bottom-right" />
       </ReactFlow>
       </div>

frontend/components/screen/ScreenSettingModal.tsx

@@ -404,7 +404,7 @@ export function ScreenSettingModal({
         {/* 2컬럼 레이아웃: 왼쪽 탭(좁게) + 오른쪽 프리뷰(넓게) */}
         <div className="flex min-h-0 flex-1 gap-3">
           {/* 왼쪽: 탭 컨텐츠 (40%) */}
-          <div className="flex min-h-0 w-[40%] flex-col rounded-lg border bg-white">
+          <div className="flex min-h-0 w-[40%] flex-col rounded-lg border bg-card">
             <Tabs
               value={activeTab}
               onValueChange={setActiveTab}
@@ -511,7 +511,7 @@ export function ScreenSettingModal({
           </div>
 
           {/* 오른쪽: 화면 프리뷰 (60%, 항상 표시) */}
-          <div className="flex min-h-0 w-[60%] flex-col overflow-hidden rounded-lg border bg-white">
+          <div className="flex min-h-0 w-[60%] flex-col overflow-hidden rounded-lg border bg-card">
             <PreviewTab 
               screenId={currentScreenId} 
               screenName={currentScreenName} 
@@ -926,7 +926,7 @@ function TableColumnAccordion({
 
       {/* 펼쳐진 내용 */}
       {isOpen && (
-        <div className={`border-t border-${themeColor}-100 p-3 space-y-3 bg-white/50`}>
+        <div className={`border-t border-${themeColor}-100 p-3 space-y-3 bg-card/50`}>
           {/* 필터 연결 정보 (필터 테이블만) */}
           {!isMain && filterKeyMapping && (
             <div className="flex items-center gap-1 text-xs">
@@ -2529,7 +2529,7 @@ function FieldMappingTab({
             {componentColumns.map((comp, idx) => (
               <div
                 key={idx}
-                className="rounded-lg border bg-white overflow-hidden"
+                className="rounded-lg border bg-card overflow-hidden"
               >
                 {/* 컴포넌트 헤더 */}
                 <div className="flex items-center justify-between px-3 py-2 bg-muted border-b">
@@ -4282,7 +4282,7 @@ function ControlManagementTab({
                 );
                 const tableName = (flow as any).tableType || (flow as any).tableName;
                 return (
-                  <div key={`flow-list-${flow.flowId}`} className="flex items-center gap-2 px-2 py-1.5 rounded bg-white/50 hover:bg-white">
+                  <div key={`flow-list-${flow.flowId}`} className="flex items-center gap-2 px-2 py-1.5 rounded bg-card/50 hover:bg-card">
                     {/* 플로우 이름 - 일반 텍스트 */}
                     <Workflow className="h-3.5 w-3.5 text-purple-500 shrink-0" />
                     <span className="text-xs font-medium text-foreground shrink-0">
@@ -4744,7 +4744,7 @@ function PreviewTab({ screenId, screenName, companyCode, iframeKey = 0, canvasWi
         className="relative min-h-0 flex-1 overflow-hidden flex items-center justify-center bg-muted"
       >
         {loading && (
-          <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/80">
+          <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/80">
             <div className="text-center">
               <Loader2 className="mx-auto h-8 w-8 animate-spin text-primary" />
               <p className="mt-2 text-sm text-muted-foreground">화면 로딩 중...</p>
@@ -4797,7 +4797,7 @@ function PreviewTab({ screenId, screenName, companyCode, iframeKey = 0, canvasWi
                     key={iframeKey}
                     id="screen-preview-iframe"
                     src={previewUrl}
-                    className="border-0 shadow-lg rounded bg-white pointer-events-none"
+                    className="border-0 shadow-lg rounded bg-card pointer-events-none"
                     style={{
                       width: "100%",
                       height: "100%",

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

@@ -151,7 +151,7 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
             width: "30%",
             textAlign: "center",
             fontSize: "14px",
-            color: "#212121",
+            color: "hsl(var(--foreground))",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),

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

@@ -60,7 +60,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
   const textStyle: React.CSSProperties = {
     fontSize: componentConfig.fontSize || "14px",
     fontWeight: componentConfig.fontWeight || "normal",
-    color: componentConfig.color || "#212121",
+    color: componentConfig.color || "hsl(var(--foreground))",
     textAlign: componentConfig.textAlign || "left",
     backgroundColor: componentConfig.backgroundColor || "transparent",
     padding: componentConfig.padding || "0",

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

@@ -189,7 +189,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
         </div>
         <span
           style={{
-            color: "#212121",
+            color: "hsl(var(--foreground))",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
           }}

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

@@ -63,7 +63,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 || "#212121",
+    color: customStyle.color || componentConfig.color || "hsl(var(--foreground))",
     textAlign: (customStyle.textAlign || componentConfig.textAlign || "left") as React.CSSProperties["textAlign"],
     backgroundColor: customStyle.backgroundColor || componentConfig.backgroundColor || "transparent",
     padding: componentConfig.padding || "0",

frontend/lib/registry/layouts/accordion/AccordionLayout.tsx

@@ -147,10 +147,10 @@ const AccordionSection: React.FC<{
 
   const headerStyle: React.CSSProperties = {
     padding: "12px 16px",
-    backgroundColor: isDesignMode ? "#3b82f6" : "#f8fafc",
-    color: isDesignMode ? "white" : "#212121",
-    border: "1px solid #e2e8f0",
-    borderBottom: isExpanded ? "none" : "1px solid #e2e8f0",
+    backgroundColor: isDesignMode ? "#3b82f6" : "hsl(var(--muted))",
+    color: isDesignMode ? "white" : "hsl(var(--foreground))",
+    border: "1px solid hsl(var(--border))",
+    borderBottom: isExpanded ? "none" : "1px solid hsl(var(--border))",
     cursor: "pointer",
     userSelect: "none",
     display: "flex",
@@ -169,8 +169,8 @@ const AccordionSection: React.FC<{
     maxHeight: isExpanded ? zone.size?.height || "500px" : "0",
     overflow: "hidden",
     transition: "all 0.3s ease",
-    backgroundColor: "white",
-    border: "1px solid #e2e8f0",
+    backgroundColor: "hsl(var(--card))",
+    border: "1px solid hsl(var(--border))",
     borderTop: "none",
     borderRadius: "0 0 8px 8px",
     margin: "2px",

frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx

@@ -1351,7 +1351,7 @@ function FieldRow({
       </span>
       <MarqueeText
         className="font-medium"
-        style={{ color: field.textColor || (isFormula ? "#ea580c" : "#000000") }}
+        style={{ color: field.textColor || (isFormula ? "#ea580c" : "hsl(var(--foreground))") }}
       >
         {displayValue}
       </MarqueeText>

frontend/lib/registry/pop-components/pop-icon.tsx

@@ -426,7 +426,7 @@ export function PopIconComponent({
         <span 
           className={cn("truncate max-w-full", !isLabelRight && "mt-1")}
           style={{ 
-            color: config?.labelColor || "#000000",
+            color: config?.labelColor || "hsl(var(--foreground))",
             fontSize: config?.labelFontSize || 12,
           }}
         >

frontend/package-lock.json

@@ -71,6 +71,7 @@
         "lucide-react": "^0.525.0",
         "mammoth": "^1.11.0",
         "next": "^15.4.8",
+        "next-themes": "^0.4.6",
         "qrcode": "^1.5.4",
         "react": "19.1.0",
         "react-day-picker": "^9.11.1",
@@ -262,6 +263,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -303,6 +305,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -336,6 +339,7 @@
       "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
       "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dnd-kit/accessibility": "^3.1.1",
         "@dnd-kit/utilities": "^3.2.2",
@@ -2666,6 +2670,7 @@
       "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.4.0.tgz",
       "integrity": "sha512-k4iu1R6e5D54918V4sqmISUkI5OgTw3v7/sDRKEC632Wd5g2WBtUS5gyG63X0GJO/HZUj1tsjSXfyzwrUHZl1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/react-reconciler": "^0.32.0",
@@ -3319,6 +3324,7 @@
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.6.tgz",
       "integrity": "sha512-gB1sljYjcobZKxjPbKSa31FUTyr+ROaBdoH+wSSs9Dk+yDCmMs+TkTV3PybRRVLC7ax7q0erJ9LvRWnMktnRAw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@tanstack/query-core": "5.90.6"
       },
@@ -3386,6 +3392,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.27.1.tgz",
       "integrity": "sha512-nkerkl8syHj44ZzAB7oA2GPmmZINKBKCa79FuNvmGJrJ4qyZwlkDzszud23YteFZEytbc87kVd/fP76ROS6sLg==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -3699,6 +3706,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.27.1.tgz",
       "integrity": "sha512-ijKo3+kIjALthYsnBmkRXAuw2Tswd9gd7BUR5OMfIcjGp8v576vKxOxrRfuYiUM78GPt//P0sVc1WV82H5N0PQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "prosemirror-changeset": "^2.3.0",
         "prosemirror-collab": "^1.3.1",
@@ -6199,6 +6207,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -6209,6 +6218,7 @@
       "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -6251,6 +6261,7 @@
       "resolved": "https://registry.npmjs.org/@types/three/-/three-0.180.0.tgz",
       "integrity": "sha512-ykFtgCqNnY0IPvDro7h+9ZeLY+qjgUWv+qEvUt84grhenO60Hqd4hScHE7VTB9nOQ/3QM8lkbNE+4vKjEpUxKg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dimforge/rapier3d-compat": "~0.12.0",
         "@tweenjs/tween.js": "~23.1.3",
@@ -6333,6 +6344,7 @@
       "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.2",
         "@typescript-eslint/types": "8.46.2",
@@ -6965,6 +6977,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -8115,7 +8128,8 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/d3": {
       "version": "7.9.0",
@@ -8437,6 +8451,7 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -9196,6 +9211,7 @@
       "integrity": "sha512-iy2GE3MHrYTL5lrCtMZ0X1KLEKKUjmK0kzwcnefhR66txcEmXZD2YWgR5GNdcEwkNx3a0siYkSvl0vIC+Svjmg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -9284,6 +9300,7 @@
       "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -9385,6 +9402,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -10556,6 +10574,7 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
       "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/immer"
@@ -11336,7 +11355,8 @@
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
-      "license": "BSD-2-Clause"
+      "license": "BSD-2-Clause",
+      "peer": true
     },
     "node_modules/levn": {
       "version": "0.4.1",
@@ -12087,6 +12107,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -12665,6 +12695,7 @@
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -12958,6 +12989,7 @@
       "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.4.tgz",
       "integrity": "sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "orderedmap": "^2.0.0"
       }
@@ -12987,6 +13019,7 @@
       "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz",
       "integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "prosemirror-model": "^1.0.0",
         "prosemirror-transform": "^1.0.0",
@@ -13035,6 +13068,7 @@
       "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.41.4.tgz",
       "integrity": "sha512-WkKgnyjNncri03Gjaz3IFWvCAE94XoiEgvtr0/r2Xw7R8/IjK3sKLSiDoCHWcsXSAinVaKlGRZDvMCsF1kbzjA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "prosemirror-model": "^1.20.0",
         "prosemirror-state": "^1.0.0",
@@ -13161,6 +13195,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13230,6 +13265,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -13280,6 +13316,7 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.66.0.tgz",
       "integrity": "sha512-xXBqsWGKrY46ZqaHDo+ZUYiMUgi8suYu5kdrS20EG8KiL7VRQitEbNjm+UcrDYrNi1YLyfpmAeGjCZYXLT9YBw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -13312,7 +13349,8 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/react-leaflet": {
       "version": "5.0.0",
@@ -13620,6 +13658,7 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -13642,7 +13681,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/recharts/node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -14672,7 +14712,8 @@
       "version": "0.180.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.180.0.tgz",
       "integrity": "sha512-o+qycAMZrh+TsE01GqWUxUIKR1AL0S8pq7zDkYOQw8GqfX8b8VoCKYUoHbhiX5j+7hr8XsuHDVU6+gkQJQKg9w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/three-mesh-bvh": {
       "version": "0.8.3",
@@ -14760,6 +14801,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -15108,6 +15150,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

frontend/package.json

@@ -80,6 +80,7 @@
     "lucide-react": "^0.525.0",
     "mammoth": "^1.11.0",
     "next": "^15.4.8",
+    "next-themes": "^0.4.6",
     "qrcode": "^1.5.4",
     "react": "19.1.0",
     "react-day-picker": "^9.11.1",