反差大赛朋友发来链接：夜间模式做个对比，我把逻辑讲明白

前言朋友在群里丢了个链接，说要参加“反差大赛”，让我给出夜间模式的对比意见。看了若干参赛作品后，我把判断夜间模式好坏的逻辑浓缩成一套可操作的思路——既能用于参赛评分，也能直接拿去改你的网站或产品。

一眼看清：夜间模式的目的是什么？夜间模式并不是单纯把背景改黑、文字改白。它解决的主要问题有三条：

保持在弱光环境下的可读性与舒适度；
在视觉上与日间主题形成明确但自然的对比（品牌一致性）；
在合适的设备上降低能耗（OLED 真黑会省电）。

关键判断标准（你在对比时要量化这些）

对比度（Contrast Ratio）：文本与背景的对比率是否达标。参考 WCAG：常规正文至少 4.5:1，较大字号或图形元素至少 3:1。
可读性（Legibility）：字重、字距、行高、字体在昏暗环境下是否清楚。
色彩饱和度与眩光（Halation）：高饱和色在深色背景下会“发光”，降低可读性或造成视觉疲劳。
层次与焦点（Hierarchy & Focus）：内联元素（按钮、输入框、卡片）的边界是否清晰，聚焦态是否明显。
图片与媒体处理：图片、视频在深色背景下是否突兀，透明 PNG 或阴影是否正确处理。
一致性与品牌性：主题切换后品牌色是否保留辨识度，图标、插画是否有针对夜间模式的替代资源。
性能与兼容性：切换是否流畅，是否支持系统偏好（prefers-color-scheme），是否加载额外资源影响性能。
可访问性测试（色盲、弱视）：用模拟器或工具检查不同视力状态下的效果。

常见误区与抉择

误区：夜间模式就用纯黑背景。事实：纯黑（#000）配纯白（#fff）对比极高，看起来“刺眼”并不舒服。推荐使用接近黑但带一点色调的深色（如 #0b0f14 或者带暖色的深灰），能减少眩光。
误区：把所有颜色都直接暗化。直接暗化会让强调色失去活力。更好做法是保留或微调强调色的亮度/饱和度，保证对比同时保留辨识度。
误区：只针对文字调整。按钮、边框、分隔线、阴影、浮层、图像叠加都需要重新设计，否则层次感会丢失。

实战：如何实现一个可靠的夜间模式（前端要点）

使用 CSS 变量管理主题颜色，便于维护与切换。
支持系统偏好：@media (prefers-color-scheme: dark)。
提供用户手动切换（并本地保存偏好），同时尊重系统设置为默认。
针对图片、图标提供夜间版本或使用混合模式（mix-blend-mode）与遮罩控温。
避免把所有边界都用浅色线条替代；考虑使用内阴影或柔和分隔线。

示例代码（简要） :root { --bg: #ffffff; --text: #111827; --muted: #6b7280; --accent: #2563eb; } [data-theme="dark"] { --bg: #0b0f14; /* 比纯黑更友好 / --text: #e6eef8; / 非纯白，减低刺眼感 / --muted: #9aa4b2; --accent: #4ea3ff; / 保留强调，但稍微调整亮度 / } @media (prefers-color-scheme: dark) { :root { / 可以作为默认策略 */ } }

简短 JS 切换（思路）