借助 CSS 变量构建 Dark Mode 方案：打造沉浸式用户体验

前端

2024-02-08 03:39:51

CSS 变量的魅力：打造 Dark Mode 方案

CSS 变量简介

CSS 变量是一种强大的工具，让您可以在样式表中存储和使用变量，极大地简化和提升样式管理效率。通过利用 CSS 变量，您可以轻松地修改样式，而无需逐个元素地更改样式值。

Dark Mode 的重要性

Dark Mode 是一种设计模式，采用深色背景和浅色文本，可以减少屏幕发出的刺眼光线，从而降低眼睛疲劳。对于长时间使用电子设备的用户来说，Dark Mode 提供了更舒适的视觉体验，并有助于他们更好地集中注意力。

利用 CSS 变量构建 Dark Mode 方案

要利用 CSS 变量构建 Dark Mode 方案，请遵循以下步骤：

1. 定义 CSS 变量

首先，在样式表中定义两个 CSS 变量：

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

--bg-color：这个变量将存储页面背景的颜色。
--text-color：这个变量将存储页面文本的颜色。

2. 使用 CSS 变量

接下来，在样式表中使用这些 CSS 变量来设置页面元素的样式。例如：

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

这段代码将页面背景颜色设置为 --bg-color 变量的值，并将页面文本颜色设置为 --text-color 变量的值。

3. 添加切换按钮

要允许用户在 Dark Mode 和 Light Mode 之间切换，需要添加一个切换按钮。您可以使用 HTML 和 JavaScript 来实现这个功能：

<button id="dark-mode-toggle">切换到暗色模式</button>

const toggleButton = document.getElementById('dark-mode-toggle');

toggleButton.addEventListener('click', () => {
  const body = document.body;

  if (body.classList.contains('dark-mode')) {
    body.classList.remove('dark-mode');
  } else {
    body.classList.add('dark-mode');
  }
});