/* 暗黑模式样式 - 2026-07-11 * 文件：common/css/dark_mode.css * 说明：通过启用，覆盖 office-container / news-channel / news-card / office-header 等 * 不影响 sidebar（已是深色）和 list_office.css 的 light 模式 */ body.dark-mode { --dm-bg: #0f172a; /* 主背景（深蓝灰） */ --dm-card: #1e293b; /* 卡片背景 */ --dm-card-2: #273449; /* 二级卡片/hover */ --dm-text: #e2e8f0; /* 主要文字 */ --dm-muted: #94a3b8; /* 次要文字 */ --dm-border: #334155; /* 边框 */ --dm-accent: #60a5fa; /* 主色（亮一点的蓝） */ --dm-accent-2: #93c5fd; --dm-success: #4ade80; --dm-danger: #f87171; --dm-warn: #fbbf24; --dm-stat-bg: rgba(96, 165, 250, 0.10); --dm-stat-active: rgba(96, 165, 250, 0.18); background: var(--dm-bg); color: var(--dm-text); } /* 主容器：背景从淡灰变深蓝灰 */ body.dark-mode .office-container { background: var(--dm-bg); } /* 卡片背景从白色变深色 */ body.dark-mode .office-card { background: var(--dm-card); border-color: var(--dm-border); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } /* 标题区：深色文字变浅色 */ body.dark-mode .office-header { border-bottom-color: var(--dm-border); } body.dark-mode .office-header__title { color: var(--dm-text); } body.dark-mode .office-header__icon { filter: brightness(1.2); } body.dark-mode .office-header__tagline { color: var(--dm-muted); } body.dark-mode .office-header__subtitle { color: var(--dm-muted); } body.dark-mode .office-stat strong { color: var(--dm-accent-2); } body.dark-mode .office-stat-sep { color: #475569; } body.dark-mode .office-stat--active { background: var(--dm-stat-active); color: var(--dm-accent-2); } body.dark-mode .office-stat--active a { color: var(--dm-danger); } /* 按钮：白底变深色 */ body.dark-mode .office-btn { background: var(--dm-card-2); border-color: var(--dm-border); color: var(--dm-text); } body.dark-mode .office-btn:hover { background: #334155; border-color: #475569; } body.dark-mode .office-btn--primary { background: rgba(96, 165, 250, 0.18); border-color: rgba(96, 165, 250, 0.40); color: var(--dm-accent-2); } body.dark-mode .office-btn--primary:hover { background: rgba(96, 165, 250, 0.28); } /* 搜索输入框 */ body.dark-mode .office-input { background: var(--dm-card-2); border-color: var(--dm-border); color: var(--dm-text); } body.dark-mode .office-input:focus { border-color: var(--dm-accent); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.20); } /* 文章首页卡片（news-channel / news-card） */ body.dark-mode .news-channel { background: var(--dm-card); border-color: var(--dm-border); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } body.dark-mode .news-channel__title { background: linear-gradient(90deg, rgba(96, 165, 250, 0.12), rgba(96, 165, 250, 0)); border-bottom-color: var(--dm-border); color: var(--dm-accent-2); } body.dark-mode .news-channel__title a { color: var(--dm-accent-2); } body.dark-mode .news-channel__title a::after { color: var(--dm-muted); } body.dark-mode .news-card { background: var(--dm-card-2); border-color: var(--dm-border); color: var(--dm-text); } body.dark-mode .news-card:hover { background: #334155; border-color: rgba(96, 165, 250, 0.5); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); color: var(--dm-text); } body.dark-mode .news-card h3 { color: var(--dm-accent-2); } body.dark-mode .news-card .excerpt { color: #cbd5e1; } body.dark-mode .news-card .meta { color: var(--dm-muted); border-top-color: var(--dm-border); } /* "暂无分类数据" 提示 */ body.dark-mode p[style*="color:var(--lo-muted)"] { color: var(--dm-muted) !important; } /* 主区域 app-main 背景（common_layout.css 中是 #f4f6f9） */ body.dark-mode .app-main, body.dark-mode .app-wrapper { background: var(--dm-bg); color: var(--dm-text); } /* 表格行（如有表格） */ body.dark-mode table thead th { background: #273449; color: var(--dm-text); border-bottom-color: var(--dm-border); } body.dark-mode table tbody td { color: var(--dm-text); border-bottom-color: var(--dm-border); } body.dark-mode table tbody tr:hover td { background: rgba(96, 165, 250, 0.06); } /* 通用文本颜色 */ body.dark-mode, body.dark-mode a { color: var(--dm-accent); } body.dark-mode a:hover { color: var(--dm-accent-2); } /* 暗色模式切换按钮 */ .dm-toggle { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--lo-border); background: #fff; color: var(--lo-text); font-size: 14px; cursor: pointer; user-select: none; transition: all .2s; } .dm-toggle:hover { border-color: #cbd5e1; background: #f8fafc; } .dm-toggle__icon { font-size: 16px; line-height: 1; } body.dark-mode .dm-toggle { background: var(--dm-card-2); border-color: var(--dm-border); color: var(--dm-text); } body.dark-mode .dm-toggle:hover { background: #334155; border-color: #475569; } /* 滚动条暗色 */ body.dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; } body.dark-mode ::-webkit-scrollbar-track { background: var(--dm-bg); } body.dark-mode ::-webkit-scrollbar-thumb { background: var(--dm-card-2); border-radius: 5px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #475569; }