@huyooo/file-explorer-frontend-vue 0.4.12 → 0.4.15

package/src/components/ProgressDialog.vue

@@ -157,7 +157,7 @@ const handleClose = () => {
 .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;
@@ -165,9 +165,9 @@ const handleClose = () => {
 }
 
 .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;
@@ -180,7 +180,7 @@ const handleClose = () => {
   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 {
@@ -189,7 +189,7 @@ const handleClose = () => {
   gap: 10px;
   font-weight: 600;
   font-size: 16px;
-  color: rgb(17, 24, 39);
+  color: var(--huyooo-text);
 }
 
 .progress-dialog-close {
@@ -197,7 +197,7 @@ const handleClose = () => {
   border: none;
   padding: 4px;
   cursor: pointer;
-  color: rgb(107, 114, 128);
+  color: var(--huyooo-text-muted);
   border-radius: 4px;
   display: flex;
   align-items: center;
@@ -205,8 +205,8 @@ const handleClose = () => {
 }
 
 .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 {
@@ -218,7 +218,7 @@ const handleClose = () => {
 
 .progress-dialog-status {
   font-size: 14px;
-  color: rgb(55, 65, 81);
+  color: var(--huyooo-text);
   text-align: center;
 }
 
@@ -231,14 +231,14 @@ const handleClose = () => {
 .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;
 }
@@ -246,14 +246,14 @@ const handleClose = () => {
 .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;
@@ -262,23 +262,23 @@ const handleClose = () => {
 
 .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;
@@ -287,12 +287,12 @@ const handleClose = () => {
 }
 
 .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;
 }
 
@@ -301,7 +301,7 @@ const handleClose = () => {
   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 {
@@ -317,39 +317,39 @@ const handleClose = () => {
 }
 
 .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 {
@@ -358,11 +358,11 @@ const handleClose = () => {
 }
 
 .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);
 }
 </style>
 

package/src/components/SortIndicator.vue

@@ -17,6 +17,6 @@ defineProps<{
   margin-left: 4px;
   display: inline-flex;
   align-items: center;
-  color: rgb(59, 130, 246);
+  color: var(--huyooo-primary);
 }
 </style>

package/src/components/StatusBar.vue

@@ -23,14 +23,14 @@ withDefaults(defineProps<{
 <style scoped>
 .file-status-bar {
   height: 1.5rem;
-  background-color: rgb(249, 250, 251);
-  border-top: 1px solid rgb(229, 231, 233);
+  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;

package/src/components/Toolbar.vue

@@ -121,9 +121,9 @@ const emit = defineEmits<{
 <style scoped>
 .file-toolbar {
   height: 3rem;
-  background: rgba(249, 250, 251, 0.9);
+  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;
@@ -140,8 +140,8 @@ const emit = defineEmits<{
 .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;
@@ -158,22 +158,22 @@ const emit = defineEmits<{
   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 {
@@ -200,6 +200,39 @@ const emit = defineEmits<{
   -webkit-app-region: no-drag;
 }
 
+/**
+ * 重要：Toolbar 的样式是 scoped，slot 传入的内容不会自动命中 `.file-toolbar-button`。
+ * 为了让宿主（example / 业务方）在 #actions 插槽里复用同名 class 时样式一致，
+ * 这里用 :deep() 补齐一份（对齐 React 版的表现）。
+ */
+.file-toolbar-actions :deep(.file-toolbar-button) {
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+  transition: all 200ms;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--huyooo-text);
+}
+
+.file-toolbar-actions :deep(.file-toolbar-button:hover:not(:disabled)) {
+  background: var(--huyooo-muted-hover);
+}
+
+.file-toolbar-actions :deep(.file-toolbar-button:disabled) {
+  color: var(--huyooo-text-disabled);
+  cursor: default;
+}
+
+.file-toolbar-actions :deep(.file-toolbar-button--active) {
+  background: var(--huyooo-surface-2);
+  box-shadow: var(--huyooo-shadow-sm);
+  color: var(--huyooo-text);
+}
+
 .file-toolbar-search {
   position: relative;
   display: none;
@@ -216,16 +249,16 @@ const emit = defineEmits<{
   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;
@@ -236,36 +269,36 @@ const emit = defineEmits<{
   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);
 }
 </style>

package/src/components/Window.vue

@@ -317,7 +317,7 @@ onMounted(() => {
   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;
@@ -328,10 +328,10 @@ onMounted(() => {
   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;
@@ -343,10 +343,10 @@ onMounted(() => {
   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;
 }
@@ -369,7 +369,7 @@ onMounted(() => {
   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;
@@ -393,22 +393,22 @@ onMounted(() => {
 }
 
 .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;
@@ -421,15 +421,15 @@ onMounted(() => {
 }
 
 .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 {
@@ -446,7 +446,7 @@ onMounted(() => {
 .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;

package/src/index.ts

@@ -1,3 +1,6 @@
+// 主题 token（全局 CSS 变量）
+import './styles.css';
+
 // Types
 export * from './types';
 

package/src/styles.css

@@ -0,0 +1,149 @@
+/**
+ * File Explorer Frontend - 全局主题 token
+ *
+ * 主题协议（跨项目统一）：
+ * - 使用 document.documentElement 的 data-theme = light | dark
+ * - 默认跟随系统 prefers-color-scheme
+ *
+ * 说明：
+ * - 组件样式尽量使用 var(--huyooo-*)，避免硬编码颜色
+ */
+
+:root {
+  color-scheme: light;
+
+  --huyooo-bg: #ffffff;
+  --huyooo-surface: rgba(249, 250, 251, 0.9);
+  --huyooo-surface-2: #ffffff;
+  --huyooo-muted: rgba(229, 231, 233, 0.5);
+  --huyooo-muted-hover: rgba(209, 213, 219, 0.8);
+  --huyooo-border: rgb(229, 231, 233);
+  --huyooo-text: rgb(31, 41, 55);
+  --huyooo-text-muted: rgb(75, 85, 99);
+  --huyooo-text-disabled: rgb(156, 163, 175);
+  --huyooo-primary: rgb(59, 130, 246);
+  --huyooo-focus-ring: rgba(59, 130, 246, 0.12);
+  --huyooo-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --huyooo-scrollbar: rgba(0, 0, 0, 0.2);
+  --huyooo-scrollbar-hover: rgba(0, 0, 0, 0.3);
+  --huyooo-danger: rgb(220, 38, 38);
+  --huyooo-success: rgb(22, 163, 74);
+  --huyooo-warning: rgb(245, 158, 11);
+  --huyooo-danger-bg: rgba(254, 242, 242, 0.9);
+  --huyooo-danger-border: rgba(254, 202, 202, 0.9);
+  --huyooo-success-bg: rgba(240, 253, 244, 0.9);
+  --huyooo-success-border: rgba(187, 247, 208, 0.9);
+  --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: rgba(255, 255, 255, 0.95);
+  --huyooo-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --huyooo-code-bg: #111827;
+  --huyooo-code-text: #e5e7eb;
+  --huyooo-menu-bg: rgba(255, 255, 255, 0.95);
+  --huyooo-menu-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
+
+  /* on-primary text colors (selected state etc.) */
+  --huyooo-on-primary: #ffffff;
+  --huyooo-on-primary-muted: rgba(255, 255, 255, 0.8);
+
+  /* filetype colors (FileInfoDialog / FileIcon) */
+  --huyooo-filetype-folder: #dcb67a;
+  --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;
+
+  /* macOS window control colors (for Window component) */
+  --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);
+
+  /* media overlay helpers */
+  --huyooo-overlay-strong: rgba(0, 0, 0, 0.85);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+
+    /* 暗色：统一采用 ai-chat 的经典暗色配色（更耐看） */
+    --huyooo-bg: #27292c;
+    --huyooo-surface: #27292c;
+    --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: #2563eb;
+    --huyooo-focus-ring: rgba(37, 99, 235, 0.18);
+    --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: #ef4444;
+    --huyooo-success: #22c55e;
+    --huyooo-warning: #f59e0b;
+    --huyooo-danger-bg: rgba(239, 68, 68, 0.12);
+    --huyooo-danger-border: rgba(239, 68, 68, 0.25);
+    --huyooo-success-bg: rgba(34, 197, 94, 0.12);
+    --huyooo-success-border: rgba(34, 197, 94, 0.25);
+    --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;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+
+  /* 暗色：统一采用 ai-chat 的经典暗色配色（更耐看） */
+  --huyooo-bg: #27292c;
+  --huyooo-surface: #27292c;
+  --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: #2563eb;
+  --huyooo-focus-ring: rgba(37, 99, 235, 0.18);
+  --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: #ef4444;
+  --huyooo-success: #22c55e;
+  --huyooo-warning: #f59e0b;
+  --huyooo-danger-bg: rgba(239, 68, 68, 0.12);
+  --huyooo-danger-border: rgba(239, 68, 68, 0.25);
+  --huyooo-success-bg: rgba(34, 197, 94, 0.12);
+  --huyooo-success-border: rgba(34, 197, 94, 0.25);
+  --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);
+}