使用 CSS 为您的网站制作亮/暗模式切换

2025-06-07

使用 CSS 为您的网站制作亮/暗模式切换

在网页或桌面应用上启用亮色和暗色模式是一项很棒的功能，它不仅能让用户的眼睛更舒服，还能展现一些有趣又精妙的 CSS 技巧。如果你的个人网站是用来制作新工作作品集的，它还能让你的网站更上一层楼。我最近在我的个人网站上也启用了亮色和暗色模式，不过我没有使用传统的亮色和暗色模式，而是将颜色和主题分别改为“浅色学院风”和“深色学院风”。

选择你的颜色

首先，选择亮色模式和暗色模式的两种调色板。我喜欢用coolors.co来帮你选色，从中汲取灵感。

图像

现在，选定十六进制颜色后，我们将在顶层 .css 文件中将它们设置为变量。将它们设置为变量，然后使用这些变量分配给使用这些颜色的各个实例，可以使代码更简洁、一致性更高，并且在需要更改颜色时也更容易更新。

:root {
  /** sunny side **/
  --light-background: #b87e54;
  --light-olive: #4d4828;
  --light-blue: #99c1c3;
  --light-purple: #67597a;
  --light-yellow: #e0cd7e;
  /** dark side **/
  --dark-background: #283618;
  --dark-darkblue: #001d3d;
  --dark-blue: #003566;
  --dark-darkestblue: #000814;
  --dark-mustard: #664e00;
}
Enter fullscreen mode Exit fullscreen mode

然后可以通过调用分配了十六进制颜色的变量名轻松访问这些颜色background-color: var(--dark-background);。

构建你的 Toggle

对于切换按钮，我们将基于 HTML 元素构建input。此输入框及其关联的标签将通过 CSS 转换为类似于切换按钮的形式，但其功能与选中或未选中的输入框元素相同。我们将主要依靠::before和::after 伪元素来实现。

<input type="checkbox" id="toggle" class="mostHigh toggle--checkbox" />
<label for="toggle" class="toggle--label mostHigh">
</label>
Enter fullscreen mode Exit fullscreen mode

我们希望.toggle--checkbox用 来隐藏display: none，以便原始复选框不可见，然后用 创建切换轮廓.toggle--label。

.toggle--label {
  width: 80px;
  height: 40px;
  background: var(--blue-color);
  border-radius: 100px;
  border: 5px solid var(--blue-border);
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

我们将使用伪元素::before来创建来回切换的开关部分。

.toggle--label:before {
  animation-name: reverse;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
  transition: all 350ms ease-in;
  content: "";
  width: 30px;
  height: 30px;
  border: 5px solid var(--yellow-border);
  top: 0px;
  left: 4px;
  position: absolute;
  border-radius: 82px;
  background: var(--yellow-background);
}
Enter fullscreen mode Exit fullscreen mode

现在我们将使用 CSS伪类选择器`:checked' 来在 CSS 中判断切换按钮是否被点击。这非常方便，因为它避免了使用 JavaScript 更新 DOM 或进行条件渲染。

CSS 选择器可能包含多个简单选择器，我们在它们之间添加一个组合器。在这个切换中，我们使用相邻的同级选择器来选择类（输入）+的同级选择器（标签）。简单选择器的其他组合器包括后代选择器（空格）、子选择器和通用同级选择器。.toggle--checkbox.toggle--label>~

它的工作原理与 类似:hover，当选中该类时，CSS 将更新同级选择器代码。同级限定符基于分配了类的 HTML 元素
。

.toggle--checkbox:checked + .toggle--label {
  background: var(--indigo-color);
  border-color: var(--indigo-border);
}

.toggle--checkbox:checked + .toggle--label:before {
  background: var(--white);
  border-color: var(--gray-border);
  animation-name: switch;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
}
Enter fullscreen mode Exit fullscreen mode


`

动画切换

现在，开关会改变颜色并移动，使其在视觉上看起来像是在切换。我们也可以在 CSS 中实现这一点。我们将使用关键帧来实现这一点。创建关键帧后，将其分配给 animation-name 属性，该属性处于开启状态 。.toggle--label:before我们使用关键帧来创建视觉运动，使圆形开关从开关左侧移动到右侧，然后再移回。

@keyframes switch {
  0% {
    left: 4px;
  }
  60% {
    left: 20px;
    width: 50px;
  }
  100% {
    left: 40px;
    width: 30px;
  }
}
@keyframes reverse {
  0% {
    left: 24px;
    width: 42px;
  }
  60% {
    left: 20px;
    width: 50px;
  }
  100% {
    left: 4px;
  }
}
Enter fullscreen mode Exit fullscreen mode


`

让网站具有日/夜模式的切换效果

为了将日夜模式推广到您网站的其余部分，我们将使用与 相同的流程.toggle--label。我们希望确保切换按钮本身位于顶层附近，以便页眉和网站主体部分可以作为兄弟元素进行衔接。

`

<Header />
<Toggle />
<Main />
Enter fullscreen mode Exit fullscreen mode


`

在此过程中，您将观察切换输入是否被检查，如果是，则将初始 css 更新为切换的
css。`

.header {
  background-color: var(--light-background);
  color: var(--light-olive);
}

.toggle--checkbox:checked ~ .head {
  background-color: var(--dark-background);
  color: var(--white);
}
Enter fullscreen mode Exit fullscreen mode


`

尽情切换不同的颜色吧！

文章来源：https://dev.to/salothom/make-light-dark-mode-for-your-website-using-css-1gol
Devto 翻译
PREV
一些热门的 React 面试问题
NEXT
5 个 React / JS ⚛️ 库，将 ChatGPT 集成到你的 Web 应用中