介绍

您可能已经注意到，在许多网站上，您现在可以在深色和浅色主题之间切换。这通常是使用 CSS 自定义属性（又名CSS 变量）来完成的。在本教程中，您将看到如何仅使用 CSS 和一点 JavaScript 来实现类似的功能。要了解有关此代码如何工作的更多信息，请查看我们关于 Javascript或HTML 的系列内容。

第 1 步 – 创建 CSS 变量

CSS 中自定义属性的力量在这里真正发挥作用，因为与使用 CSS 预处理器定义的变量不同，这些值是动态的；它们的值可以在任何时间点更改或覆盖以响应用户输入。当变量的值被更改或覆盖时，所有使用该变量的元素都会自动反映该更改。

首先，您必须做一些工作并提取要在 CSS 自定义属性中使用的所有颜色。假设您从以下样式开始：

body {
  background: white;
  color: #555;
}

a, a:link {
  color: #639A67;
}
a:hover {
  color: #205D67;
}

然后，您将定义自定义属性，如下所示：

:root {
  --bg: white;
  --text-color: #555;
  --link-color: #639A67;
  --link-hover: #205D67;
}

有了这个，您现在可以将 CSS 规则更改为如下所示：

body {
  background: var(--bg);
  color: var(--text-color);
}

a, a:link {
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover);
}

应用主题涉及向 body 元素添加一个类，因此您将在该类名下定义主题的颜色。在这里，我们将调用 class funky。只需确保为所有应更改的颜色定义覆盖颜色：

.funky {
  --bg: hotpink;
  --text-color: white;
  --link-color: #B793E6;
  --link-hover: #3532A7;
}

第 2 步 – 为旧浏览器添加回退

对 CSS 自定义属性的支持非常好，但您很可能希望为使用旧浏览器的用户提供回退。

假设我们有一个元素应该有一个线性渐变背景，颜色定义为自定义属性。您首先提供硬编码的颜色，旧版浏览器会忽略它们不理解的版本：

background: linear-gradient(to right, #FFFB85, #5A3662); /* our fallback */
background: linear-gradient(to right, var(--top-grad1), var(--top-grad2));

第 3 步 — 切换我们的主题

我们只需要极少量的 JavaScript 即可在元素上添加事件侦听器，该元素充当两个主题之间的切换按钮。

这里的切换按钮有toggle-theme类，我们用它document.querySelector来获取对该元素的引用：

let toggle = document.querySelector('.toggle-theme');

toggle.addEventListener('click', function(e) {
  e.preventDefault();

  if (document.body.classList.contains('funky')) {
    // Turning the theme off:
    document.body.classList.remove('funky');
    // Reverse logic on the button text, so that users can turn
    // the theme back on:
    toggle.innerText = 'Turn theme on';
  } else {
    document.body.classList.add('funky');
    toggle.innerText = 'Turn theme off';
  }
});

这是在两个主题之间切换的技巧。我们可以做得更好，同时向localStorage添加/删除项目，以便在页面加载时自动应用我们的主题：

let toggle = document.querySelector('.toggle-theme');

// Turn the theme off if the 'funky' key exists in localStorage
if (localStorage.getItem('funky')) {
  document.body.classList.add('funky');
  toggle.innerText = 'Turn theme off';
}

toggle.addEventListener('click', function(e) {
  e.preventDefault();

  if (document.body.classList.contains('funky')) {
    document.body.classList.remove('funky');
    toggle.innerText = 'Turn theme on';
    localStorage.removeItem('funky');
  } else {
    document.body.classList.add('funky');
    toggle.innerText = 'Turn theme off';
    localStorage.setItem('funky', true);
  }
});

您可以使用这个小片段和 CSS 变量来创建这样的主题网站，包括深色模式、浅色模式等。

结论

在本教程中，您创建了一个具有明暗模式的主题网站。要了解有关此代码如何工作的更多信息，请查看我们关于 Javascript或HTML 的系列内容。