diff --git a/apps/fronted/src/app/globals.css b/apps/fronted/src/app/globals.css
index 92507c7..0dd7cd9 100644
--- a/apps/fronted/src/app/globals.css
+++ b/apps/fronted/src/app/globals.css
@@ -161,3 +161,4 @@ hr {
   border-top: 1px solid gray;
   margin: 2rem 0;
 }
+
diff --git a/apps/fronted/src/app/workbench/page.tsx b/apps/fronted/src/app/workbench/page.tsx
index 59c33fe..a8c7b81 100644
--- a/apps/fronted/src/app/workbench/page.tsx
+++ b/apps/fronted/src/app/workbench/page.tsx
@@ -9,6 +9,7 @@ import { EditPanel } from "@/components/editor/EditPanel";
 import { PreviewPanel } from "@/components/editor/PreviewPanel";
 import { getThemeConfig } from "@/theme/themeConfig";
 import { Eye, Edit2, Menu } from "lucide-react";
+import { useScrollbarTheme } from "@/hooks/useScrollBarTheme";
 
 export default function Home() {
   const theme = useResumeStore((state) => state.theme);
@@ -18,6 +19,7 @@ export default function Home() {
   // 移动端状态管理
   const [showSidebar, setShowSidebar] = useState(false);
   const [isPreviewMode, setIsPreviewMode] = useState(false);
+  useScrollbarTheme();
 
   // 移动端切换按钮
   const MobileNav = () => (
diff --git a/apps/fronted/src/hooks/useScrollBarTheme.ts b/apps/fronted/src/hooks/useScrollBarTheme.ts
new file mode 100644
index 0000000..501178b
--- /dev/null
+++ b/apps/fronted/src/hooks/useScrollBarTheme.ts
@@ -0,0 +1,82 @@
+import { useEffect } from "react";
+import { useResumeStore } from "../store/useResumeStore"; // 调整路径到你的 store 文件
+
+export const useScrollbarTheme = () => {
+  const theme = useResumeStore((state) => state.theme);
+
+  useEffect(() => {
+    // 创建样式元素
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("id", "scrollbar-style");
+
+    // 根据主题设置不同的滚动条样式
+    const scrollbarStyles =
+      theme === "dark"
+        ? `
+        ::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
+        }
+        
+        ::-webkit-scrollbar-track {
+          background: #2d2d2d;
+          border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+          background: #666;
+          border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+          background: #888;
+        }
+        
+        * {
+          scrollbar-width: thin;
+          scrollbar-color: #666 #2d2d2d;
+        }
+      `
+        : `
+        ::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
+        }
+        
+        ::-webkit-scrollbar-track {
+          background: #f1f1f1;
+          border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+          background: #c1c1c1;
+          border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+          background: #a8a8a8;
+        }
+        
+        * {
+          scrollbar-width: thin;
+          scrollbar-color: #c1c1c1 #f1f1f1;
+        }
+      `;
+
+    styleElement.textContent = scrollbarStyles;
+
+    // 移除旧的样式（如果存在）
+    const existingStyle = document.getElementById("scrollbar-style");
+    if (existingStyle) {
+      existingStyle.remove();
+    }
+
+    // 添加新样式
+    document.head.appendChild(styleElement);
+
+    // 清理函数
+    return () => {
+      styleElement.remove();
+    };
+  }, [theme]);
+};
diff --git a/apps/fronted/tailwind.config.ts b/apps/fronted/tailwind.config.ts
index f613e42..850aadc 100644
--- a/apps/fronted/tailwind.config.ts
+++ b/apps/fronted/tailwind.config.ts
@@ -1,106 +1,106 @@
-import type { Config } from "tailwindcss"
+import type { Config } from "tailwindcss";
 
 const config = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-	],
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}"
+  ],
   prefix: "",
   theme: {
-  	container: {
-  		center: 'true',
-  		padding: '2rem',
-  		screens: {
-  			'2xl': '1400px'
-  		}
-  	},
-  	extend: {
-  		colors: {
-  			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: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			}
-  		},
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		},
-  		keyframes: {
-  			'accordion-down': {
-  				from: {
-  					height: '0'
-  				},
-  				to: {
-  					height: 'var(--radix-accordion-content-height)'
-  				}
-  			},
-  			'accordion-up': {
-  				from: {
-  					height: 'var(--radix-accordion-content-height)'
-  				},
-  				to: {
-  					height: '0'
-  				}
-  			},
-  			'accordion-down': {
-  				from: {
-  					height: '0'
-  				},
-  				to: {
-  					height: 'var(--radix-accordion-content-height)'
-  				}
-  			},
-  			'accordion-up': {
-  				from: {
-  					height: 'var(--radix-accordion-content-height)'
-  				},
-  				to: {
-  					height: '0'
-  				}
-  			}
-  		},
-  		animation: {
-  			'accordion-down': 'accordion-down 0.2s ease-out',
-  			'accordion-up': 'accordion-up 0.2s ease-out',
-  			'accordion-down': 'accordion-down 0.2s ease-out',
-  			'accordion-up': 'accordion-up 0.2s ease-out'
-  		}
-  	}
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px"
+      }
+    },
+    extend: {
+      colors: {
+        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: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))"
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))"
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))"
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))"
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))"
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))"
+        }
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)"
+      },
+      keyframes: {
+        "accordion-down": {
+          from: {
+            height: "0"
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)"
+          }
+        },
+        "accordion-up": {
+          from: {
+            height: "var(--radix-accordion-content-height)"
+          },
+          to: {
+            height: "0"
+          }
+        },
+        "accordion-down": {
+          from: {
+            height: "0"
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)"
+          }
+        },
+        "accordion-up": {
+          from: {
+            height: "var(--radix-accordion-content-height)"
+          },
+          to: {
+            height: "0"
+          }
+        }
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out"
+      }
+    }
   },
-  plugins: [require("tailwindcss-animate")],
-} satisfies Config
+  plugins: [require("tailwindcss-animate")]
+} satisfies Config;
 
-export default config
\ No newline at end of file
+export default config;