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
This commit is contained in:
DDD1542
2026-03-10 15:24:05 +09:00
parent 42673f57a0
commit fa6f76bff1
16 changed files with 168 additions and 54 deletions
@@ -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>