免费的个人网站html代码夜间模式怎么加？iOS/Android双端教程

频道：SEO必看 日期： 浏览：15

一、半夜刷手机被亮瞎眼？

哎我说老铁们，你们有没有这种经历？凌晨两点钟打开自己的博客写文章，屏幕白光"唰"地刺过来，眼睛瞬间流泪。这时候要是能给网站加个​​夜间护眼模式​​，简直比喝枸杞水还养生！今天就手把手教你用纯HTML代码实现这个功能，iOS和安卓手机都能完美适配。

二、五分钟速成方案：CSS滤镜大法

先来个最傻瓜式的操作，只要三行代码就能让网站秒变暗黑主题！

css复制
html[data-theme="dark"] {
  filter: invert(1) hue-rotate(180deg);
}
/* 修复图片二次反转问题 */
html[data-theme="dark"] img {
  filter: invert(0.85) hue-rotate(180deg);
}

这个方法的原理就像给网站戴了副墨镜。invert(1)会让所有颜色反转——白底变黑底，黑字变白字。不过要注意图片会变成"阴间滤镜"，所以得再加个反向处理（别问我怎么知道的，去年蘑菇社区上线时用户差点被吓跑）。

免费的个人网站html代码夜间模式怎么加？iOS/Android双端教程

三、进阶玩家的选择：动态切换按钮

想要让用户自己点按钮切换？咱们用JavaScript+CSS变量更优雅：

html运行复制
<button onclick="toggleNightMode()">🌙 夜间模式button>

<script>
let isNight = false;
function toggleNightMode() {
  document.documentElement.style.setProperty('--bg-color', isNight ? '#ffffff' : '#1a1a1a');
  document.documentElement.style.setProperty('--text-color', isNight ? '#333333' : '#e0e0e0');
  isNight = !isNight;
}
script>

在CSS里提前定义好变量：

css复制
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

这么搞有个好处——想换什么颜色随便改，还能存到本地缓存里防止刷新失效（具体存cookie的方法咱们后面说）。

四、移动端适配秘籍

​​iOS用户看这里​​：
在里加这个meta标签，让Safari的状态栏也变黑：

免费的个人网站html代码夜间模式怎么加？iOS/Android双端教程

html运行复制
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

​​安卓党注意​​：
用这个CSS媒体查询适配系统级暗黑模式：

css复制
@media (prefers-color-scheme: dark) {
  body {
    background: #2d2d2d;
    color: #d9d9d9;
  }
}

实测华为Mate60和小米14都能自动切换，不过有些老机型需要开启系统级暗黑模式才生效。

五、防闪屏黑科技

新手最容易踩的坑——页面加载时突然从亮变暗，眼睛都要瞎了！解决方法很简单：
在标签里直接写初始模式：

html运行复制
<body class="

网友留言（1）

  1. 紫烟
    紫烟
    回复
    各位读者，希望我的介绍能够帮助大家轻松实现夜间模式，提升阅读体验，无论是在深夜还是清晨，都能保持舒适的视觉环境，记得要根据设备类型选择合适的CSS代码或JavaScript技巧哦~

评论

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
验证码