/* ========================================================================== * ★ 2026-07-28 创学系统全局深色模式覆盖样式（v2） * * 关键改动： * - 所有选择器从 body.dark 改为 .dark（适配 Tailwind 的 darkMode: 'class'） * - Tailwind 自身会用 html.dark 来激活 dark: 变体 * - 本文件负责硬编码的 Tailwind 颜色（bg-white, text-gray-900 等）的深色覆盖 * - 删除了原 line 199 的死代码 body:not(.dark):not(.light) #theme-toggle { display: none; } * * 使用方法：在每个 HTML 页面 中引入 * * ========================================================================== */ /* === 基础容器 === */ .dark { color: #E2E8F0; } .dark .bg-white { background-color: #1e293b !important; } .dark .bg-gray-50 { background-color: #0f172a !important; } .dark .bg-gray-100 { background-color: #1a2332 !important; } .dark .bg-gray-200 { background-color: #334155 !important; } .dark .bg-gray-300 { background-color: #475569 !important; } .dark .bg-gray-800 { background-color: #0f172a !important; } .dark .bg-gray-900 { background-color: #020617 !important; } .dark .bg-slate-50 { background-color: #0f172a !important; } .dark .bg-slate-100 { background-color: #1a2332 !important; } .dark .bg-slate-200 { background-color: #334155 !important; } .dark .bg-slate-800 { background-color: #0f172a !important; } .dark .bg-slate-900 { background-color: #020617 !important; } /* === 文本颜色 === */ .dark .text-gray-400 { color: #94A3B8 !important; } .dark .text-gray-500 { color: #94A3B8 !important; } .dark .text-gray-600 { color: #CBD5E1 !important; } .dark .text-gray-700 { color: #E2E8F0 !important; } .dark .text-gray-800 { color: #F1F5F9 !important; } .dark .text-gray-900 { color: #F8FAFC !important; } .dark .text-slate-500 { color: #94A3B8 !important; } .dark .text-slate-600 { color: #CBD5E1 !important; } .dark .text-slate-700 { color: #E2E8F0 !important; } .dark .text-slate-800 { color: #F1F5F9 !important; } .dark .text-slate-900 { color: #F8FAFC !important; } .dark .text-black { color: #F8FAFC !important; } /* === 边框 === */ .dark .border { border-color: #334155 !important; } .dark .border-gray-100 { border-color: #1e293b !important; } .dark .border-gray-200 { border-color: #334155 !important; } .dark .border-gray-300 { border-color: #475569 !important; } .dark .border-slate-200 { border-color: #334155 !important; } .dark .border-slate-300 { border-color: #475569 !important; } .dark .border-color { border-color: var(--border) !important; } /* === 模态弹窗 === */ .dark .modal-content, .dark [class*="modal"][class*="bg-white"] { background-color: #1e293b !important; color: #E2E8F0 !important; } /* === 2026-07-23 官网管理端弹窗：profileModal 等 inline 样式弹窗 === */ .dark [id="profileModal"] > div, .dark [id="profileModal"] input, .dark [id="profileModal"] button[data-action="cancel"] { background-color: #1e293b !important; color: #E2E8F0 !important; border-color: #334155 !important; } .dark [id="profileModal"] input::placeholder { color: #64748B !important; } /* === 2026-07-23 官网管理端：.admin-coupon-modal 深色适配（兜底） === */ .dark .admin-coupon-modal__panel { background: #1e293b !important; color: #E2E8F0 !important; border-color: #334155 !important; } .dark .admin-coupon-modal__head, .dark .admin-coupon-modal__foot { background: #0f172a !important; border-color: #334155 !important; } .dark .admin-coupon-form input, .dark .admin-coupon-form select, .dark .admin-coupon-form textarea { background-color: #0f172a !important; color: #F1F5F9 !important; border-color: #475569 !important; } .dark .admin-coupon-form input::placeholder, .dark .admin-coupon-form textarea::placeholder { color: #64748B !important; } .dark .admin-coupon-form label { color: #94A3B8 !important; } /* === 模态遮罩（更柔和） === */ .dark [class*="bg-black"][class*="bg-opacity"] { background-color: rgba(0, 0, 0, 0.7) !important; } /* === 输入框 === */ .dark input[type="text"], .dark input[type="password"], .dark input[type="email"], .dark input[type="tel"], .dark input[type="number"], .dark textarea, .dark select, .dark .form-input, .dark .form-select { background-color: #0f172a !important; color: #F1F5F9 !important; border-color: #475569 !important; } .dark input::placeholder, .dark textarea::placeholder { color: #64748B !important; } .dark input:focus, .dark textarea:focus, .dark select:focus { border-color: var(--accent) !important; outline-color: var(--accent) !important; } /* === 卡片阴影（深色下更柔和） === */ .dark .shadow, .dark .shadow-sm, .dark .shadow-md, .dark .shadow-lg { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; } /* === 表格 === */ .dark table { color: #E2E8F0 !important; } .dark thead { background-color: #0f172a !important; } .dark tbody tr { border-color: #334155 !important; } .dark tbody tr:hover { background-color: rgba(218, 165, 32, 0.05) !important; } /* === 状态徽章（深色下更亮） === */ .dark .bg-yellow-100 { background-color: rgba(251, 191, 36, 0.15) !important; } .dark .text-yellow-600 { color: #FCD34D !important; } .dark .text-yellow-700 { color: #FBBF24 !important; } .dark .text-yellow-800 { color: #F59E0B !important; } .dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.15) !important; } .dark .text-green-600 { color: #4ADE80 !important; } .dark .text-green-700 { color: #34D399 !important; } .dark .text-green-800 { color: #10B981 !important; } .dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.15) !important; } .dark .text-red-600 { color: #F87171 !important; } .dark .text-red-700 { color: #FCA5A5 !important; } .dark .text-red-800 { color: #FCA5A5 !important; } .dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.15) !important; } .dark .text-blue-600 { color: #60A5FA !important; } .dark .text-blue-700 { color: #93C5FD !important; } .dark .text-blue-800 { color: #BFDBFE !important; } .dark .bg-orange-100 { background-color: rgba(251, 146, 60, 0.15) !important; } .dark .text-orange-600 { color: #FB923C !important; } .dark .text-orange-700 { color: #FDBA74 !important; } .dark .text-orange-800 { color: #FED7AA !important; } /* === 进度条 === */ .dark .bg-gray-200 { background-color: #334155 !important; } /* === 链接 === */ .dark a { color: #93C5FD; } .dark a:hover { color: #BFDBFE; } /* === 主题切换按钮 === */ .dark #theme-toggle { background-color: rgba(251, 191, 36, 0.2) !important; } .dark #theme-toggle i { color: #FBBF24 !important; } :root:not(.dark) #theme-toggle { background-color: rgba(218, 165, 32, 0.15) !important; } :root:not(.dark) #theme-toggle i { color: #DAA520 !important; } /* === 滚动条 === */ .dark ::-webkit-scrollbar { width: 8px; height: 8px; } .dark ::-webkit-scrollbar-track { background: #0f172a; } .dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } .dark ::-webkit-scrollbar-thumb:hover { background: #475569; } /* === 渐变背景深色覆盖 === */ .dark [class*="bg-gradient-to"] { /* 保持渐变但降低不透明度 */ opacity: 0.95; }