@huyooo/file-explorer-frontend-react 0.4.14 → 0.4.16

package/dist/index.css

@@ -1,34 +1,190 @@
+/* src/index.css */
+:root {
+  color-scheme: light;
+  --huyooo-bg: #f7f7f4;
+  --huyooo-surface: #f2f1ed;
+  --huyooo-surface-2: #f0efeb;
+  --huyooo-muted: #ebeae5;
+  --huyooo-muted-hover: #e6e5e0;
+  --huyooo-border: #26251e1a;
+  --huyooo-text: #26251eeb;
+  --huyooo-text-muted: #26251e99;
+  --huyooo-text-disabled: #26251e66;
+  --huyooo-primary: #54a9ff;
+  --huyooo-focus-ring: rgba(84, 169, 255, 0.18);
+  --huyooo-shadow-sm: 0 1px 2px 0 rgba(38, 37, 30, 0.08);
+  --huyooo-scrollbar: rgba(38, 37, 30, 0.2);
+  --huyooo-scrollbar-hover: rgba(38, 37, 30, 0.3);
+  --huyooo-danger: #cf2d56;
+  --huyooo-success: #1f8a65;
+  --huyooo-warning: rgb(245, 158, 11);
+  --huyooo-danger-bg: rgba(207, 45, 86, 0.1);
+  --huyooo-danger-border: rgba(207, 45, 86, 0.22);
+  --huyooo-success-bg: rgba(31, 138, 101, 0.1);
+  --huyooo-success-border: rgba(31, 138, 101, 0.22);
+  --huyooo-warning-bg: rgba(255, 251, 235, 0.92);
+  --huyooo-warning-border: rgba(253, 230, 138, 0.9);
+  --huyooo-overlay: rgba(0, 0, 0, 0.5);
+  --huyooo-panel-bg: #f2f1ed;
+  --huyooo-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --huyooo-code-bg: #f2f1ed;
+  --huyooo-code-text: #26251eeb;
+  --huyooo-menu-bg: #f2f1ed;
+  --huyooo-menu-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
+  --huyooo-window-close-bg: rgb(255, 95, 87);
+  --huyooo-window-close-border: rgb(224, 68, 62);
+  --huyooo-window-minimize-bg: rgb(254, 188, 46);
+  --huyooo-window-minimize-border: rgb(216, 158, 36);
+  --huyooo-window-maximize-bg: rgb(40, 200, 64);
+  --huyooo-window-maximize-border: rgb(26, 171, 41);
+  --huyooo-window-control-icon: rgba(0, 0, 0, 0.5);
+  --huyooo-overlay-strong: rgba(0, 0, 0, 0.85);
+  --huyooo-on-primary: #ffffff;
+  --huyooo-on-primary-muted: rgba(255, 255, 255, 0.8);
+  --huyooo-filetype-folder: var(--huyooo-primary);
+  --huyooo-filetype-image: #7ec699;
+  --huyooo-filetype-video: #c678dd;
+  --huyooo-filetype-music: #e06c75;
+  --huyooo-filetype-document: #61afef;
+  --huyooo-filetype-code: #98c379;
+  --huyooo-filetype-archive: #d19a66;
+  --huyooo-filetype-file: #abb2bf;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --huyooo-bg: #1e1e1e;
+    --huyooo-surface: #1e1e1e;
+    --huyooo-surface-2: #252526;
+    --huyooo-muted: #2d2d2d;
+    --huyooo-muted-hover: #3c3c3c;
+    --huyooo-border: #333;
+    --huyooo-text: #ccc;
+    --huyooo-text-muted: #888;
+    --huyooo-text-disabled: #666;
+    --huyooo-primary: #54a9ff;
+    --huyooo-focus-ring: rgba(84, 169, 255, 0.22);
+    --huyooo-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
+    --huyooo-scrollbar: rgba(255, 255, 255, 0.2);
+    --huyooo-scrollbar-hover: rgba(255, 255, 255, 0.3);
+    --huyooo-danger: #cf2d56;
+    --huyooo-success: #1f8a65;
+    --huyooo-warning: #f59e0b;
+    --huyooo-danger-bg: rgba(207, 45, 86, 0.14);
+    --huyooo-danger-border: rgba(207, 45, 86, 0.28);
+    --huyooo-success-bg: rgba(31, 138, 101, 0.14);
+    --huyooo-success-border: rgba(31, 138, 101, 0.28);
+    --huyooo-warning-bg: rgba(245, 158, 11, 0.12);
+    --huyooo-warning-border: rgba(245, 158, 11, 0.25);
+    --huyooo-overlay: rgba(0, 0, 0, 0.6);
+    --huyooo-panel-bg: #252526;
+    --huyooo-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    --huyooo-code-bg: #1f2937;
+    --huyooo-code-text: #e5e7eb;
+    --huyooo-menu-bg: #252526;
+    --huyooo-menu-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.35);
+  }
+}
+:root[data-theme=light] {
+  color-scheme: light;
+  --huyooo-bg: #f7f7f4;
+  --huyooo-surface: #f2f1ed;
+  --huyooo-surface-2: #f0efeb;
+  --huyooo-muted: #ebeae5;
+  --huyooo-muted-hover: #e6e5e0;
+  --huyooo-border: #26251e1a;
+  --huyooo-text: #26251eeb;
+  --huyooo-text-muted: #26251e99;
+  --huyooo-text-disabled: #26251e66;
+  --huyooo-primary: #54a9ff;
+  --huyooo-focus-ring: rgba(84, 169, 255, 0.18);
+  --huyooo-shadow-sm: 0 1px 2px 0 rgba(38, 37, 30, 0.08);
+  --huyooo-scrollbar: rgba(38, 37, 30, 0.2);
+  --huyooo-scrollbar-hover: rgba(38, 37, 30, 0.3);
+  --huyooo-danger: #cf2d56;
+  --huyooo-success: #1f8a65;
+  --huyooo-warning: rgb(245, 158, 11);
+  --huyooo-danger-bg: rgba(207, 45, 86, 0.1);
+  --huyooo-danger-border: rgba(207, 45, 86, 0.22);
+  --huyooo-success-bg: rgba(31, 138, 101, 0.1);
+  --huyooo-success-border: rgba(31, 138, 101, 0.22);
+  --huyooo-warning-bg: rgba(255, 251, 235, 0.92);
+  --huyooo-warning-border: rgba(253, 230, 138, 0.9);
+  --huyooo-overlay: rgba(0, 0, 0, 0.5);
+  --huyooo-panel-bg: #f2f1ed;
+  --huyooo-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --huyooo-code-bg: #f2f1ed;
+  --huyooo-code-text: #26251eeb;
+  --huyooo-menu-bg: #f2f1ed;
+  --huyooo-menu-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
+  --huyooo-filetype-folder: var(--huyooo-primary);
+}
+:root[data-theme=dark] {
+  color-scheme: dark;
+  --huyooo-bg: #1e1e1e;
+  --huyooo-surface: #1e1e1e;
+  --huyooo-surface-2: #252526;
+  --huyooo-muted: #2d2d2d;
+  --huyooo-muted-hover: #3c3c3c;
+  --huyooo-border: #333;
+  --huyooo-text: #ccc;
+  --huyooo-text-muted: #888;
+  --huyooo-text-disabled: #666;
+  --huyooo-primary: #54a9ff;
+  --huyooo-focus-ring: rgba(84, 169, 255, 0.22);
+  --huyooo-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
+  --huyooo-scrollbar: rgba(255, 255, 255, 0.2);
+  --huyooo-scrollbar-hover: rgba(255, 255, 255, 0.3);
+  --huyooo-danger: #cf2d56;
+  --huyooo-success: #1f8a65;
+  --huyooo-warning: #f59e0b;
+  --huyooo-danger-bg: rgba(207, 45, 86, 0.14);
+  --huyooo-danger-border: rgba(207, 45, 86, 0.28);
+  --huyooo-success-bg: rgba(31, 138, 101, 0.14);
+  --huyooo-success-border: rgba(31, 138, 101, 0.28);
+  --huyooo-warning-bg: rgba(245, 158, 11, 0.12);
+  --huyooo-warning-border: rgba(245, 158, 11, 0.25);
+  --huyooo-overlay: rgba(0, 0, 0, 0.6);
+  --huyooo-panel-bg: #252526;
+  --huyooo-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  --huyooo-code-bg: #1f2937;
+  --huyooo-code-text: #e5e7eb;
+  --huyooo-menu-bg: #252526;
+  --huyooo-menu-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.35);
+  --huyooo-filetype-folder: var(--huyooo-primary);
+}
+
 /* src/components/FileIcon.css */
 .file-icon--folder {
-  color: rgb(96, 165, 250);
-  fill: rgb(96, 165, 250);
+  color: var(--huyooo-primary);
+  fill: var(--huyooo-primary);
 }
 .file-icon--image {
-  color: rgb(168, 85, 247);
+  color: var(--huyooo-primary);
 }
 .file-icon--text {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
 }
 .file-icon--code {
-  color: rgb(34, 197, 94);
+  color: var(--huyooo-success);
 }
 .file-icon--music {
-  color: rgb(248, 113, 113);
+  color: var(--huyooo-danger);
 }
 .file-icon--video {
-  color: rgb(37, 99, 235);
+  color: var(--huyooo-primary);
 }
 .file-icon--pdf {
-  color: rgb(220, 38, 38);
+  color: var(--huyooo-danger);
 }
 .file-icon--application {
-  color: rgb(139, 92, 246);
+  color: var(--huyooo-primary);
 }
 .file-icon--archive {
-  color: rgb(234, 179, 8);
+  color: var(--huyooo-warning);
 }
 .file-icon--default {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
 }
 
 /* src/components/FileGrid.css */
@@ -63,18 +219,18 @@
   cursor: grabbing;
 }
 .file-grid-item--normal:hover {
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--huyooo-muted-hover);
 }
 .file-grid-item--selected {
-  background: rgba(0, 122, 255, 0.12);
-  border-color: rgba(0, 122, 255, 0.2);
+  background: var(--huyooo-focus-ring);
+  border-color: var(--huyooo-primary);
 }
 .file-grid-item--selected:hover {
-  background: rgba(0, 122, 255, 0.16);
+  background: var(--huyooo-focus-ring);
 }
 .file-grid-item--drag-over {
-  background: rgba(0, 122, 255, 0.2);
-  border-color: rgba(0, 122, 255, 0.4);
+  background: var(--huyooo-focus-ring);
+  border-color: var(--huyooo-primary);
 }
 .file-grid-item-icon {
   position: relative;
@@ -92,8 +248,8 @@
   object-fit: cover;
   object-position: center;
   border-radius: 4px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
-  background: #f5f5f5;
+  box-shadow: var(--huyooo-shadow-sm);
+  background: var(--huyooo-muted);
   display: block;
 }
 .file-grid-item-thumbnail--application {
@@ -103,16 +259,16 @@
   border-radius: 10px;
 }
 .file-grid-item-thumbnail--selected {
-  box-shadow: 0 2px 6px rgba(0, 122, 255, 0.2), 0 0 0 2px rgba(0, 122, 255, 0.3);
+  box-shadow: 0 0 0 2px var(--huyooo-primary), 0 0 0 6px var(--huyooo-focus-ring);
 }
 .file-grid-item-thumbnail--video {
   position: relative;
   border-radius: 4px;
   overflow: hidden;
-  background: #000;
+  background: var(--huyooo-overlay-strong);
   width: 48px;
   height: 48px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--huyooo-shadow-sm);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -141,7 +297,7 @@
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--huyooo-overlay);
   backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
@@ -172,7 +328,7 @@
   user-select: none;
   cursor: default;
   transition: color 100ms;
-  color: #1d1d1f;
+  color: var(--huyooo-text);
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -205,48 +361,21 @@
   line-height: 1.3;
   text-align: center;
   padding: 2px 4px;
-  border: 1px solid #007aff;
+  border: 1px solid var(--huyooo-primary);
   border-radius: 3px;
   outline: none;
-  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
-  background: white;
+  box-shadow: 0 0 0 3px var(--huyooo-focus-ring);
+  background: var(--huyooo-surface-2);
+  color: var(--huyooo-text);
   cursor: text;
 }
-@media (prefers-color-scheme: dark) {
-  .file-grid-item--normal:hover {
-    background: rgba(255, 255, 255, 0.06);
-  }
-  .file-grid-item--selected {
-    background: rgba(10, 132, 255, 0.25);
-    border-color: rgba(10, 132, 255, 0.3);
-  }
-  .file-grid-item--selected:hover {
-    background: rgba(10, 132, 255, 0.3);
-  }
-  .file-grid-item--drag-over {
-    background: rgba(10, 132, 255, 0.35);
-    border-color: rgba(10, 132, 255, 0.5);
-  }
-  .file-grid-item-thumbnail {
-    background: #2c2c2e;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);
-  }
-  .file-grid-item-name {
-    color: #f5f5f7;
-  }
-  .file-grid-item-rename-input {
-    background: #1c1c1e;
-    border-color: #0a84ff;
-    color: #f5f5f7;
-  }
-}
 
 /* src/components/SortIndicator.css */
 .sort-indicator {
   margin-left: 4px;
   display: inline-flex;
   align-items: center;
-  color: rgb(59, 130, 246);
+  color: var(--huyooo-primary);
 }
 
 /* src/components/FileList.css */
@@ -263,13 +392,13 @@
 }
 .file-list-header {
   font-size: 11px;
-  color: #86868b;
+  color: var(--huyooo-text-muted);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.3px;
   position: sticky;
   top: 0;
-  background: rgba(255, 255, 255, 0.92);
+  background: var(--huyooo-surface);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   z-index: 10;
@@ -277,14 +406,14 @@
 }
 .file-list-header-cell {
   padding: 6px 12px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  border-bottom: 1px solid var(--huyooo-border);
   cursor: pointer;
   text-align: left;
   font-weight: 500;
   transition: background-color 100ms;
 }
 .file-list-header-cell:hover {
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--huyooo-muted-hover);
 }
 .file-list-header-cell--name {
   padding-left: 12px;
@@ -309,27 +438,27 @@
   background: transparent;
 }
 .file-list-row--odd {
-  background: rgba(0, 0, 0, 0.015);
+  background: color-mix(in srgb, var(--huyooo-muted) 20%, transparent);
 }
 .file-list-row--even:hover,
 .file-list-row--odd:hover {
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--huyooo-muted-hover);
 }
 .file-list-row--selected {
-  background: #007aff;
+  background: var(--huyooo-primary);
   color: white;
 }
 .file-list-row--selected:hover {
-  background: #0066d6;
+  background: var(--huyooo-primary-hover, var(--huyooo-primary));
 }
 .file-list-row--drag-over {
-  background: rgba(0, 122, 255, 0.15);
-  border-bottom-color: rgba(0, 122, 255, 0.3);
+  background: var(--huyooo-focus-ring);
+  border-bottom-color: var(--huyooo-primary);
 }
 .file-list-cell {
   padding: 4px 12px;
   white-space: nowrap;
-  color: #6e6e73;
+  color: var(--huyooo-text-muted);
   vertical-align: middle;
   height: 28px;
 }
@@ -341,7 +470,7 @@
   gap: 8px;
 }
 .file-list-cell--selected {
-  color: rgba(255, 255, 255, 0.75);
+  color: var(--huyooo-on-primary-muted);
 }
 .file-list-cell--size {
   font-family:
@@ -350,14 +479,14 @@
     "Cascadia Code",
     monospace;
   font-size: 11px;
-  color: #8e8e93;
+  color: var(--huyooo-text-disabled);
   font-variant-numeric: tabular-nums;
 }
 .file-list-name {
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
-  color: #1d1d1f;
+  color: var(--huyooo-text);
   cursor: default;
   font-weight: 400;
 }
@@ -370,59 +499,14 @@
   flex: 1;
   font-size: 13px;
   padding: 2px 6px;
-  border: 1px solid #007aff;
+  border: 1px solid var(--huyooo-primary);
   border-radius: 4px;
   outline: none;
-  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
-  background: white;
+  box-shadow: 0 0 0 3px var(--huyooo-focus-ring);
+  background: var(--huyooo-surface-2);
+  color: var(--huyooo-text);
   cursor: text;
 }
-@media (prefers-color-scheme: dark) {
-  .file-list-header {
-    background: rgba(28, 28, 30, 0.92);
-    color: #98989d;
-  }
-  .file-list-header-cell {
-    border-bottom-color: rgba(255, 255, 255, 0.08);
-  }
-  .file-list-header-cell:hover {
-    background: rgba(255, 255, 255, 0.04);
-  }
-  .file-list-row--odd {
-    background: rgba(255, 255, 255, 0.02);
-  }
-  .file-list-row--even:hover,
-  .file-list-row--odd:hover {
-    background: rgba(255, 255, 255, 0.06);
-  }
-  .file-list-row--selected {
-    background: #0a84ff;
-  }
-  .file-list-row--selected:hover {
-    background: #0077ed;
-  }
-  .file-list-row--drag-over {
-    background: rgba(10, 132, 255, 0.2);
-    border-bottom-color: rgba(10, 132, 255, 0.4);
-  }
-  .file-list-cell {
-    color: #98989d;
-  }
-  .file-list-cell--size {
-    color: #6e6e73;
-  }
-  .file-list-name {
-    color: #f5f5f7;
-  }
-  .file-list-name--selected {
-    color: white;
-  }
-  .file-list-rename-input {
-    background: #1c1c1e;
-    border-color: #0a84ff;
-    color: #f5f5f7;
-  }
-}
 
 /* src/components/FileListView.css */
 .file-list-view {
@@ -439,14 +523,14 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
   gap: 16px;
 }
 .file-list-view-spinner {
   width: 32px;
   height: 32px;
-  border: 3px solid rgba(156, 163, 175, 0.2);
-  border-top-color: rgb(59, 130, 246);
+  border: 3px solid color-mix(in srgb, var(--huyooo-text-disabled) 20%, transparent);
+  border-top-color: var(--huyooo-primary);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
@@ -462,9 +546,9 @@
 /* src/components/FileSidebar.css */
 .file-sidebar {
   width: 12rem;
-  background: rgba(243, 244, 246, 0.5);
+  background: var(--huyooo-muted);
   backdrop-filter: blur(24px);
-  border-right: 1px solid rgba(229, 231, 233, 0.5);
+  border-right: 1px solid var(--huyooo-border);
   display: flex;
   flex-direction: column;
   padding-top: 2rem;
@@ -483,11 +567,11 @@
   background: transparent;
 }
 .file-sidebar::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--huyooo-scrollbar);
   border-radius: 3px;
 }
 .file-sidebar::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--huyooo-scrollbar-hover);
 }
 .file-sidebar-section {
   margin-bottom: 0;
@@ -498,7 +582,7 @@
   margin-bottom: 0.5rem;
   font-size: 0.75rem;
   font-weight: 600;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -522,22 +606,22 @@
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 500;
-  color: rgb(75, 85, 99);
+  color: var(--huyooo-text-muted);
   transition: all 200ms;
 }
 .file-sidebar-item:hover {
-  background: rgba(229, 231, 233, 0.5);
-  color: black;
+  background: var(--huyooo-muted-hover);
+  color: var(--huyooo-text);
 }
 .file-sidebar-item--active {
-  background: rgba(209, 213, 219, 0.6);
-  color: black;
+  background: var(--huyooo-muted-hover);
+  color: var(--huyooo-text);
 }
 .file-sidebar-item-icon {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
 }
 .file-sidebar-item-icon--active {
-  color: rgb(37, 99, 235);
+  color: var(--huyooo-primary);
 }
 
 /* src/components/Breadcrumb.css */
@@ -571,36 +655,36 @@
   border: none;
   background: transparent;
   cursor: pointer;
-  color: rgb(75, 85, 99);
+  color: var(--huyooo-text-muted);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .file-breadcrumb-link:hover {
-  background: rgba(229, 231, 233, 0.6);
-  color: rgb(17, 24, 39);
+  background: var(--huyooo-muted-hover);
+  color: var(--huyooo-text);
 }
 .file-breadcrumb-link--current {
   font-weight: 600;
-  color: rgb(17, 24, 39);
-  background: rgba(229, 231, 233, 0.5);
+  color: var(--huyooo-text);
+  background: var(--huyooo-muted);
   cursor: default;
 }
 .file-breadcrumb-link--current:hover {
-  background: rgba(229, 231, 233, 0.5);
+  background: var(--huyooo-muted);
 }
 .file-breadcrumb-separator {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
   margin: 0 0.25rem;
   flex-shrink: 0;
 }
 
 /* src/components/Toolbar.css */
 .file-toolbar {
-  height: 3rem;
-  background: rgba(249, 250, 251, 0.9);
+  height: 48px;
+  background: var(--huyooo-surface);
   backdrop-filter: blur(12px);
-  border-bottom: 1px solid rgb(229, 231, 233);
+  border-bottom: 1px solid var(--huyooo-border);
   display: flex;
   align-items: center;
   padding: 0 1rem;
@@ -615,8 +699,8 @@
 .file-toolbar-nav {
   display: flex;
   align-items: center;
-  color: rgb(75, 85, 99);
-  background: rgba(229, 231, 233, 0.5);
+  color: var(--huyooo-text-muted);
+  background: var(--huyooo-muted);
   border-radius: 0.5rem;
   padding: 0.125rem;
   flex-shrink: 0;
@@ -632,19 +716,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgb(31, 41, 55);
+  color: var(--huyooo-text);
 }
 .file-toolbar-button:hover:not(:disabled) {
-  background: rgb(209, 213, 219);
+  background: var(--huyooo-muted-hover);
 }
 .file-toolbar-button:disabled {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
   cursor: default;
 }
 .file-toolbar-button--active {
-  background: white;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  color: rgb(31, 41, 55);
+  background: var(--huyooo-surface-2);
+  box-shadow: var(--huyooo-shadow-sm);
+  color: var(--huyooo-text);
 }
 .file-toolbar-breadcrumb {
   flex: 1;
@@ -680,14 +764,14 @@
   left: 0.625rem;
   top: 50%;
   transform: translateY(-50%);
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
   transition: color 200ms;
 }
 .file-toolbar-search:focus-within .file-toolbar-search-icon {
-  color: rgb(59, 130, 246);
+  color: var(--huyooo-primary);
 }
 .file-toolbar-search-input {
-  background: rgb(243, 244, 246);
+  background: var(--huyooo-muted);
   border: 1px solid transparent;
   border-radius: 0.375rem;
   padding-left: 2rem;
@@ -698,45 +782,45 @@
   outline: none;
   transition: all 200ms;
   width: 8rem;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
 }
 .file-toolbar-search-input::placeholder {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
 }
 .file-toolbar-search-input:focus {
-  background: white;
-  border-color: rgb(96, 165, 250);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+  background: var(--huyooo-surface-2);
+  border-color: var(--huyooo-primary);
+  box-shadow: 0 0 0 2px var(--huyooo-focus-ring);
   width: 12rem;
 }
 .file-toolbar-view-toggle {
   display: flex;
   align-items: center;
-  background: rgba(229, 231, 233, 0.5);
+  background: var(--huyooo-muted);
   border-radius: 0.5rem;
   padding: 0.125rem;
-  color: rgb(75, 85, 99);
+  color: var(--huyooo-text-muted);
 }
 .file-toolbar-view-toggle .file-toolbar-button--active {
-  background: white;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  color: rgb(31, 41, 55);
+  background: var(--huyooo-surface-2);
+  box-shadow: var(--huyooo-shadow-sm);
+  color: var(--huyooo-text);
 }
 .file-toolbar-view-toggle .file-toolbar-button:not(.file-toolbar-button--active):hover {
-  background: rgba(209, 213, 219, 0.5);
+  background: var(--huyooo-muted-hover);
 }
 
 /* src/components/StatusBar.css */
 .file-status-bar {
-  height: 1.5rem;
-  background-color: rgb(249, 250, 251);
-  border-top: 1px solid rgb(229, 231, 233);
+  height: 32px;
+  background-color: var(--huyooo-surface-2);
+  border-top: 1px solid var(--huyooo-border);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 8px;
   font-size: 10px;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   user-select: none;
   flex-shrink: 0;
   z-index: 20;
@@ -757,11 +841,11 @@
   position: fixed;
   z-index: 10000;
   width: 220px;
-  background: rgba(255, 255, 255, 0.95);
+  background: var(--huyooo-menu-bg);
   backdrop-filter: blur(24px);
-  border: 1px solid rgba(229, 231, 233, 0.5);
+  border: 1px solid var(--huyooo-border);
   border-radius: 0.5rem;
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--huyooo-menu-shadow);
   padding: 0.25rem 0;
   font-size: 0.875rem;
   user-select: none;
@@ -791,21 +875,21 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.375rem 1rem;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
   transition: all 200ms;
   border: none;
   background: transparent;
   cursor: pointer;
 }
 .context-menu-item:hover {
-  background: rgb(59, 130, 246);
+  background: var(--huyooo-primary);
   color: white;
 }
 .context-menu-item:hover .context-menu-item-icon {
   color: white;
 }
 .context-menu-item:hover .context-menu-item-shortcut {
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--huyooo-on-primary-muted);
 }
 .context-menu-item--disabled {
   opacity: 0.5;
@@ -813,55 +897,55 @@
 }
 .context-menu-item--disabled:hover {
   background: transparent;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
 }
 .context-menu-item--disabled:hover .context-menu-item-icon {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
 }
 .context-menu-item--danger {
-  color: rgb(220, 38, 38);
+  color: var(--huyooo-danger);
 }
 .context-menu-item--danger:hover {
-  background: rgb(220, 38, 38);
+  background: var(--huyooo-danger);
   color: white;
 }
 .context-menu-item--danger .context-menu-item-icon {
-  color: rgb(220, 38, 38);
+  color: var(--huyooo-danger);
 }
 .context-menu-item--danger:hover .context-menu-item-icon {
   color: white;
 }
 .context-menu-item-icon {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   flex-shrink: 0;
 }
 .context-menu-item-label {
   flex: 1;
 }
 .context-menu-item-shortcut {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
   font-size: 0.6875rem;
 }
 .context-menu-separator {
   height: 1px;
-  background: rgb(229, 231, 233);
+  background: var(--huyooo-border);
   margin: 0.25rem 0.5rem;
 }
 .context-menu-item--has-children {
   position: relative;
 }
 .context-menu-item--active {
-  background: rgb(59, 130, 246);
+  background: var(--huyooo-primary);
   color: white;
 }
 .context-menu-item--active .context-menu-item-icon {
   color: white;
 }
 .context-menu-item--active .context-menu-item-shortcut {
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--huyooo-on-primary-muted);
 }
 .context-menu-item-check {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   flex-shrink: 0;
   margin-left: auto;
 }
@@ -870,7 +954,7 @@
   color: white;
 }
 .context-menu-item-arrow {
-  color: rgb(156, 163, 175);
+  color: var(--huyooo-text-disabled);
   flex-shrink: 0;
   margin-left: auto;
 }
@@ -887,7 +971,7 @@
   position: fixed;
   inset: 0;
   z-index: 100;
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--huyooo-overlay);
   animation: fade-in 200ms ease-out;
   display: flex;
   align-items: center;
@@ -897,10 +981,10 @@
   position: absolute;
   display: flex;
   flex-direction: column;
-  background: rgba(255, 255, 255, 0.95);
+  background: var(--huyooo-panel-bg);
   backdrop-filter: blur(24px);
-  border: 1px solid rgb(229, 231, 233);
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  border: 1px solid var(--huyooo-border);
+  box-shadow: var(--huyooo-shadow-lg);
   border-radius: 0.5rem;
   overflow: hidden;
   animation: window-fade-in 200ms ease-out;
@@ -911,10 +995,10 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 0.75rem;
-  border-bottom: 1px solid rgb(229, 231, 233);
+  border-bottom: 1px solid var(--huyooo-border);
   flex-shrink: 0;
   user-select: none;
-  background: rgba(249, 250, 251, 0.8);
+  background: var(--huyooo-surface);
   z-index: 20;
   cursor: grab;
 }
@@ -934,7 +1018,7 @@
   align-items: center;
   justify-content: center;
   border: 1px solid;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--huyooo-shadow-sm);
   outline: none;
   cursor: pointer;
   padding: 0;
@@ -955,19 +1039,19 @@
   min-height: 7px;
 }
 .window-control-button--close {
-  background-color: rgb(255, 95, 87);
-  border-color: rgb(224, 68, 62);
+  background-color: var(--huyooo-window-close-bg);
+  border-color: var(--huyooo-window-close-border);
 }
 .window-control-button--minimize {
-  background-color: rgb(254, 188, 46);
-  border-color: rgb(216, 158, 36);
+  background-color: var(--huyooo-window-minimize-bg);
+  border-color: var(--huyooo-window-minimize-border);
 }
 .window-control-button--maximize {
-  background-color: rgb(40, 200, 64);
-  border-color: rgb(26, 171, 41);
+  background-color: var(--huyooo-window-maximize-bg);
+  border-color: var(--huyooo-window-maximize-border);
 }
 .window-control-icon {
-  color: rgba(0, 0, 0, 0.5);
+  color: var(--huyooo-window-control-icon);
   opacity: 0;
   transition: opacity 200ms;
   width: 7px;
@@ -978,13 +1062,13 @@
   opacity: 1;
 }
 .window-control-button--close:hover {
-  background-color: rgba(255, 95, 87, 0.8);
+  background-color: color-mix(in srgb, var(--huyooo-window-close-bg) 80%, transparent);
 }
 .window-control-button--minimize:hover {
-  background-color: rgba(254, 188, 46, 0.8);
+  background-color: color-mix(in srgb, var(--huyooo-window-minimize-bg) 80%, transparent);
 }
 .window-control-button--maximize:hover {
-  background-color: rgba(40, 200, 64, 0.8);
+  background-color: color-mix(in srgb, var(--huyooo-window-maximize-bg) 80%, transparent);
 }
 .window-title-info {
   display: flex;
@@ -999,7 +1083,7 @@
 .window-title-text {
   font-weight: 500;
   font-size: 0.75rem;
-  color: rgb(75, 85, 99);
+  color: var(--huyooo-text-muted);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1106,16 +1190,16 @@
 .compress-dialog-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--huyooo-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10000;
 }
 .compress-dialog {
-  background: white;
+  background: var(--huyooo-panel-bg);
   border-radius: 12px;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--huyooo-shadow-lg);
   width: 420px;
   max-width: 90vw;
   max-height: 90vh;
@@ -1128,7 +1212,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
-  border-bottom: 1px solid rgb(229, 231, 233);
+  border-bottom: 1px solid var(--huyooo-border);
 }
 .compress-dialog-title {
   display: flex;
@@ -1136,22 +1220,22 @@
   gap: 8px;
   font-weight: 600;
   font-size: 16px;
-  color: rgb(17, 24, 39);
+  color: var(--huyooo-text);
 }
 .compress-dialog-close {
   background: none;
   border: none;
   padding: 4px;
   cursor: pointer;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .compress-dialog-close:hover {
-  background: rgb(243, 244, 246);
-  color: rgb(55, 65, 81);
+  background: var(--huyooo-muted);
+  color: var(--huyooo-text);
 }
 .compress-dialog-content {
   padding: 20px;
@@ -1165,9 +1249,9 @@
   align-items: center;
   gap: 8px;
   padding: 12px;
-  background: rgb(249, 250, 251);
+  background: var(--huyooo-surface);
   border-radius: 8px;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
   font-size: 14px;
 }
 .compress-dialog-field {
@@ -1178,7 +1262,7 @@
 .compress-dialog-field > label {
   font-size: 13px;
   font-weight: 500;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
 }
 .compress-dialog-input-group {
   display: flex;
@@ -1187,48 +1271,51 @@
 .compress-dialog-input-group input {
   flex: 1;
   padding: 8px 12px;
-  border: 1px solid rgb(209, 213, 219);
+  border: 1px solid var(--huyooo-border);
   border-radius: 6px 0 0 6px;
   font-size: 14px;
   outline: none;
   transition: border-color 0.2s;
+  background: var(--huyooo-surface-2);
+  color: var(--huyooo-text);
 }
 .compress-dialog-input-group input:focus {
-  border-color: rgb(59, 130, 246);
+  border-color: var(--huyooo-primary);
 }
 .compress-dialog-ext {
   padding: 8px 12px;
-  background: rgb(243, 244, 246);
-  border: 1px solid rgb(209, 213, 219);
+  background: var(--huyooo-muted);
+  border: 1px solid var(--huyooo-border);
   border-left: none;
   border-radius: 0 6px 6px 0;
   font-size: 14px;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
 }
 .compress-dialog-toggle-password {
   padding: 8px 12px;
-  background: rgb(243, 244, 246);
-  border: 1px solid rgb(209, 213, 219);
+  background: var(--huyooo-muted);
+  border: 1px solid var(--huyooo-border);
   border-left: none;
   border-radius: 0 6px 6px 0;
   font-size: 12px;
-  color: rgb(59, 130, 246);
+  color: var(--huyooo-primary);
   cursor: pointer;
 }
 .compress-dialog-toggle-password:hover {
-  background: rgb(229, 231, 235);
+  background: var(--huyooo-muted-hover);
 }
 .compress-dialog-field select {
   padding: 8px 12px;
-  border: 1px solid rgb(209, 213, 219);
+  border: 1px solid var(--huyooo-border);
   border-radius: 6px;
   font-size: 14px;
   outline: none;
-  background: white;
+  background: var(--huyooo-surface-2);
+  color: var(--huyooo-text);
   cursor: pointer;
 }
 .compress-dialog-field select:focus {
-  border-color: rgb(59, 130, 246);
+  border-color: var(--huyooo-primary);
 }
 .compress-dialog-levels {
   display: flex;
@@ -1240,17 +1327,17 @@
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  border: 1px solid rgb(229, 231, 233);
+  border: 1px solid var(--huyooo-border);
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s;
 }
 .compress-dialog-level:hover {
-  background: rgb(249, 250, 251);
+  background: var(--huyooo-surface);
 }
 .compress-dialog-level:has(input:checked) {
-  border-color: rgb(59, 130, 246);
-  background: rgb(239, 246, 255);
+  border-color: var(--huyooo-primary);
+  background: var(--huyooo-focus-ring);
 }
 .compress-dialog-level input {
   margin: 0;
@@ -1258,11 +1345,11 @@
 .compress-dialog-level-label {
   font-size: 14px;
   font-weight: 500;
-  color: rgb(17, 24, 39);
+  color: var(--huyooo-text);
 }
 .compress-dialog-level-desc {
   font-size: 12px;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   margin-left: auto;
 }
 .compress-dialog-checkbox label {
@@ -1271,7 +1358,7 @@
   gap: 8px;
   cursor: pointer;
   font-size: 14px;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
 }
 .compress-dialog-checkbox input {
   margin: 0;
@@ -1280,7 +1367,7 @@
 }
 .compress-dialog-preview {
   padding: 10px 12px;
-  background: rgb(249, 250, 251);
+  background: var(--huyooo-surface);
   border-radius: 6px;
   font-size: 12px;
   display: flex;
@@ -1288,10 +1375,10 @@
   gap: 4px;
 }
 .compress-dialog-preview-label {
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
 }
 .compress-dialog-preview-path {
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
   word-break: break-all;
 }
 .compress-dialog-footer {
@@ -1299,7 +1386,7 @@
   justify-content: flex-end;
   gap: 12px;
   padding: 16px 20px;
-  border-top: 1px solid rgb(229, 231, 233);
+  border-top: 1px solid var(--huyooo-border);
 }
 .compress-dialog-btn {
   padding: 8px 20px;
@@ -1310,24 +1397,24 @@
   transition: all 0.2s;
 }
 .compress-dialog-btn-cancel {
-  background: white;
-  border: 1px solid rgb(209, 213, 219);
-  color: rgb(55, 65, 81);
+  background: var(--huyooo-surface-2);
+  border: 1px solid var(--huyooo-border);
+  color: var(--huyooo-text);
 }
 .compress-dialog-btn-cancel:hover {
-  background: rgb(249, 250, 251);
+  background: var(--huyooo-surface);
 }
 .compress-dialog-btn-confirm {
-  background: rgb(59, 130, 246);
-  border: 1px solid rgb(59, 130, 246);
+  background: var(--huyooo-primary);
+  border: 1px solid var(--huyooo-primary);
   color: white;
 }
 .compress-dialog-btn-confirm:hover {
-  background: rgb(37, 99, 235);
+  background: var(--huyooo-primary-hover, var(--huyooo-primary));
 }
 .compress-dialog-btn-confirm:disabled {
-  background: rgb(156, 163, 175);
-  border-color: rgb(156, 163, 175);
+  background: var(--huyooo-text-disabled);
+  border-color: var(--huyooo-text-disabled);
   cursor: not-allowed;
 }
 
@@ -1335,16 +1422,16 @@
 .progress-dialog-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--huyooo-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10001;
 }
 .progress-dialog {
-  background: white;
+  background: var(--huyooo-panel-bg);
   border-radius: 12px;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--huyooo-shadow-lg);
   width: 380px;
   max-width: 90vw;
   overflow: hidden;
@@ -1356,7 +1443,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
-  border-bottom: 1px solid rgb(229, 231, 233);
+  border-bottom: 1px solid var(--huyooo-border);
 }
 .progress-dialog-title {
   display: flex;
@@ -1364,22 +1451,22 @@
   gap: 10px;
   font-weight: 600;
   font-size: 16px;
-  color: rgb(17, 24, 39);
+  color: var(--huyooo-text);
 }
 .progress-dialog-close {
   background: none;
   border: none;
   padding: 4px;
   cursor: pointer;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .progress-dialog-close:hover {
-  background: rgb(243, 244, 246);
-  color: rgb(55, 65, 81);
+  background: var(--huyooo-muted);
+  color: var(--huyooo-text);
 }
 .progress-dialog-content {
   padding: 24px 20px;
@@ -1389,7 +1476,7 @@
 }
 .progress-dialog-status {
   font-size: 14px;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
   text-align: center;
 }
 .progress-dialog-bar-container {
@@ -1400,26 +1487,26 @@
 .progress-dialog-bar {
   flex: 1;
   height: 8px;
-  background: rgb(229, 231, 233);
+  background: var(--huyooo-border);
   border-radius: 4px;
   overflow: hidden;
 }
 .progress-dialog-bar-fill {
   height: 100%;
-  background: rgb(59, 130, 246);
+  background: var(--huyooo-primary);
   border-radius: 4px;
   transition: width 0.3s ease;
 }
 .progress-dialog-percent {
   font-size: 13px;
   font-weight: 500;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
   min-width: 40px;
   text-align: right;
 }
 .progress-dialog-current-file {
   font-size: 12px;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
@@ -1427,21 +1514,21 @@
 }
 .progress-dialog-count {
   font-size: 12px;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   text-align: center;
 }
 .progress-dialog-error {
   padding: 12px;
-  background: rgb(254, 242, 242);
-  border: 1px solid rgb(254, 202, 202);
+  background: var(--huyooo-danger-bg);
+  border: 1px solid var(--huyooo-danger-border);
   border-radius: 6px;
-  color: rgb(185, 28, 28);
+  color: var(--huyooo-danger);
   font-size: 13px;
 }
 .progress-dialog-output {
   padding: 12px;
-  background: rgb(240, 253, 244);
-  border: 1px solid rgb(187, 247, 208);
+  background: var(--huyooo-success-bg);
+  border: 1px solid var(--huyooo-success-border);
   border-radius: 6px;
   font-size: 12px;
   display: flex;
@@ -1449,11 +1536,11 @@
   gap: 4px;
 }
 .progress-dialog-output-label {
-  color: rgb(22, 101, 52);
+  color: var(--huyooo-success);
   font-weight: 500;
 }
 .progress-dialog-output-path {
-  color: rgb(21, 128, 61);
+  color: var(--huyooo-success);
   word-break: break-all;
 }
 .progress-dialog-footer {
@@ -1461,7 +1548,7 @@
   justify-content: flex-end;
   gap: 12px;
   padding: 16px 20px;
-  border-top: 1px solid rgb(229, 231, 233);
+  border-top: 1px solid var(--huyooo-border);
 }
 .progress-dialog-btn {
   padding: 8px 16px;
@@ -1475,32 +1562,32 @@
   gap: 6px;
 }
 .progress-dialog-btn-cancel {
-  background: white;
-  border: 1px solid rgb(209, 213, 219);
-  color: rgb(55, 65, 81);
+  background: var(--huyooo-surface-2);
+  border: 1px solid var(--huyooo-border);
+  color: var(--huyooo-text);
 }
 .progress-dialog-btn-cancel:hover {
-  background: rgb(249, 250, 251);
+  background: var(--huyooo-surface);
 }
 .progress-dialog-btn-folder {
-  background: rgb(240, 253, 244);
-  border: 1px solid rgb(187, 247, 208);
-  color: rgb(22, 101, 52);
+  background: var(--huyooo-success-bg);
+  border: 1px solid var(--huyooo-success-border);
+  color: var(--huyooo-success);
 }
 .progress-dialog-btn-folder:hover {
-  background: rgb(220, 252, 231);
+  background: color-mix(in srgb, var(--huyooo-success-bg) 75%, var(--huyooo-success) 25%);
 }
 .progress-dialog-btn-close {
-  background: rgb(59, 130, 246);
-  border: 1px solid rgb(59, 130, 246);
+  background: var(--huyooo-primary);
+  border: 1px solid var(--huyooo-primary);
   color: white;
 }
 .progress-dialog-btn-close:hover {
-  background: rgb(37, 99, 235);
+  background: var(--huyooo-primary-hover, var(--huyooo-primary));
 }
 .progress-dialog-icon-spin {
   animation: spin 1s linear infinite;
-  color: rgb(59, 130, 246);
+  color: var(--huyooo-primary);
 }
 @keyframes spin {
   from {
@@ -1511,17 +1598,17 @@
   }
 }
 .progress-dialog-icon-success {
-  color: rgb(34, 197, 94);
+  color: var(--huyooo-success);
 }
 .progress-dialog-icon-error {
-  color: rgb(239, 68, 68);
+  color: var(--huyooo-danger);
 }
 
 /* src/components/FileInfoDialog.css */
 .file-info-dialog-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--huyooo-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1537,15 +1624,15 @@
   }
 }
 .file-info-dialog {
-  background: #ffffff;
-  border: 1px solid #e0e0e0;
+  background: var(--huyooo-panel-bg);
+  border: 1px solid var(--huyooo-border);
   border-radius: 12px;
   width: 420px;
   max-width: 90vw;
   max-height: 80vh;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--huyooo-menu-shadow);
   animation: file-info-slideIn 0.2s ease-out;
 }
 @keyframes file-info-slideIn {
@@ -1558,26 +1645,14 @@
     transform: scale(1) translateY(0);
   }
 }
-@media (prefers-color-scheme: dark) {
-  .file-info-dialog {
-    background: #2d2d2d;
-    border-color: #404040;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  }
-}
 .file-info-dialog-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--huyooo-border);
   gap: 12px;
 }
-@media (prefers-color-scheme: dark) {
-  .file-info-dialog-header {
-    border-bottom-color: #404040;
-  }
-}
 .file-info-dialog-title {
   display: flex;
   align-items: center;
@@ -1588,16 +1663,11 @@
 .file-info-dialog-name {
   font-size: 16px;
   font-weight: 600;
-  color: #1a1a1a;
+  color: var(--huyooo-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-@media (prefers-color-scheme: dark) {
-  .file-info-dialog-name {
-    color: #e0e0e0;
-  }
-}
 .file-info-dialog-close {
   display: flex;
   align-items: center;
@@ -1606,24 +1676,15 @@
   height: 28px;
   border: none;
   background: transparent;
-  color: #666;
+  color: var(--huyooo-text-muted);
   border-radius: 6px;
   cursor: pointer;
   flex-shrink: 0;
   transition: all 0.15s ease;
 }
 .file-info-dialog-close:hover {
-  background: #f0f0f0;
-  color: #333;
-}
-@media (prefers-color-scheme: dark) {
-  .file-info-dialog-close {
-    color: #888;
-  }
-  .file-info-dialog-close:hover {
-    background: #404040;
-    color: #e0e0e0;
-  }
+  background: var(--huyooo-muted);
+  color: var(--huyooo-text);
 }
 .file-info-dialog-content {
   padding: 16px 20px;
@@ -1643,29 +1704,19 @@
   gap: 6px;
   width: 90px;
   flex-shrink: 0;
-  color: #666;
+  color: var(--huyooo-text-muted);
   font-size: 13px;
 }
-@media (prefers-color-scheme: dark) {
-  .file-info-label {
-    color: #888;
-  }
-}
 .file-info-label svg {
   flex-shrink: 0;
 }
 .file-info-value {
   flex: 1;
-  color: #1a1a1a;
+  color: var(--huyooo-text);
   font-size: 13px;
   word-break: break-all;
   line-height: 1.4;
 }
-@media (prefers-color-scheme: dark) {
-  .file-info-value {
-    color: #e0e0e0;
-  }
-}
 .file-info-value--path {
   font-family:
     "SF Mono",
@@ -1674,55 +1725,46 @@
     "Roboto Mono",
     monospace;
   font-size: 12px;
-  background: #f5f5f5;
+  background: var(--huyooo-code-bg);
+  color: var(--huyooo-code-text);
   padding: 4px 8px;
   border-radius: 4px;
   user-select: all;
 }
-@media (prefers-color-scheme: dark) {
-  .file-info-value--path {
-    background: #383838;
-  }
-}
 .file-info-icon {
   width: 32px;
   height: 32px;
   flex-shrink: 0;
 }
 .file-info-icon--folder {
-  color: #dcb67a;
+  color: var(--huyooo-filetype-folder);
 }
 .file-info-icon--image {
-  color: #7ec699;
+  color: var(--huyooo-filetype-image);
 }
 .file-info-icon--video {
-  color: #c678dd;
+  color: var(--huyooo-filetype-video);
 }
 .file-info-icon--music {
-  color: #e06c75;
+  color: var(--huyooo-filetype-music);
 }
 .file-info-icon--document {
-  color: #61afef;
+  color: var(--huyooo-filetype-document);
 }
 .file-info-icon--code {
-  color: #98c379;
+  color: var(--huyooo-filetype-code);
 }
 .file-info-icon--archive {
-  color: #d19a66;
+  color: var(--huyooo-filetype-archive);
 }
 .file-info-icon--file {
-  color: #abb2bf;
+  color: var(--huyooo-filetype-file);
 }
 .file-info-dialog-footer {
   display: flex;
   justify-content: flex-end;
   padding: 12px 20px;
-  border-top: 1px solid #e0e0e0;
-}
-@media (prefers-color-scheme: dark) {
-  .file-info-dialog-footer {
-    border-top-color: #404040;
-  }
+  border-top: 1px solid var(--huyooo-border);
 }
 .file-info-dialog-btn {
   padding: 6px 16px;
@@ -1731,10 +1773,10 @@
   font-size: 13px;
   cursor: pointer;
   transition: all 0.15s ease;
-  background: #007aff;
+  background: var(--huyooo-primary);
   color: white;
 }
 .file-info-dialog-btn:hover {
-  background: #0066d6;
+  background: var(--huyooo-primary-hover, var(--huyooo-primary));
 }
 /*# sourceMappingURL=index.css.map */