超过 80% 的用户希望在应用中使用暗黑模式，现在正是在您的 Web 应用程序中实现该模式的最佳时机……

但不要担心——您不需要做太多工作来重写 CSS 或经历各种艰难的学习过程。

我将与您分享如何在不到 15 分钟的时间内为您的网站添加暗模式支持（是的，真的）。

在本教程结束时，您应该能够拥有一个优雅的暗模式，它可以感知系统并能给您的用户留下深刻的印象。

了解系统级暗模式

近年来，暗黑模式最令人印象深刻的地方在于，你不必从头开始创建复杂的主题切换器。

现代操作系统已经照顾到了用户的需求，并且浏览器可以通过 CSS 轻松实现这些需求。

这里的魔法是通过名为“prefers-color-scheme”的媒体查询来实现的。它看起来像这样：

@media (prefers-color-scheme: dark) {

  /* Your dark mode styles go here */

}

因此，每当用户在系统上激活可怕的暗模式开关时，默认情况下此媒体查询就会被激活。

这使得您的网站风格可以根据用户的喜好自动调整。

好消息是，大多数现代浏览器都支持此功能。Chrome、Firefox、Safari、Edge 都支持此功能……

这意味着您可以利用系统级偏好设置，而无需任何额外的 JavaScript 或复杂的逻辑。

让我们进入有趣的部分——在您的代码中实际实现它。

快速实施方法

让我们直接开始吧——您需要做的第一件事是在 CSS 中设置颜色变量。方法如下：

/* In your root CSS file */
:root {
  /* Light mode colors (default) */
  --background: #ffffff;
  --text: #333333;
  --surface: #f5f5f5;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --background: #1a1a1a;
    --text: #ffffff;
    --surface: #2d2d2d;
    --accent: #66b3ff;
  }
}

现在，您无需对颜色进行硬编码，而是使用这些变量。如下所示：

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

.card {
  background-color: var(--surface);
}

.button {
  background-color: var(--accent);
}

就是这样！您的网站现在将根据用户的系统偏好自动在明暗模式之间切换。无需 JavaScript，没有混乱的逻辑 - 干净简单的 CSS。

**快速提示：** 只需从基本颜色开始，然后根据您的品牌进行调整。一开始不要太担心，您可以随时回来进行调整。

高级触摸

通过上述代码，您的网站应该可以完美运行，但让我们添加一些额外的修饰，使您的暗模式实现真正专业。

这些调整只需几分钟，但却能带来巨大的变化：

首先，添加平滑的过渡，以便模式切换不会刺耳：

:root {
  --background: #ffffff;
  --text: #333333;
  /* Add this line */
  transition: background-color 0.3s ease, color 0.3s ease;
}

对于图像，尤其是徽标，添加此媒体查询以便优雅地处理它们：

@media (prefers-color-scheme: dark) {
  img {
    /* Slightly dim non-essential images */
    opacity: 0.8;
  }

  /* But keep logos crisp */
  .logo {
    opacity: 1;
    filter: brightness(1.2);
  }
}

添加主题切换按钮

让我们为想要覆盖系统偏好设置的用户添加一个手动主题切换器。

完整的实现如下：

首先，为切换按钮添加以下 HTML：

  🌞
  🌙

下面是美观的 CSS：

:root {
  /* Add these theme state variables */
  --light-icon-display: block;
  --dark-icon-display: none;
}

/* Dark mode specific styles */
[data-theme="dark"] {
  --light-icon-display: none;
  --dark-icon-display: block;
}

#theme-toggle {
  background: var(--surface);
  border: 1px solid var(--text);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  position: fixed;
  top: 20px;
  right: 20px;
}

.light-icon {
  display: var(--light-icon-display);
}

.dark-icon {
  display: var(--dark-icon-display);
}

以下是使这一切正常工作的 JavaScript：

// Theme toggle functionality
const themeToggle = document.getElementById('theme-toggle');
const rootElement = document.documentElement;

// Check for saved theme preference, otherwise use system preference
const getPreferredTheme = () => {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) return savedTheme;

  return window.matchMedia('(prefers-color-scheme: dark)').matches 
    ? 'dark' 
    : 'light';
}

// Set theme on page load
document.addEventListener('DOMContentLoaded', () => {
  rootElement.setAttribute('data-theme', getPreferredTheme());
});

// Handle toggle button click
themeToggle.addEventListener('click', () => {
  const currentTheme = rootElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'light' ? 'dark' : 'light';

  rootElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
});

此代码为您提供了一个可切换的按钮：

专业提示：您可以随意自定义图标 - 您可以使用 SVG 或创建更精致的开关设计。只需确保当前主题一目了然即可！

结论

现在，您的网站已经拥有专业制作的功能齐全的暗模式功能！

您拥有系统感知主题、流畅的动画、正确的图像渲染，甚至还有一个漂亮的切换按钮。

记住，你不需要在第一天就把所有事情都做得完美。

进行简单的实施、推动它，并在您进行的过程中以及随着人们使用该网站时做出更改。

即使暗黑模式还不能完全发挥作用，您的用户也会很高兴收到它。