引导自动暗模式 - CSS

在近年来，越来越多的网站和应用程序开始提供自动暗模式功能，这种功能可以使得用户在早间和夜间使用同一个应用程序时，可以通过主题的变化来获得更好的体验。而实现自动暗模式功能的方法之一就是使用 CSS Media Queries 和 CSS 变量技术。

实现方法

首先，我们需要定义一些 CSS 变量来存储颜色值。这样，当我们需要更改主题时，只需更改这些变量即可。在这个例子中，我们使用 light 和 dark 两个变量来储存深色和浅色模式所需的颜色。

:root {
  --color-background: #fff;
  --color-text: #333;
  --color-link: #0077CC;
  --color-background-dark: #333;
  --color-text-dark: #eee;
  --color-link-dark: #66CCFF;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-background-dark);
    --color-text: var(--color-text-dark);
    --color-link: var(--color-link-dark);
  }
}

这段代码使用了 CSS 变量以及 CSS Media Queries 技术。当用户的设备设置为暗模式时，我们将替换浅色模式所需的颜色变量为深色模式所需的颜色变量。这可以确保我们提供给用户的是一个适应当前主题的主题。

接下来，我们将利用 Javascript 检测用户所使用的浏览器是否支持 CSS 变量，如果支持，则在文档头部嵌入一个包含当前选择的主题的 CSS 代码块。以下是一个比较完整的代码示例：

const toggleSwitch = document.querySelector('.switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
  document.documentElement.setAttribute('data-theme', currentTheme);
  if (currentTheme === 'dark') {
    toggleSwitch.checked = true;
  }
}

function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute('data-theme', 'dark');
    localStorage.setItem('theme', 'dark');
  }
  else {
    document.documentElement.setAttribute('data-theme', 'light');
    localStorage.setItem('theme', 'light');
  }
}

toggleSwitch.addEventListener('change', switchTheme, false);

此段代码中，我们首先检查本地存储中是否存在主题设置。如果存在，则我们将应用该主题。接下来，我们添加了一个事件监听程序，用于在切换器按钮上切换选择的主题。当我们选择新主题后，我们将主题记录在本地存储中，并在文档中添加一个包含所选主题的 CSS 代码段。这段 CSS 代码段将决定当前主题的颜色变量。

接下来，我们在文档头部引入一个样式表：

<link rel="stylesheet" href="styles.css">

最后，我们在我们的 CSS 文件中实现样式：

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Dark mode styles */
[data-theme="dark"] {
  --color-background: #333;
  --color-text: #eee;
  --color-link: #66CCFF;
}

[data-theme="dark"] .switch {
  background-color: #ccc;
}

[data-theme="dark"] .slider {
  background-color: #2196F3;
}

[data-theme="dark"] .slider:before {
  background-color: #eee;
}

这段 CSS 代码实现了一个切换器，用户可以通过该切换器来选择所需的主题。当主题更改时，系统将更新 CSS 变量并切换到所选主题。

结束语

通过使用 CSS Media Queries 和 CSS 变量技术，我们可以轻松地实现自动暗模式功能。此外，我们还可以通过添加用户界面元素来使用户自己选择他们所需的主题。希望这些方法能够帮助你设计更好的用户体验。