diff --git a/apps/desktop/src/main/index.ts b/apps/desktop/src/main/index.ts
index d055ce3..269ec0b 100644
--- a/apps/desktop/src/main/index.ts
+++ b/apps/desktop/src/main/index.ts
@@ -14,6 +14,7 @@ function createWindow() {
   win = new BrowserWindow({
     width: 1200, height: 760, minWidth: 900, minHeight: 580,
     center: true, frame: false, show: false,
+    transparent: true, backgroundColor: '#00000000', backgroundMaterial: 'acrylic',
     webPreferences: {
       preload: nodePath.join(__dirname, '../preload/index.mjs'),
       contextIsolation: true, nodeIntegration: false, sandbox: false
diff --git a/apps/desktop/src/renderer/App.tsx b/apps/desktop/src/renderer/App.tsx
index 071bb49..6ede068 100644
--- a/apps/desktop/src/renderer/App.tsx
+++ b/apps/desktop/src/renderer/App.tsx
@@ -43,7 +43,7 @@ export function App() {
   // 编辑器样式随设置生效（FR-编辑器设置真实生效）
   useEffect(() => { document.documentElement.style.setProperty('--editor-font-size', settings.fontSize + 'px'); document.documentElement.style.setProperty('--editor-font-family', settings.fontFamily); document.documentElement.style.setProperty('--editor-white-space', settings.wordWrap ? 'pre-wrap' : 'pre'); }, [settings.fontSize, settings.fontFamily, settings.wordWrap]);
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', background: '#1a1a1a', color: '#ddd' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', background: 'var(--bg-primary, #1a1a1a)', color: '#ddd' }}>
       <TitleBar view={view} onToggleView={() => setView(v => v === 'editor' ? 'graph' : 'editor')} onSettings={() => setShowSettings(true)} onAppearance={() => setShowAppearance(true)} onToggleSidebar={() => layout.toggleSidebar()} onToggleMinimal={() => layout.toggleMinimal()} minimal={layout.minimal} />
       <Toolbar />
       {view === 'editor' && <TabBar />}