每日大赛今日第一次搜到要不要夜间模式？照着做就行
很多人第一次在手机或电脑上看到“夜间模式”时会犹豫：要不要开？对普通访客和站长而言，夜间模式既是使用体验的改进，也是设计上的抉择。下面把最实用的判断标准和操作步骤都列清楚，照着做就行。
一、普通用户：我要不要开启夜间模式？
- 优点：在暗环境阅读更舒服、对 OLED 屏省电（黑色像素不点亮）、减少屏幕蓝光刺激（主观上有助于入睡）。
- 缺点：某些以颜色区分信息的网站（图表、图片）在深色背景上可读性下降；印刷或截屏时可能不方便。
- 简单判断：夜间在床上或暗室、长时间阅读文本、或屏幕感觉刺眼就开；白天或需要看细腻色彩就关。
二、快速实操：各平台如何开启（照着做就行） 手机与系统
- iPhone（iOS）
- 设置 → 显示与亮度 → 外观 → 选择“深色”；
- 控制中心可切换：长按亮度条 → 外观模式切换。
- Android（以常见版本为例）
- 设置 → 显示 → 深色主题（或夜间模式）开关；
- 部分手机厂商放在快捷设置面板，向下滑可快速切换。
桌面系统与浏览器
- Windows 10/11：设置 → 个性化 → 颜色 → 选择“深色”应用模式。
- macOS：系统偏好设置 → 通用 → 外观：选择“深色”。
- Chrome / Edge / Firefox（浏览器自带或扩展）
- Chrome：设置 → 外观 → 主题（或在地址栏安装 Dark Reader 扩展）。
- Firefox：菜单 → 设置 → 语言和外观 → 颜色 → 使用深色/用户样式；或安装 Dark Reader。
- 推荐扩展：Dark Reader（可自定义、对大多数站点效果好）。
网页专用（无系统/浏览器支持时）
- 使用阅读模式（部分浏览器地址栏有“阅读器”按钮）可切换深色背景。
- 如果只有某个网站需要夜间版，尝试浏览器扩展的站点黑名单/白名单功能。
三、站长 / 网站制作者：怎么给你的网站加夜间模式（两种场景） A. 使用 Google 新版 Sites（限制多，但可以做“黑色主题”页面）
- Google Sites 自带主题：选择主题并自定义颜色，选深色背景与浅色文字。
- 建议做法：把网站主主题设为浅色，再做一个“夜间版”页面（或子站），在页面顶部放置“切换到夜间模式”的链接，链接到夜间版页面。用户手动切换即可。
- 注意：新版 Google Sites 不允许自由注入全局 JS/CSS，所以只能用主题或不同页面实现“切换”。
B. 普通网页（可注入 CSS/JS）——最通用的实现（直接复制就能用）
- 用 prefers-color-scheme 支持系统偏好，同时提供手动切换并记忆用户选择。
CSS（放在样式表里）： :root { --bg: #ffffff; --text: #111111; --link: #1a73e8; } [data-theme="dark"] { --bg: #0b0b0f; --text: #e6e6e6; --link: #8ab4ff; } body { background: var(--bg); color: var(--text); } a { color: var(--link); }
@media (prefers-color-scheme: dark) { :root { --bg: #0b0b0f; --text: #e6e6e6; --link: #8ab4ff; } }
JavaScript（在页面底部或独立脚本里）： const toggleBtn = document.getElementById('night-toggle'); function applyTheme(theme) { if (theme === 'dark') document.documentElement.setAttribute('data-theme', 'dark'); else document.documentElement.removeAttribute('data-theme'); localStorage.setItem('site-theme', theme); } const saved = localStorage.getItem('site-theme'); if (saved) applyTheme(saved); else { // 如果没有保存，尊重系统设置 if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) applyTheme('dark'); } toggleBtn && toggleBtn.addEventListener('click', () => { const current = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'; applyTheme(current === 'dark' ? 'light' : 'dark'); });
在页面中放一个按钮： 切换夜间模式
要点：使用 CSS 变量修改颜色，比直接改具体样式更稳；图片、图表需单独处理（可给图片加滤镜或使用替代资源）。
四、常见问题（简短回答）
- 夜间模式真的能省电吗？在 OLED 屏上显著；LCD 屏效果有限。
- 会不会伤眼？相比白底高亮，深色背景在暗环境更舒适，但对某些人文字反差过大会更费力，按个人感受调整。
- 网站切换后如何保证可读性？测试不同对比度，保证文本与背景对比度充足（建议对比度至少 4.5:1 对正文）。
五、结论（照着做就行）
- 如果你是普通用户：晚上或低光环境就开；白天或需要准色彩就关。用系统/浏览器自带或安装 Dark Reader，切换方便。
- 如果你是站长：不能注入脚本时用 Google Sites 主题或做单独夜间页面；能自由修改网站时用 CSS 变量 + JS 切换并记忆用户偏好，兼顾 prefers-color-scheme 自动跟随系统。
