diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/FileItemMenu.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/FileItemMenu.tsx
index d3a2299..3f216c0 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/FileItemMenu.tsx
+++ b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/FileItemMenu.tsx
@@ -106,35 +106,35 @@ const FileItemMenu = ({
       label: '分享',
       action: () => onShare?.(file),
       show: !!onShare,
-      className: 'text-blue-600 hover:bg-blue-50',
+      className: 'text-[#333] hover:bg-[#e0e0e0] dark:hover:bg-[#444444]',
     },
     {
       icon: 'Download',
       label: '下载',
       action: () => onDownload?.(file),
       show: !!onDownload && file.type === 'file',
-      className: 'text-green-600 hover:bg-green-50',
+      className: 'text-[#333] hover:bg-[#e0e0e0] dark:hover:bg-[#444444]',
     },
     {
       icon: 'Copy',
       label: '复制',
       action: () => onDuplicate?.(file),
       show: !!onDuplicate,
-      className: 'text-gray-600 hover:bg-gray-50',
+      className: 'text-[#333] hover:bg-[#e0e0e0] dark:hover:bg-[#444444]',
     },
     {
       icon: 'Pencil',
       label: '重命名',
       action: () => onRename?.(file),
       show: !!onRename,
-      className: 'text-gray-600 hover:bg-gray-50',
+      className: 'text-[#333] hover:bg-[#e0e0e0] dark:hover:bg-[#444444]',
     },
     {
       icon: 'Trash',
       label: '删除',
       action: () => onDelete?.(file),
       show: !!onDelete,
-      className: 'text-red-600 hover:bg-red-50',
+      className: 'text-[#cc0000] hover:bg-[#ffe6e6] dark:hover:bg-[#442222]',
       divider: true,
     },
   ].filter((item) => item.show);
@@ -148,29 +148,31 @@ const FileItemMenu = ({
     >
       <button
         ref={buttonRef}
-        className="p-1 rounded-full hover:bg-gray-200 text-gray-500 hover:text-gray-700 transition-colors opacity-0 group-hover:opacity-100"
+        className="p-1 rounded-full hover:bg-[#e0e0e0] dark:hover:bg-[#444444] text-[#333] hover:text-[#333] transition-colors opacity-0 group-hover:opacity-100"
         onClick={handleMenuClick}
         title="更多操作"
       >
-        <Icon name="EllipsisVertical" className="h-4 w-4" />
+        <Icon name="EllipsisVertical" className="h-3.5 w-3.5" />
       </button>
 
       {isOpen && (
         <div
           ref={menuRef}
-          className="absolute right-0 top-full mt-1 z-50 bg-white shadow-lg rounded-lg border border-gray-200 py-1 min-w-[140px]"
+          className="absolute right-0 top-full mt-1 z-50 bg-[#ffffff] dark:bg-[#2a2d2e] shadow-md rounded-lg border border-[#e0e0e0] dark:border-[#444444] py-1 min-w-[140px] text-xs"
         >
           {menuItems.map((item, index) => (
             <div key={item.label}>
-              {item.divider && index > 0 && <div className="border-t border-gray-200 my-1" />}
+              {item.divider && index > 0 && (
+                <div className="border-t border-[#e0e0e0] dark:border-[#444444] my-1" />
+              )}
               <button
                 className={cn(
-                  'w-full text-left px-3 py-2 text-sm flex items-center transition-colors',
+                  'w-full text-left px-3 py-1.5 text-xs flex items-center transition-colors',
                   item.className,
                 )}
                 onClick={() => handleMenuItemClick(item.action)}
               >
-                <Icon name={item.icon as any} className="h-4 w-4 mr-2" />
+                <Icon name={item.icon as any} className="h-3.5 w-3.5 mr-1.5" />
                 {item.label}
               </button>
             </div>
diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/ContextMenu.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/ContextMenu.tsx
index ab43685..1595af7 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/ContextMenu.tsx
+++ b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/ContextMenu.tsx
@@ -132,8 +132,8 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
               )}
               onClick={() => onCreateFile(targetFile.id)}
             >
-              <div className="w-5 h-5 rounded-md bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center">
-                <Icon name="FilePlus" className="h-3 w-3 text-white" />
+              <div className="w-5 h-5 rounded-md bg-[#e0e0e0] dark:bg-[#3a3a3a] flex items-center justify-center">
+                <Icon name="FilePlus" className="h-3 w-3 text-[#333]" />
               </div>
               <span>新建文件</span>
             </button>
@@ -147,8 +147,8 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
               )}
               onClick={() => onCreateFolder(targetFile.id)}
             >
-              <div className="w-5 h-5 rounded-md bg-gradient-to-br from-yellow-400 to-amber-500 flex items-center justify-center">
-                <Icon name="FolderPlus" className="h-3 w-3 text-white" />
+              <div className="w-5 h-5 rounded-md bg-[#e0e0e0] dark:bg-[#3a3a3a] flex items-center justify-center">
+                <Icon name="FolderPlus" className="h-3 w-3 text-[#333]" />
               </div>
               <span>新建文件夹</span>
             </button>
@@ -165,8 +165,8 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
           )}
           onClick={() => onRename(targetFile?.id || '')}
         >
-          <div className="w-5 h-5 rounded-md bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
-            <Icon name="Pencil" className="h-3 w-3 text-white" />
+          <div className="w-5 h-5 rounded-md bg-[#e0e0e0] dark:bg-[#3a3a3a] flex items-center justify-center">
+            <Icon name="Pencil" className="h-3 w-3 text-[#333]" />
           </div>
           <span>重命名</span>
         </button>
diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx
index d8cc214..5cd8708 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx
+++ b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/DocumentGroupHeader.tsx
@@ -35,23 +35,10 @@ const DocumentGroupHeader: React.FC<DocumentGroupHeaderProps> = ({
     }
   };
 
-  const getGroupColor = () => {
-    switch (type) {
-      case 'personal':
-        return 'from-blue-500 to-indigo-600';
-      case 'organization':
-        return 'from-purple-500 to-pink-600';
-      case 'shared':
-        return 'from-green-500 to-emerald-600';
-      default:
-        return 'from-slate-500 to-slate-600';
-    }
-  };
-
   return (
     <div
       className={cn(
-        'flex items-center justify-between px-3 py-2.5 mx-2 my-1',
+        'flex items-center justify-between py-2.5 mx-2 my-1',
         'cursor-pointer select-none group',
         'rounded-lg transition-all duration-200',
         'hover:bg-gradient-to-r hover:from-slate-100/80 hover:to-slate-50/80',
@@ -75,11 +62,10 @@ const DocumentGroupHeader: React.FC<DocumentGroupHeaderProps> = ({
         <div
           className={cn(
             'w-5 h-5 rounded-md flex items-center justify-center flex-shrink-0',
-            'bg-gradient-to-br shadow-sm',
-            getGroupColor(),
+            'bg-gradient-to-br shadow-sm bg-[#e0e0e0] dark:bg-[#3a3a3a]',
           )}
         >
-          <Icon name={getGroupIcon() as any} className="w-3 h-3 text-white" />
+          <Icon name={getGroupIcon() as any} className="w-3 h-3 text-[#333] dark:text-[#cccccc]" />
         </div>
 
         {/* 分组名称 */}
diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/FileTree.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/FileTree.tsx
index 995fc61..acd4b0f 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/FileTree.tsx
+++ b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/FileTree.tsx
@@ -75,14 +75,12 @@ const FileTree: React.FC<FileTreeProps> = (props) => {
         <div className="w-6 h-6 mr-2 flex-shrink-0 flex items-center justify-center">
           <div
             className={cn(
-              'w-5 h-5 rounded-md flex items-center justify-center',
-              'bg-gradient-to-br from-emerald-400 to-green-500',
-              'shadow-md shadow-emerald-500/30',
+              'w-5 h-5 rounded flex items-center justify-center text-[#333] dark:text-[#cccccc]',
             )}
           >
             <Icon
               name={newItemType === 'folder' ? 'Folder' : 'FileText'}
-              className="h-3.5 w-3.5 text-white drop-shadow-sm"
+              className="h-3.5 w-3.5 text-[#333]"
             />
           </div>
         </div>
@@ -113,9 +111,8 @@ const FileTree: React.FC<FileTreeProps> = (props) => {
             <button
               className={cn(
                 'p-2 rounded-xl transition-all duration-300 transform hover:scale-110',
-                'bg-gradient-to-br from-green-500 to-emerald-600',
-                'text-white shadow-lg shadow-green-500/30',
-                'hover:from-green-600 hover:to-emerald-700',
+                'bg-[#e0e0e0] dark:bg-[#3a3a3a]',
+                'text-[#333] shadow-sm',
               )}
               onClick={() => onFinishCreateNewItem()}
               title="确认"
@@ -125,9 +122,8 @@ const FileTree: React.FC<FileTreeProps> = (props) => {
             <button
               className={cn(
                 'p-2 rounded-xl transition-all duration-300 transform hover:scale-110',
-                'bg-gradient-to-br from-red-500 to-pink-600',
-                'text-white shadow-lg shadow-red-500/30',
-                'hover:from-red-600 hover:to-pink-700',
+                'bg-[#e0e0e0] dark:bg-[#3a3a3a]',
+                'text-[#333] shadow-sm',
               )}
               onClick={onCancelCreateNewItem}
               title="取消"
diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/GroupedFileTree.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/GroupedFileTree.tsx
index 0a2fd91..036e4ee 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/GroupedFileTree.tsx
+++ b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/GroupedFileTree.tsx
@@ -72,10 +72,9 @@ const GroupedFileTree: React.FC<GroupedFileTreeProps> = (props) => {
         data-new-item-container
         className={cn(
           'flex items-center py-2 px-3 text-sm mx-2 my-0.5',
-          'bg-gradient-to-r from-green-50 via-emerald-50/80 to-green-50',
-          'dark:from-green-900/20 dark:via-emerald-900/20 dark:to-green-900/20',
-          'border border-green-200/60 dark:border-green-700/50 rounded-lg',
-          'shadow-md shadow-green-200/20 dark:shadow-green-800/20',
+          'bg-[#f0f0f0] dark:bg-[#2a2d2e]',
+          'border border-[#cccccc] dark:border-[#555555] rounded-lg',
+          'shadow-sm',
           'overflow-hidden',
         )}
         onClick={(e) => e.stopPropagation()}
@@ -84,13 +83,13 @@ const GroupedFileTree: React.FC<GroupedFileTreeProps> = (props) => {
           <div
             className={cn(
               'w-5 h-5 rounded-md flex items-center justify-center',
-              'bg-gradient-to-br from-emerald-400 to-green-500',
-              'shadow-md shadow-emerald-500/30',
+              'bg-[#e0e0e0] dark:bg-[#3a3a3a]',
+              'shadow-sm',
             )}
           >
             <Icon
               name={newItemType === 'folder' ? 'Folder' : 'FileText'}
-              className="h-3.5 w-3.5 text-white drop-shadow-sm"
+              className="h-3.5 w-3.5 text-[#333]"
             />
           </div>
         </div>
@@ -100,12 +99,12 @@ const GroupedFileTree: React.FC<GroupedFileTreeProps> = (props) => {
             type="text"
             className={cn(
               'flex-1 bg-white/90 dark:bg-slate-700/90 backdrop-blur-sm',
-              'border-2 border-green-400/70 dark:border-green-500/70',
-              'focus:border-green-500 dark:focus:border-green-400',
-              'focus:ring-2 focus:ring-green-500/30 dark:focus:ring-green-400/30',
+              'border-2 border-[#cccccc] dark:border-[#555555]',
+              'focus:border-[#333] dark:focus:border-[#cccccc]',
+              'focus:ring-2 focus:ring-[#333]/30 dark:focus:ring-[#cccccc]/30',
               'px-3 py-2 text-sm rounded-lg transition-all duration-300',
               'text-slate-900 dark:text-slate-100',
-              'shadow-lg shadow-green-200/30 dark:shadow-green-800/20',
+              'shadow-sm',
               'min-w-0',
             )}
             value={newItemName}
@@ -119,9 +118,8 @@ const GroupedFileTree: React.FC<GroupedFileTreeProps> = (props) => {
             <button
               className={cn(
                 'p-2 rounded-xl transition-all duration-300 transform hover:scale-110',
-                'bg-gradient-to-br from-green-500 to-emerald-600',
-                'text-white shadow-lg shadow-green-500/30',
-                'hover:from-green-600 hover:to-emerald-700',
+                'bg-[#e0e0e0] dark:bg-[#3a3a3a]',
+                'text-[#333] shadow-sm',
               )}
               onClick={() => onFinishCreateNewItem()}
               title="确认"
@@ -131,9 +129,8 @@ const GroupedFileTree: React.FC<GroupedFileTreeProps> = (props) => {
             <button
               className={cn(
                 'p-2 rounded-xl transition-all duration-300 transform hover:scale-110',
-                'bg-gradient-to-br from-red-500 to-pink-600',
-                'text-white shadow-lg shadow-red-500/30',
-                'hover:from-red-600 hover:to-pink-700',
+                'bg-[#e0e0e0] dark:bg-[#3a3a3a]',
+                'text-[#333] shadow-sm',
               )}
               onClick={onCancelCreateNewItem}
               title="取消"
@@ -222,12 +219,12 @@ const GroupedFileTree: React.FC<GroupedFileTreeProps> = (props) => {
                         <div className="relative">
                           <div
                             className={cn(
-                              'w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg',
+                              'w-16 h-16 rounded-2xl flex items-center justify-center shadow-sm',
                               group.type === 'shared'
-                                ? 'bg-gradient-to-br from-green-50 to-emerald-100 dark:from-green-900/20 dark:to-emerald-900/30'
+                                ? 'bg-[#f0f0f0] dark:bg-[#2a2d2e]'
                                 : group.type === 'organization'
-                                  ? 'bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/30'
-                                  : 'bg-gradient-to-br from-blue-50 to-cyan-100 dark:from-blue-900/20 dark:to-cyan-900/30',
+                                  ? 'bg-[#f0f0f0] dark:bg-[#2a2d2e]'
+                                  : 'bg-[#f0f0f0] dark:bg-[#2a2d2e]',
                             )}
                           >
                             <Icon
@@ -235,15 +232,15 @@ const GroupedFileTree: React.FC<GroupedFileTreeProps> = (props) => {
                               className={cn(
                                 'w-8 h-8',
                                 group.type === 'shared'
-                                  ? 'text-green-500 dark:text-green-400'
+                                  ? 'text-[#333] dark:text-[#cccccc]'
                                   : group.type === 'organization'
-                                    ? 'text-purple-500 dark:text-purple-400'
-                                    : 'text-blue-500 dark:text-blue-400',
+                                    ? 'text-[#333] dark:text-[#cccccc]'
+                                    : 'text-[#333] dark:text-[#cccccc]',
                               )}
                             />
                           </div>
                           {/* 装饰性光点 */}
-                          <div className="absolute -top-1 -right-1 w-4 h-4 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full opacity-70 blur-sm"></div>
+                          <div className="absolute -top-1 -right-1 w-4 h-4 bg-[#999999] rounded-full opacity-50"></div>
                         </div>
 
                         <div className="space-y-1">
diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx
index 060be8d..0f7246a 100644
--- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx
+++ b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/folder/components/RenderFile.tsx
@@ -122,20 +122,14 @@ export const RenderFile: React.FC<{
       <div style={style} {...listeners}>
         <div
           className={cn(
-            'flex items-center py-2 px-3 text-sm cursor-pointer relative group box-border',
-            'transition-all duration-300 ease-out rounded-lg mx-2 my-0.5 hover:z-[100]',
-            isSelected && [
-              'bg-blue-500/10 dark:bg-blue-400/15',
-              'text-blue-700 dark:text-blue-300',
-              'border-2 border-blue-500 dark:border-blue-400',
-              'shadow-sm shadow-blue-500/20',
-            ],
+            'flex items-center py-0.5 px-2 text-xs cursor-pointer relative group box-border',
+            'transition-all duration-300 ease-out rounded-lg mx-1 my-0.5 hover:z-[100]',
+            isSelected && ['bg-[#f0f0f0] dark:bg-[#2a2d2e]', 'text-[#333]', 'border-transparent'],
             !isSelected && [
-              'hover:bg-gradient-to-r hover:from-blue-50/80 hover:via-blue-100/60 hover:to-blue-50/80',
+              'hover:bg-[#f0f0f0] dark:hover:bg-[#2a2d2e]',
               'dark:hover:from-blue-900/20 dark:hover:via-blue-800/30 dark:hover:to-blue-900/20',
-              'hover:shadow-md hover:shadow-blue-200/40 dark:hover:shadow-blue-900/30',
-              'hover:transform hover:scale-[1.01]',
-              'text-slate-700 dark:text-slate-300 hover:text-blue-700 dark:hover:text-blue-300',
+              'dark:text-slate-300',
+              'text-[#333] dark:text-[#cccccc]',
               'border-2 border-transparent',
             ],
             isOverlay && 'border-lime-500 border-2',
@@ -148,14 +142,14 @@ export const RenderFile: React.FC<{
         >
           {/* 展开/折叠图标 - 只为文件夹显示 */}
           {isFolder && (
-            <div className="mr-2 w-5 h-5 flex-shrink-0 flex items-center justify-center">
+            <div className="w-5 h-5 flex-shrink-0 flex items-center justify-center">
               <button
                 className={cn(
                   'w-5 h-5 rounded-md flex items-center justify-center group/chevron',
                   'transition-all duration-300 transform hover:scale-110',
                   isSelected
-                    ? 'hover:bg-blue-100/50 text-blue-600 hover:text-blue-700'
-                    : 'hover:bg-blue-100 dark:hover:bg-slate-600 text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400',
+                    ? 'hover:bg-[#e0e0e0] text-[#333]'
+                    : 'hover:bg-[#e0e0e0] dark:hover:bg-[#3a3a3a] text-[#333] dark:text-[#cccccc] hover:text-[#333] dark:hover:text-[#cccccc]',
                 )}
                 onClick={(e) => {
                   e.stopPropagation();
@@ -176,31 +170,29 @@ export const RenderFile: React.FC<{
           )}
 
           {/* 文件/文件夹图标 - 更精美的设计 */}
-          <div className="w-6 h-6 mr-3 flex-shrink-0 flex items-center justify-center">
+          <div className="w-6 h-6  flex-shrink-0 flex items-center justify-center">
             {isFolder ? (
               <div
                 className={cn(
-                  'w-5 h-5 rounded-md flex items-center justify-center',
-                  'transition-all duration-300 group-hover:scale-110',
+                  'w-5 h-5 rounded flex items-center justify-center',
                   isExpanded
-                    ? 'bg-gradient-to-br from-amber-400 to-orange-500 shadow-md shadow-amber-500/30'
-                    : 'bg-gradient-to-br from-yellow-400 to-amber-500 shadow-md shadow-yellow-500/30',
+                    ? 'text-[#333] dark:text-[#cccccc]'
+                    : 'text-[#333] dark:text-[#cccccc]',
                 )}
               >
                 <Icon
                   name={isExpanded ? 'FolderOpen' : 'Folder'}
-                  className="h-3.5 w-3.5 text-white drop-shadow-sm"
+                  className={cn('h-3.5 w-3.5', isSelected && 'text-[#333]')}
                 />
               </div>
             ) : (
               <div
                 className={cn(
-                  'w-5 h-5 rounded-md flex items-center justify-center',
-                  'bg-gradient-to-br from-blue-400 to-indigo-500',
-                  'shadow-md shadow-blue-500/30 transition-all duration-300 group-hover:scale-110',
+                  'w-5 h-5 rounded flex items-center justify-center',
+                  'text-[#333] dark:text-[#cccccc]',
                 )}
               >
-                <Icon name="FileText" className="h-3.5 w-3.5 text-white drop-shadow-sm" />
+                <Icon name="FileText" className={cn('h-3.5 w-3.5', isSelected && 'text-[#333]')} />
               </div>
             )}
           </div>
@@ -232,9 +224,7 @@ export const RenderFile: React.FC<{
                       'px-0 py-0',
                       'cursor-pointer pointer-events-none',
                       'truncate',
-                      isSelected
-                        ? 'text-blue-700 dark:text-blue-300'
-                        : 'text-slate-700 dark:text-slate-300 group-hover:text-blue-700 dark:group-hover:text-blue-300',
+                      isSelected ? 'text-[#333]' : 'text-[#333] dark:text-[#cccccc]',
                     ],
               )}
               defaultValue={file.name}
@@ -270,8 +260,8 @@ export const RenderFile: React.FC<{
                   className={cn(
                     'p-1.5 rounded-lg transition-all duration-300 transform hover:scale-110',
                     isSelected
-                      ? 'hover:bg-blue-100/50 text-blue-600 hover:text-blue-700'
-                      : 'hover:bg-blue-100 dark:hover:bg-slate-600 text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400',
+                      ? 'hover:bg-[#e0e0e0] text-[#333]'
+                      : 'hover:bg-[#e0e0e0] dark:hover:bg-[#3a3a3a] text-[#333] dark:text-[#cccccc] hover:text-[#333] dark:hover:text-[#cccccc]',
                     'shadow-sm hover:shadow-md',
                   )}
                   onClick={(e) => {
@@ -286,8 +276,8 @@ export const RenderFile: React.FC<{
                   className={cn(
                     'p-1.5 rounded-lg transition-all duration-300 transform hover:scale-110',
                     isSelected
-                      ? 'hover:bg-blue-100/50 text-blue-600 hover:text-blue-700'
-                      : 'hover:bg-blue-100 dark:hover:bg-slate-600 text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400',
+                      ? 'hover:bg-[#e0e0e0] text-[#333]'
+                      : 'hover:bg-[#e0e0e0] dark:hover:bg-[#2a2d2e] text-[#333] dark:text-[#cccccc] hover:text-[#333] dark:hover:text-[#cccccc]',
                     'shadow-sm hover:shadow-md',
                   )}
                   onClick={(e) => {
@@ -313,8 +303,8 @@ export const RenderFile: React.FC<{
                 className={cn(
                   'p-1.5 rounded-lg',
                   isSelected
-                    ? 'hover:bg-blue-100/50 text-blue-600 hover:text-blue-700'
-                    : 'hover:bg-blue-100 dark:hover:bg-slate-600 text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400',
+                    ? 'hover:bg-[#e0e0e0] text-[#333]'
+                    : 'hover:bg-[#e0e0e0] dark:hover:bg-[#2a2d2e] text-[#333] dark:text-[#cccccc] hover:text-[#333] dark:hover:text-[#cccccc]',
                 )}
               />
             </div>
@@ -336,7 +326,7 @@ export const RenderFile: React.FC<{
             {/* 连接线 */}
             <div
               className={cn(
-                `absolute left-6   w-px`,
+                `absolute left-2   w-px`,
                 'bg-gradient-to-b from-slate-200 via-slate-300 to-transparent',
                 'dark:from-slate-600 dark:via-slate-500',
               )}
@@ -347,20 +337,17 @@ export const RenderFile: React.FC<{
               {isAddingNewItem && (
                 <div
                   className={cn(
-                    'flex items-center py-2 px-3 text-sm mx-2 my-0.5',
-                    'bg-gradient-to-r from-green-50 via-emerald-50/80 to-green-50',
-                    'dark:from-green-900/20 dark:via-emerald-900/20 dark:to-green-900/20',
-                    'border border-green-200/60 dark:border-green-700/50 rounded-lg',
-                    'shadow-md shadow-green-200/20 dark:shadow-green-800/20',
+                    'flex items-center px-3 text-sm',
+                    'bg-[#f0f0f0] dark:bg-[#2a2d2e]',
+                    'border border-[#cccccc] dark:border-[#555555] rounded-lg',
+                    'shadow-sm',
                   )}
                   style={{ paddingLeft: `${(depth + 1) * 16 + 12}px` }}
                 >
-                  <div className="w-6 h-6 mr-2 flex-shrink-0 flex items-center justify-center">
+                  <div className="w-6 mr-2 flex-shrink-0 flex items-center justify-center">
                     <div
                       className={cn(
-                        'w-5 h-5 rounded-md flex items-center justify-center',
-                        'bg-gradient-to-br from-emerald-400 to-green-500',
-                        'shadow-md shadow-emerald-500/30',
+                        'w-5 h-5 rounded flex items-center justify-center text-[#333] dark:text-[#cccccc]',
                       )}
                     >
                       <Icon
@@ -378,7 +365,7 @@ export const RenderFile: React.FC<{
                         'border-2 border-green-400/70 dark:border-green-500/70',
                         'focus:border-green-500 dark:focus:border-green-400',
                         'focus:ring-2 focus:ring-green-500/30 dark:focus:ring-green-400/30',
-                        'px-3 py-2 text-sm rounded-lg transition-all duration-300',
+                        'px-3 text-sm rounded-lg transition-all duration-300',
                         'text-slate-900 dark:text-slate-100',
                         'shadow-lg shadow-green-200/30 dark:shadow-green-800/20',
                       )}