让您的网站在几分钟内准备好深色模式

超过 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：

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

  /* Your dark mode styles go here */

}

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

/* 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;
  }
}

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

• 默认尊重用户的系统偏好
• 将他们的手动偏好保存在 localStorage
• 页面重新加载后仍然存在
• 根据当前主题显示太阳/月亮图标
• 模式之间平滑过渡

专业提示：随意自定义图标 - 您可以使用 SVG，甚至创建更精致的开关设计。只需确保当前主题显而易见即可！

结论

所以，你的网站现在有了一个完全可用的、经过专业设计的深色模式功能！

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

你不需要在第一天就让一切都很完美，记住这一点。

进行赤裸裸的实施，推动它，并在您使用该网站时和人们使用该网站时进行更改。

即使深色模式未完全正常工作，您的用户也会很高兴收到它。

以上是让您的网站在几分钟内准备好深色模式的详细内容。更多信息请关注PHP中文网其他相关文章！