先聊聊暗黑模式到底是个啥玩意儿

说实话，暗黑模式Yi经不只是一种潮流，简直是眼睛的救命稻草。

咱们老前端，早上打开电脑kan到一堆白底黑字，眼睛瞬间就要罢工。

于是大家想办法把背景调暗，让文字变亮。

哈哈，这背后可不是随便改个颜色这么简单。

每一个 UI 元素，dou得在光暗之间找到平衡点。

CSS 媒体查询：首选利器

@media { /* 暗黑根 */ }

这段代码一写，系统一检测到用户用了深色主题，就自动切到暗黑 CSS。

别忘了配合 :root 里定义的 CSS 变量，颜色Ke以层层继承。

比如：

@media  {
  :root {
    --bg-main: #1e1e1e;
    --text-primary: #e5e5e5;
    --border-color: #333;
  }
}

图片和视频的“暗黑”适配技巧

Ru果直接把背景弄黑，图片亮度却不跟着走，那就尴尬了。

我常用 filter 来调节：

img:not, video {
  filter: brightness contrast;
  transition: filter .3s ease;
}
img:not:hover {
  filter: none;
}

这个写法Neng让普通照片在暗色环境下不会刺眼，同时鼠标悬停时恢复原始亮度，方便细节查kan。

SVG 那点事儿

SVG 多是纯色图标，用 filter 调整会把它们变灰。于是排除掉：

img:not { /* 只处理位图 */ }

JavaScript 动态切换：给用户加个手动开关

有时候系统主题不够灵活，需要手动切换。比如放个按钮：

const toggle = document.getElementById;
toggle.addEventListener => {
  document.documentElement.classList.toggle;
});

配合上面那段 CSS，只要根节点多了 .dark 类，一切dou跟着变。

记得同步本地存储呀

用户切了主题，下次再来你的网站可别忘记记住他的选择。

const saved = localStorage.getItem;
if  document.documentElement.classList.add;
toggle.addEventListener => {
  const cur = document.documentElement.classList.toggle ? 'dark' : 'light';
  localStorage.setItem;
});

细节决定成败：阴影、边框、滚动条也要跟着走

深色背景下Ru果阴影还是那种浅灰，会显得漂浮感太强。

Ke以把阴影颜色调暗一点：

box-shadow: 0 4px 12px rgba;

边框同理，用geng柔和的 #444 替代 #ccc。

滚动条美化小技巧

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba;
  border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
  background-color: rgba;
}

为什么百度不收录？——顺手答疑一下

哎，你可Neng在搞暗黑适配的时候，还碰到 SEO 的坑。

为什么百度不收录？

- 检查 robots.txt 有没有误拦；

- 再kan页面是否返回了正确的 HTTP 状态码；

- Zui重要的是内容是否被 JavaScript 完全渲染后才出现。Ru果搜索引擎只Nengkan到空壳子，那自然不收录啦。

所以暗黑模式的实现Zui好在服务器端就输出完整的 HTML，或者使用 SSR/预渲染，这样既兼容 SEO，又Neng让用户即时kan到主题效果。咱就是说这点hen关键哦！哈哈。

跨平台适配：移动端也别忘了这点儿

#iOS# 和 Android dou支持 prefers-color-scheme，但表现略有差异。

#iOS# 会在 Safari 中自动切换，而 Chrome 则需要开启实验特性。

Cordova、React Native 包装的 H5 页面同样Ke以通过注入 meta 标签来声明支持：

A/B 测试一下kan哪个配色geng受欢迎

A/B 测试其实也Neng用在暗黑配色上。随机给用户分配两套变量值，对比跳出率、停留时间等指标。这样才Neng真正Zuo到“完美适配”。说实话，这招我自己也常用，效果杠杠的！

小叮嘱：别忘记测试！

Zuo完所有配置后赶紧打开系统设置把主题改成深色，kan页面是不是每个角落dou亮起来了？

- 检查文字对比度;

- kankan图片是否仍然清晰;

- 确认表单输入框、按钮状态dou有对应的暗色版;

Zui后一句：暗黑模式不是一次性工程，而是持续迭代的过程。咱们前端老友们，一起加油吧！哈哈哈~

---