style: 支持深色主题

This commit is contained in:
ccnetcore
2026-01-13 22:55:43 +08:00
parent 6b6ddcf550
commit c2f074cb08
8 changed files with 1484 additions and 24 deletions

View File

@@ -219,24 +219,96 @@
/* ========== 暗色模式变量 ========== */
[data-theme="dark"] {
--sidebar-background-color: #1f2937;
--header-background-color: #111827;
/* ========== 颜色系统 ========== */
--color-primary: #60a5fa;
--color-primary-light: #93c5fd;
--color-primary-lighter: #bfdbfe;
--color-primary-dark: #3b82f6;
--color-primary-darker: #2563eb;
/* 辅助色 */
--color-success: #34d399;
--color-warning: #fbbf24;
--color-danger: #f87171;
--color-info: #9ca3af;
/* 中性色 */
--color-white: #ffffff;
--color-black: #000000;
--color-gray-50: #111827;
--color-gray-100: #1f2937;
--color-gray-200: #374151;
--color-gray-300: #4b5563;
--color-gray-400: #6b7280;
--color-gray-500: #9ca3af;
--color-gray-600: #d1d5db;
--color-gray-700: #e5e7eb;
--color-gray-800: #f3f4f6;
--color-gray-900: #f9fafb;
/* ========== 头部区域 ========== */
--header-background-color: #1f2937;
--header-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
--header-text-color: #f3f4f6;
--header-icon-color: #9ca3af;
--header-border: 1px solid #374151;
/* ========== 侧边栏区域 ========== */
--sidebar-background-color: #111827;
--sidebar-active-bg-color: #374151;
--sidebar-active-text-color: #f9fafb;
--sidebar-hover-bg-color: #374151;
--sidebar-text-color: #d1d5db;
--sidebar-icon-color: #9ca3af;
--sidebar-border-color: rgba(255, 255, 255, 0.08);
/* ========== 主要内容区域 ========== */
--content-background-color: #111827;
/* ========== 聊天区域 ========== */
--chat-container-bg: #111827;
--chat-sender-bg: #1f2937;
--chat-bubble-ai-bg: #374151;
--chat-sender-border: 1px solid #374151;
--chat-bubble-user-bg: #3b82f6;
--chat-bubble-user-text: #ffffff;
--chat-bubble-ai-bg: #1f2937;
--chat-bubble-ai-text: #e5e7eb;
--chat-typing-indicator-color: #6b7280;
/* ========== 登录弹框 ========== */
--login-dialog-logo-background: #1f2937;
--login-dialog-logo-text-color: #f3f4f6;
--login-dialog-form-bg: #1f2937;
--login-dialog-input-border: 1px solid #374151;
--login-dialog-input-focus-border: 1px solid #60a5fa;
/* 文字颜色 */
--text-color-primary: #f9fafb;
--text-color-secondary: #e5e7eb;
--text-color-tertiary: #9ca3af;
--text-color-placeholder: #6b7280;
--text-color-disabled: #4b5563;
--text-color-inverse: #111827;
/* 背景颜色 */
--bg-color-primary: #111827;
--bg-color-secondary: #1f2937;
--bg-color-tertiary: #374151;
--bg-color-overlay: rgba(0, 0, 0, 0.7);
--bg-color-mask: rgba(0, 0, 0, 0.6);
/* ========== 边框 ========== */
--border-color-light: #374151;
--border-color-default: #4b5563;
--border-color-dark: #6b7280;
/* ========== 阴影系统 ========== */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}
/* ========== 响应式断点 ========== */