网站的深色模式 · 跟马丁学编程

它会怎么工作

深色模式由两部分组成：

CSS 准备第二套”服装”——只有页面有 dark class 时才应用的规则。
JavaScript 点击时添加或移除那个 class。并把选择写入 浏览器记忆，明天仍然有效。

跟我看：CSS 里的深色服装

在 style.css 末尾添加：

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2 {
  color: #93c5fd;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
}

读法：“当 body 有 dark class 时，这些规则生效。” 没有 class 时，这些都不用。

💡

按你的网站调整颜色——过一遍 CSS，给每个浅色配一个深色版本。规则不变：深色背景 → 浅色文字。

跟我看：JavaScript 里的开关

在页眉（<nav> 里）加按钮：

<button id="switch">🌙</button>

在 script.js 里：

const switchButton = document.getElementById("switch");

// When the page loads: remember what the visitor picked last time
if (localStorage.getItem("mode") === "dark") {
  document.body.classList.add("dark");
  switchButton.textContent = "☀️";
}

switchButton.addEventListener("click", () => {
  document.body.classList.toggle("dark");

  if (document.body.classList.contains("dark")) {
    localStorage.setItem("mode", "dark");
    switchButton.textContent = "☀️";
  } else {
    localStorage.setItem("mode", "light");
    switchButton.textContent = "🌙";
  }
});

三样新东西：

classList.toggle("dark")——“有 class 就删，没有就加。” 一行搞定开关。
classList.contains("dark")——“现在有吗？“（返回 true/false，条件里好用）。
localStorage——浏览器的笔记本。setItem 写入，getItem 读取。存的东西关浏览器还在。（其实，这个学习网站就用它保存你的进度！）

轮到你了 💪

给自己的 style.css 加深色服装——过一遍所有颜色（背景、页眉、卡片、页脚、色块），在 body.dark 下给深色版本。
在 每个页面 的页眉加开关按钮，代码放进 script.js。
试试：切到深色，关浏览器，再打开网站——应该直接是深色模式。

更完整的深色服装示例（按项目调颜色）

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2,
body.dark h3 {
  color: #93c5fd;
}

body.dark header {
  background-color: #0f172a;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
  box-shadow: none;
}

body.dark footer {
  background-color: #0f172a;
}

body.dark a {
  color: #93c5fd;
}

✅

检查一下： 点 🌙 网站变暗（图标变 ☀️），点 ☀️ 又变亮。关浏览器再开，网站记得你的选择。很多”大人”网站都没有的功能！

这堂课你要记住

深色模式 = 准备好的 CSS 服装（body.dark）+ JavaScript 切换 class。
classList.toggle() 添加/移除 class，classList.contains() 检查有没有。
localStorage 是浏览器永久记忆：setItem("key", "value") 和 getItem("key")。