diff --git a/src/global.css b/src/global.css
index 89f6093..9f9c08c 100644
--- a/src/global.css
+++ b/src/global.css
@@ -29,6 +29,8 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
+    --graph: #3f3f46;
+    --graph-group: #a1a1aa;
   }
 
   .dark {
@@ -56,6 +58,8 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    --graph: #d4d4d8;
+    --graph-group: #52525b;
   }
 }
 
diff --git a/src/modules/graph/end-connect.tsx b/src/modules/graph/end-connect.tsx
index 7e73c3c..196da95 100644
--- a/src/modules/graph/end-connect.tsx
+++ b/src/modules/graph/end-connect.tsx
@@ -26,7 +26,7 @@ const EndConnect: React.FC<Props> = React.memo((props) => {
     A2 = `A5 5 0 0 1, ${end[0] - 10},${end[1]}`
   }
   const path = M + L1 + A1 + L2 + A2 + L3
-  return <path d={path} className="stroke-[1.5] stroke-foreground/60" fill="none"></path>
+  return <path d={path} className="stroke-[1.5] stroke-graph" fill="none"></path>
 })
 EndConnect.displayName = 'EndConnect'
 
diff --git a/src/modules/graph/group-like.tsx b/src/modules/graph/group-like.tsx
index fb1bc05..d5e31cc 100644
--- a/src/modules/graph/group-like.tsx
+++ b/src/modules/graph/group-like.tsx
@@ -44,7 +44,7 @@ function GroupLikeNode({ x, y, node, selected }: Props) {
         height={contentSize[1]}
         rx={GRAPH_NODE_BORDER_RADIUS}
         ry={GRAPH_NODE_BORDER_RADIUS}
-        className="stroke-[1.5] stroke-foreground/30 fill-transparent "
+        className="stroke-[1.5] stroke-graph-group fill-transparent "
       >
         {nodeChildren.length > 0 && (
           <>
diff --git a/src/modules/graph/mid-connect.tsx b/src/modules/graph/mid-connect.tsx
index 1258462..fd7ce42 100644
--- a/src/modules/graph/mid-connect.tsx
+++ b/src/modules/graph/mid-connect.tsx
@@ -7,7 +7,7 @@ type Props = {
 const MidConnect: React.FC<Props> = React.memo((props) => {
   const { start, end } = props
   const path = `M${start[0]},${start[1]}L${end[0]},${end[1]}`
-  return <path d={path} className="stroke-[1.5] stroke-foreground/60" fill="none"></path>
+  return <path d={path} className="stroke-[1.5] stroke-graph" fill="none"></path>
 })
 MidConnect.displayName = 'MidConnect'
 
diff --git a/src/modules/graph/root-nodes.tsx b/src/modules/graph/root-nodes.tsx
index d40cbf0..bdd0743 100644
--- a/src/modules/graph/root-nodes.tsx
+++ b/src/modules/graph/root-nodes.tsx
@@ -11,7 +11,7 @@ const RootNode = React.memo(({ cx, cy }: RootNodeProps) => (
     cx={cx}
     cy={cy}
     r={GRAPH_ROOT_RADIUS}
-    className="stroke-[1.5] stroke-foreground/60 fill-transparent"
+    className="stroke-[1.5] stroke-graph fill-transparent"
   />
 ))
 RootNode.displayName = 'RootNode'
diff --git a/src/modules/graph/simple-node.tsx b/src/modules/graph/simple-node.tsx
index 8a5d3cc..db015c6 100644
--- a/src/modules/graph/simple-node.tsx
+++ b/src/modules/graph/simple-node.tsx
@@ -43,7 +43,7 @@ function SimpleNode({ x, y, node, selected }: Props) {
         rx={GRAPH_NODE_BORDER_RADIUS}
         ry={GRAPH_NODE_BORDER_RADIUS}
         fill="transparent"
-        className="stroke-[1.5] stroke-foreground/60"
+        className="stroke-[1.5] stroke-graph"
       >
         <foreignObject
           x={contentX + GRAPH_NODE_PADDING_HORIZONTAL}
diff --git a/src/modules/graph/start-connect.tsx b/src/modules/graph/start-connect.tsx
index b315257..167dc22 100644
--- a/src/modules/graph/start-connect.tsx
+++ b/src/modules/graph/start-connect.tsx
@@ -26,7 +26,7 @@ const StartConnect: React.FC<Props> = React.memo((props) => {
     A2 = `A5 5 0 0 1, ${start[0] + 20},${end[1]}`
   }
   const path = M + L1 + A1 + L2 + A2 + L3
-  return <path d={path} className="stroke-[1.5] stroke-foreground/60" fill="none"></path>
+  return <path d={path} className="stroke-[1.5] stroke-graph" fill="none"></path>
 })
 StartConnect.displayName = 'StartConnect'
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6fdbc6b..12d546a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -20,39 +20,41 @@ export default {
     },
     extend: {
       colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
+        'border': 'hsl(var(--border))',
+        'input': 'hsl(var(--input))',
+        'ring': 'hsl(var(--ring))',
+        'background': 'hsl(var(--background))',
+        'foreground': 'hsl(var(--foreground))',
+        'primary': {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',
         },
-        secondary: {
+        'secondary': {
           DEFAULT: 'hsl(var(--secondary))',
           foreground: 'hsl(var(--secondary-foreground))',
         },
-        destructive: {
+        'destructive': {
           DEFAULT: 'hsl(var(--destructive))',
           foreground: 'hsl(var(--destructive-foreground))',
         },
-        muted: {
+        'muted': {
           DEFAULT: 'hsl(var(--muted))',
           foreground: 'hsl(var(--muted-foreground))',
         },
-        accent: {
+        'accent': {
           DEFAULT: 'hsl(var(--accent))',
           foreground: 'hsl(var(--accent-foreground))',
         },
-        popover: {
+        'popover': {
           DEFAULT: 'hsl(var(--popover))',
           foreground: 'hsl(var(--popover-foreground))',
         },
-        card: {
+        'card': {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        'graph': 'var(--graph)',
+        'graph-group': 'var(--graph-group)',
       },
       borderRadius: {
         lg: 'var(--radius)',