/* ============================================================ X-Chat 深色主题 通过 启用,由 auth.js 自动跟随系统 (prefers-color-scheme)或按用户手动设置切换。所有页面共用。 ============================================================ */ [data-theme="dark"] { /* 语义色:深色底 + 浅色字 */ --work-background: #0b0b0f; --work-foreground: #f9fafb; --work-card: #14141a; --work-card-foreground: #f9fafb; --work-popover: #14141a; --work-popover-foreground: #f9fafb; --work-muted: #1f2937; --work-muted-foreground: #9ca3af; --work-border: #374151; --work-input: #374151; --work-ring: #10b981; /* 业务语义变量(所有页面通用) */ --work-bg: #0b0b0f; --work-surface: #14141a; --work-surface-2: #1f2937; --work-ink: #f9fafb; --work-ink-2: #d1d5db; --work-ink-3: #9ca3af; --work-line: #374151; /* 品牌色系:整体调亮一档,保证深底上的对比度 */ --work-primary-50: #0e2b22; --work-primary-100: #123a2c; --work-primary-200: #14532d; --work-primary-300: #166534; --work-primary-400: #059669; --work-primary-500: #10b981; --work-primary-600: #34d399; --work-primary-700: #6ee7b7; --work-primary-800: #a7f3d0; --work-primary-900: #d1fae5; --work-primary-foreground: #06281f; /* 状态色 */ --work-state-success: #34d399; --work-state-warning: #fbbf24; --work-state-error: #f87171; --work-state-info: #60a5fa; /* 阴影更深 */ --work-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.3); --work-shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.65); } /* 深色下通用微调 */ [data-theme="dark"] body { color-scheme: dark; } [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { color-scheme: dark; } /* 移动端抽屉/导航在深色下 */ [data-theme="dark"] .xchat-mobile-drawer { border-right-color: var(--work-line); } [data-theme="dark"] .xchat-mobile-drawer-brand, [data-theme="dark"] .xchat-mobile-drawer-footer { border-color: var(--work-line); } [data-theme="dark"] .xchat-mobile-nav-item.active { background: var(--work-primary-50); } /* 在线绿点在深色下仍醒目(保持原色) */ [data-theme="dark"] .presence-dot, [data-theme="dark"] .contact-presence { border-color: #14141a; }