如何使用 CSS Checkbox Hack 构建一个简单的主题切换器

在本教程中，您将学习如何利用“css 复选框黑客技术”和 CSS 变量来创建纯 CSS 主题切换器。

准备好迎接另一个 CSS 挑战了吗？

注意：本教程假设您熟悉这种特殊的 CSS 技术以及高级 CSS 选择器（例如通用兄弟组合器）。如果您以前没有听说过这些内容，或者需要复习，请查看本教程末尾的资源。

我们的 CSS 主题切换器

这是我们将在本教程中创建的主题切换器：

See the Pen How to Build a Simple Theme Switcher With the CSS Checkbox Hack by Envato Tuts+ (@tutsplus) on CodePen.

单击右上角的任何颜色以查看页面外观的变化。您还可以使用键盘的箭头键来切换配色方案。

1.从 html 标记开始

我们将从代表可用主题颜色的八个单选按钮开始。默认情况下，将选中第一个单选按钮。

然后，我们将定义一个控制页面颜色的包装元素。在其中，我们将放置：

这些单选按钮的相关标签和
页面的主要内容。这个页面将介绍一些关于??的事情。

这是页面结构：

<input type="radio" id="white" name="colors" value="white" checked>
<input type="radio" id="dark" name="colors" value="dark">
<input type="radio" id="red" name="colors" value="red">
<input type="radio" id="green" name="colors" value="green">
<input type="radio" id="yellow" name="colors" value="yellow">
<input type="radio" id="blue" name="colors" value="blue">
<input type="radio" id="purple" name="colors" value="purple">
<input type="radio" id="olive" name="colors" value="olive">

<div class="page-wrapper">
  <div class="color-palette">
    <label for="white"></label>
    <label for="dark"></label>
    <label for="red"></label>
    <label for="green"></label>
    <label for="yellow"></label>
    <label for="blue"></label>
    <label for="purple"></label>
    <label for="olive"></label>
  </div>
  <article class="post">
    <div class="container">...</div>
  </article>
</div>

2.定义一些基本样式

像往常一样，我们将继续介绍一些常见的重置样式。

最重要的是，请注意以下事项：

我们将使用自定义属性来定义八种不同的配色方案。每个方案将包括两个颜色定义，它们代表特定主题的页面颜色。
我们将通过将单选按钮移出屏幕来在视觉上隐藏它们。我们将提供它们position: fixed，因为在布局中，当我们滚动时，调色板应该保持固定。请记住，如果我们给它们position: absolute，每次我们点击一个主题颜色，浏览器都会跳转到页面顶部。

以下是重置样式：

:root {
  /*WHITE*/
  --white-bg-color: #fff;
  --white-text-color: #000;

  /*DARK*/
  --dark-bg-color: #434343;
  --dark-text-color: #fff;

  /*RED*/
  --red-bg-color: #ce8082;
  --red-text-color: #020202;

  /*GREEN*/
  --green-bg-color: #40de7c;
  --green-text-color: #020202;

  /*YELLOW*/
  --yellow-bg-color: #fdc011;
  --yellow-text-color: #110d02;

  /*BLUE*/
  --blue-bg-color: #2943a1;
  --blue-text-color: #d4cbcd;

  /*PURPLE*/
  --purple-bg-color: #dbdbed;
  --purple-text-color: #29262e;

  /*OLIVE*/
  --olive-bg-color: #838b74;
  --olive-text-color: #f7f5e4;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

[type="radio"] {
  position: fixed;
  left: -9999px;
}

label {
  cursor: pointer;
}

body {
  font: 300 20px / 1.5 "Ubuntu", sans-serif;
}

3. 设置主要样式

接下来，我们将设置主要样式。

最重要的是：

如上所述，当我们滚动时，调色板将始终停留在右上角。
每个标签/主题颜色看起来像一个圆圈，其颜色将取决于*-bg-color 相关配色方案的 CSS 变量的值。
当页面颜色发生变化时，我们将添加一些过渡。

以下是关键样式：

/*CUSTOM VARIABLES HERE*/

[id="white"] ~ .page-wrapper [for="white"] {
  background: var(--white-bg-color);
}

[id="dark"] ~ .page-wrapper [for="dark"] {
  background: var(--dark-bg-color);
}

[id="red"] ~ .page-wrapper [for="red"] {
  background: var(--red-bg-color);
}

[id="green"] ~ .page-wrapper [for="green"] {
  background: var(--green-bg-color);
}

[id="yellow"] ~ .page-wrapper [for="yellow"] {
  background: var(--yellow-bg-color);
}

[id="blue"] ~ .page-wrapper [for="blue"] {
  background: var(--blue-bg-color);
}

[id="purple"] ~ .page-wrapper [for="purple"] {
  background: var(--purple-bg-color);
}

[id="olive"] ~ .page-wrapper [for="olive"] {
  background: var(--olive-bg-color);
}

.page-wrapper {
  padding: 30px 0;
  transition: all 0.3s ease-in-out;
}

.color-palette {
  position: fixed;
  top: 30px;
  right: 15px;
  display: grid;
  grid-row-gap: 10px;
  padding: 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.4);
}

.color-palette label {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.color-palette label::before {
  display: none;
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  width: 10px;
  height: 2px;
}

4. Checkbox Hack：在主题之间切换

现在是有趣的部分！每次单击标签/主题颜色（即变为活动状态）时，都会发生以下情况：

将出现活动标签的::before伪元素。此外，它的颜色将取决于 *-text-color 相关配色方案的 CSS 变量的值。

如何使用 CSS Checkbox Hack 构建一个简单的主题切换器第1张

页面颜色将根据活动配色方案平滑更改。

以下是相关样式：

/*CUSTOM VARIABLES HERE*/

[type="radio"]:checked ~ .page-wrapper label::before {
  display: block;
}

[id="white"]:checked ~ .page-wrapper {
  color: var(--white-text-color);
  background: var(--white-bg-color);
}

[id="white"]:checked ~ .page-wrapper [for="white"]::before {
  background: var(--white-text-color);
}

[id="dark"]:checked ~ .page-wrapper {
  color: var(--dark-text-color);
  background: var(--dark-bg-color);
}

[id="dark"]:checked ~ .page-wrapper [for="dark"]::before {
  background: var(--dark-text-color);
}

[id="red"]:checked ~ .page-wrapper {
  color: var(--red-text-color);
  background: var(--red-bg-color);
}

[id="red"]:checked ~ .page-wrapper [for="red"]::before {
  background: var(--red-text-color);
}

[id="green"]:checked ~ .page-wrapper {
  color: var(--green-text-color);
  background: var(--green-bg-color);
}

[id="green"]:checked ~ .page-wrapper [for="green"]::before {
  background: var(--green-text-color);
}

[id="yellow"]:checked ~ .page-wrapper {
  color: var(--yellow-text-color);
  background: var(--yellow-bg-color);
}

[id="yellow"]:checked ~ .page-wrapper [for="yellow"]::before {
  background: var(--yellow-text-color);
}

[id="blue"]:checked ~ .page-wrapper {
  color: var(--blue-text-color);
  background: var(--blue-bg-color);
}

[id="blue"]:checked ~ .page-wrapper [for="blue"]::before {
  background: var(--blue-text-color);
}

[id="purple"]:checked ~ .page-wrapper {
  color: var(--purple-text-color);
  background: var(--purple-bg-color);
}

[id="purple"]:checked ~ .page-wrapper [for="purple"]::before {
  background: var(--purple-text-color);
}

[id="olive"]:checked ~ .page-wrapper {
  color: var(--olive-text-color);
  background: var(--olive-bg-color);
}

[id="olive"]:checked ~ .page-wrapper [for="olive"]::before {
  background: var(--olive-text-color);
}