/* ================================================================== * 云南地接网 - 暗色模式样式 dark-mode.css * ------------------------------------------------------------------ * 通过 控制，与 data-theme 主题色相互独立。 * 主题色（--p / --y-primary 系列）在暗色模式下保持不变。 * * 暗色配色： * 背景 #0f172a 卡片背景 #1e293b * 文字主色 #e2e8f0 文字次要 #94a3b8 * 边框 #334155 输入框背景 #1e293b * ================================================================== */ /* ------------------------------------------------------------------ * 0. 防闪烁：初始加载时由 common.js / 内联脚本添加 disable-transitions， * 渲染完成后再移除，避免首屏出现颜色过渡动画。 * ------------------------------------------------------------------ */ html.disable-transitions, html.disable-transitions * { transition: none !important; } /* ------------------------------------------------------------------ * 1. 暗色模式色彩变量（覆盖 main.css / themes.css 中的同名变量） * 注意：本规则在 themes.css 之后引入，故优先级更高，可覆盖主题背景。 * 主题色 --y-primary / --y-primary-dark / --y-primary-light / * --y-accent / --y-accent-light 以及 --p 系列「保持不变」。 * ------------------------------------------------------------------ */ [data-mode="dark"] { --y-bg: #0f172a; --y-card: #1e293b; --y-text: #e2e8f0; --y-muted: #94a3b8; --y-border: #334155; /* footer 已是深色，保持不变：--y-footer / --y-footer-text 不动 */ color-scheme: dark; } [data-mode="light"] { color-scheme: light; } /* ------------------------------------------------------------------ * 2. body 背景与文字色 * ------------------------------------------------------------------ */ [data-mode="dark"] body { background-color: #0f172a; color: #e2e8f0; } /* ------------------------------------------------------------------ * 3. 卡片组件：.card / .article-card / .y-card / .product-card / * .material-card / .sidebar-widget * （其中基于 var(--y-card) 的会自动适配，此处显式覆盖以兼容 * 静态 HTML 中写死的 #fff 背景） * ------------------------------------------------------------------ */ [data-mode="dark"] .card, [data-mode="dark"] .article-card, [data-mode="dark"] .y-card, [data-mode="dark"] .product-card, [data-mode="dark"] .material-card, [data-mode="dark"] .sidebar-widget { background-color: #1e293b; border-color: #334155; color: #e2e8f0; } /* 静态页里的素材卡片正文 */ [data-mode="dark"] .material-card .card-body .title, [data-mode="dark"] .material-card .card-body .file-info, [data-mode="dark"] .material-card .card-body .file-size { color: #e2e8f0; } /* ------------------------------------------------------------------ * 4. header 导航栏 & 移动端菜单（写死 bg-white，需覆盖为深色） * ------------------------------------------------------------------ */ [data-mode="dark"] header, [data-mode="dark"] #mobile-menu { background-color: #1e293b !important; border-color: #334155; color: #e2e8f0; } /* 语言 / 主题切换等 hover 浅灰底色 */ [data-mode="dark"] header .hover\:bg-gray-100:hover, [data-mode="dark"] #mobile-menu .hover\:bg-gray-100:hover { background-color: #334155; } /* ------------------------------------------------------------------ * 5. footer 已是深色，保持不变（不覆盖） * ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ * 6. 通用白色 / 浅灰背景面（写死的 Tailwind 类）→ 暗色背景 * ------------------------------------------------------------------ */ [data-mode="dark"] .bg-white { background-color: #1e293b !important; } [data-mode="dark"] .bg-gray-50 { background-color: #1e293b; } [data-mode="dark"] .bg-gray-100, [data-mode="dark"] .bg-gray-200 { background-color: #334155; } [data-mode="dark"] .bg-slate-100 { background-color: #0f172a; } [data-mode="dark"] .hover\:bg-gray-100:hover, [data-mode="dark"] .hover\:bg-gray-200:hover { background-color: #475569; } [data-mode="dark"] .hover\:bg-slate-50:hover { background-color: #334155; } /* 边框 / 分割线类 */ [data-mode="dark"] .border-slate-200, [data-mode="dark"] .border-gray-100, [data-mode="dark"] .border-gray-200 { border-color: #334155 !important; } [data-mode="dark"] .divide-gray-100 > * + *, [data-mode="dark"] .divide-gray-200 > * + * { border-color: #334155; } /* 次要文字色 */ [data-mode="dark"] .text-slate-600, [data-mode="dark"] .text-slate-500 { color: #94a3b8; } /* 静态页通用文字辅助类（写死 #333 / #666 / #999） */ [data-mode="dark"] .text-body, [data-mode="dark"] .text-body-lg { color: #e2e8f0; } [data-mode="dark"] .text-desc, [data-mode="dark"] .text-note, [data-mode="dark"] .text-caption { color: #94a3b8; } [data-mode="dark"] .section-head h2 { color: #e2e8f0; } /* ------------------------------------------------------------------ * 7. 表单：输入框、文本域、下拉框 * ------------------------------------------------------------------ */ [data-mode="dark"] .form-input, [data-mode="dark"] input[type="text"], [data-mode="dark"] input[type="email"], [data-mode="dark"] input[type="tel"], [data-mode="dark"] input[type="password"], [data-mode="dark"] input[type="search"], [data-mode="dark"] input[type="url"], [data-mode="dark"] input[type="number"], [data-mode="dark"] input[type="date"], [data-mode="dark"] textarea, [data-mode="dark"] select { background-color: #1e293b; border-color: #334155; color: #e2e8f0; } /* 占位符 */ [data-mode="dark"] .form-input::placeholder, [data-mode="dark"] input::placeholder, [data-mode="dark"] textarea::placeholder { color: #64748b; opacity: 1; } /* 自动填充背景去蓝 */ [data-mode="dark"] input:-webkit-autofill, [data-mode="dark"] textarea:-webkit-autofill, [data-mode="dark"] select:-webkit-autofill { -webkit-text-fill-color: #e2e8f0; -webkit-box-shadow: 0 0 0 1000px #1e293b inset; transition: background-color 9999s ease-in-out 0s; } /* ------------------------------------------------------------------ * 8. 按钮（主题色保持不变，仅处理次要 / 描边按钮的描边色） * ------------------------------------------------------------------ */ [data-mode="dark"] .btn-secondary { border-color: var(--y-primary, var(--p)); color: var(--y-primary, var(--p)); } [data-mode="dark"] .btn-outline { border-color: var(--p, var(--y-primary)); color: var(--p, var(--y-primary)); } /* ------------------------------------------------------------------ * 9. 文章正文区域 .prose * ------------------------------------------------------------------ */ [data-mode="dark"] .prose { color: #e2e8f0; } [data-mode="dark"] .prose h1, [data-mode="dark"] .prose h2, [data-mode="dark"] .prose h3, [data-mode="dark"] .prose h4, [data-mode="dark"] .prose strong { color: #f1f5f9; } [data-mode="dark"] .prose a { color: var(--y-accent, var(--a, #60a5fa)); } [data-mode="dark"] .prose a:hover { text-decoration: underline; } [data-mode="dark"] .prose blockquote { border-left-color: var(--y-primary, var(--p, #2563eb)); color: #94a3b8; background-color: rgba(148, 163, 184, 0.08); } [data-mode="dark"] .prose code { background-color: #0f172a; color: #e2e8f0; border: 1px solid #334155; border-radius: 4px; padding: 0.1em 0.35em; } [data-mode="dark"] .prose pre { background-color: #0f172a; border: 1px solid #334155; } [data-mode="dark"] .prose pre code { border: none; padding: 0; } [data-mode="dark"] .prose hr { border-color: #334155; } [data-mode="dark"] .prose ul li::marker, [data-mode="dark"] .prose ol li::marker { color: #94a3b8; } [data-mode="dark"] .prose img { opacity: 0.92; border-radius: 8px; } [data-mode="dark"] .prose table th { background-color: #0f172a; color: #e2e8f0; } [data-mode="dark"] .prose table th, [data-mode="dark"] .prose table td { border-color: #334155; } /* ------------------------------------------------------------------ * 10. 表格 .data-table 及通用 table * ------------------------------------------------------------------ */ [data-mode="dark"] .data-table th { background-color: #0f172a; color: #e2e8f0; } [data-mode="dark"] .data-table th, [data-mode="dark"] .data-table td { border-bottom-color: #334155; } [data-mode="dark"] .data-table tr:hover td { background-color: #334155; } [data-mode="dark"] table th { background-color: #0f172a; color: #e2e8f0; } [data-mode="dark"] table th, [data-mode="dark"] table td { border-color: #334155; } /* ------------------------------------------------------------------ * 11. 徽章 / 标签 / 分页等次要组件 * ------------------------------------------------------------------ */ [data-mode="dark"] .status-draft { background-color: #334155; color: #cbd5e1; } [data-mode="dark"] .badge.bg-gray-100 { background-color: #334155; color: #94a3b8; } [data-mode="dark"] .pagination a { color: #e2e8f0; border-color: #334155; } /* ------------------------------------------------------------------ * 12. 暗色模式切换按钮（太阳 / 月亮图标） * ------------------------------------------------------------------ */ .dark-mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9999px; border: 1px solid var(--y-border, #e5e7eb); background-color: transparent; color: var(--y-text, #1f2937); cursor: pointer; flex-shrink: 0; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .dark-mode-toggle:hover { background-color: var(--y-bg, #f1f5f9); } .dark-mode-toggle:focus-visible { outline: 2px solid var(--y-primary, var(--p, #2563eb)); outline-offset: 2px; } .dark-mode-toggle .icon-sun, .dark-mode-toggle .icon-moon { width: 20px; height: 20px; display: block; } /* 亮色模式显示月亮（点击切到暗色）；暗色模式显示太阳（点击切到亮色） */ .dark-mode-toggle .icon-sun { display: none; } .dark-mode-toggle .icon-moon { display: block; } .dark-mode-toggle.is-dark .icon-sun { display: block; } .dark-mode-toggle.is-dark .icon-moon { display: none; } /* 暗色模式下按钮自身配色 */ [data-mode="dark"] .dark-mode-toggle { background-color: #1e293b; border-color: #334155; color: #e2e8f0; } [data-mode="dark"] .dark-mode-toggle:hover { background-color: #334155; } /* 内嵌于 header 的样式微调 */ .dark-mode-toggle--inline { width: 34px; height: 34px; } /* 无 header 时的兜底固定按钮（左下角，避免与右下角悬浮客服冲突） */ .dark-mode-toggle--fixed { position: fixed; left: 16px; bottom: 16px; z-index: 50; width: 44px; height: 44px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); background-color: var(--y-card, #ffffff); } [data-mode="dark"] .dark-mode-toggle--fixed { background-color: #1e293b; } /* ------------------------------------------------------------------ * 13. 过渡动画：所有颜色变化 0.3s（初始加载由 disable-transitions 抑制） * 以下均「保留」元素原有的 transform / box-shadow 过渡，避免影响 * 悬停上浮等交互效果。 * ------------------------------------------------------------------ */ html, body { transition: background-color 0.3s ease, color 0.3s ease; } .y-card { transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .product-card { transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .article-card { transition: box-shadow 0.2s, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .material-card, .sidebar-widget { transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } /* .card（静态页）原本 transition: all .3s，已包含颜色，保持即可 */ .form-input, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="date"], textarea, select { transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s ease, color 0.3s ease; } .data-table th, .data-table td, table th, table td { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } header, #mobile-menu { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .prose, .prose * { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; } .badge { transition: background-color 0.3s ease, color 0.3s ease; } /* 注：暗色模式切换按钮自身的过渡已在第 12 节定义 */