M

MLOG

中文

通过这份综合指南在您的网站上实施深色模式。了解 CSS 媒体查询、JavaScript 切换、辅助功能考量以及提供无缝用户体验的最佳实践。

深色模式实施：使用 CSS 和 JavaScript 的综合指南

深色模式越来越受欢迎，尤其是在弱光环境下，它可以提供更舒适的观看体验。本指南全面概述了如何使用 CSS 和 JavaScript 在您的网站上实施深色模式，确保为全球用户提供无缝且易于访问的用户体验。

为什么要实施深色模式？

有几个令人信服的理由可以考虑实施深色模式：

实施深色模式的方法

有几种实施深色模式的方法，每种方法都有其自身的优点和缺点。我们将探讨最常见的方法：

1. 使用 CSS 媒体查询实施深色模式

prefers-color-scheme CSS 媒体查询允许您检测用户的首选配色方案并相应地应用不同的样式。对于已经设置系统首选项的用户来说，这是实施深色模式最直接有效的方法。

代码示例

将以下 CSS 添加到您的样式表：

/* Default (Light) Theme */
body {
  background-color: #fff;
  color: #000;
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Adjust other elements as needed */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

说明：

优点

缺点

2. 使用 JavaScript 切换实施深色模式

使用 JavaScript 切换为用户提供了一个手动开关来控制网站的主题。这为用户提供了更多的控制权，并允许他们覆盖其系统首选项。对于迎合可能无法始终如一地支持或公开系统级深色模式设置的各种设备和平台上的用户来说，这种方法至关重要。

HTML 结构

首先，将切换元素添加到您的 HTML：

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

这会使用复选框和一些自定义 CSS 样式创建一个简单的切换开关。

CSS 样式（可选）

您可以使用 CSS 设置切换开关的样式。这是一个例子：

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

.switch input {
  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);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

JavaScript 代码

现在，添加以下 JavaScript 代码来处理切换功能：

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Function to toggle dark mode
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Store the user's preference in localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Check localStorage for saved preference
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Add event listener to the toggle
darkModeToggle.addEventListener('change', toggleDarkMode);

说明：

深色模式的 CSS 样式（使用类）

更新您的 CSS 以使用dark-mode类来应用深色主题样式：

/* Default (Light) Theme */
body {
  background-color: #fff;
  color: #000;
}

/* Dark Theme */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

优点

缺点

3. 结合使用媒体查询和 JavaScript

最好的方法通常是将 CSS 媒体查询和 JavaScript 切换结合起来。这提供了两全其美的效果：自动检测用户的首选配色方案，同时还允许用户手动覆盖系统首选项。这迎合了更广泛的受众，包括那些可能不知道或无法更改其系统级主题设置的受众。

代码示例

使用 JavaScript 切换示例中的相同 HTML 和 CSS。修改 JavaScript 以检查系统首选项：

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Function to toggle dark mode
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Store the user's preference in localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Check localStorage for saved preference, then system preference
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Add event listener to the toggle
darkModeToggle.addEventListener('change', toggleDarkMode);

说明：

优点

缺点

辅助功能注意事项

在实施深色模式时，必须考虑辅助功能，以确保您的网站对所有用户都保持可用。请记住，仅仅反转颜色并不能自动保证辅助功能。以下是一些关键注意事项：

深色模式实施的最佳实践

以下是在您的网站上实施深色模式时应遵循的一些最佳实践：

示例：用于主题的 CSS 变量

CSS 变量使您可以轻松地在浅色和深色模式主题之间切换。在:root伪类中定义变量：

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

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

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

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

现在，当将dark-mode类添加到正文时，CSS 变量会更新，并且会自动应用样式。

结论

实施深色模式可以显着增强您网站的用户体验、提高辅助功能，甚至可以节省电池寿命。通过遵循本指南中概述的技术和最佳实践，您可以为全球用户创造无缝且愉悦的深色模式体验。

请记住，优先考虑辅助功能并彻底测试您的实施，以确保您的网站对所有用户都保持可用，无论他们的偏好或视觉能力如何。

通过周到地实施深色模式，您不仅在追随潮流，而且还在为全球受众创造更具包容性和用户友好的 Web 体验。这种对用户体验的奉献精神可以极大地促进您网站的整体性能和吸引力。