CSS指南中的黑暗模式-css教程-PHP中文网

首页

web前端

css教程

CSS指南中的黑暗模式

Joseph Gordon-Levitt

Apr 04, 2025 am 09:21 AM

深入探讨网站暗黑模式：设计与实现指南

暗黑模式 (Dark Mode) 近来备受青睐，苹果、微软和谷歌等科技巨头已将其集成到各自的操作系统中。本文将深入探讨如何在网站中实现暗黑模式，涵盖多种方法、技术考量和设计技巧。

Dark Mode in CSS Guide

主题切换

通常情况下，您的网站已拥有一个亮色主题，而您希望创建一个对应的暗色主题。即使是从零开始，您也需要同时设计亮色和暗色两种主题。其中一种主题应被设置为默认主题（大多数情况下是亮色主题，但我们也可以让用户的浏览器做出选择），并提供切换到另一种主题的方法（也可以自动切换）。用户只需点击一个按钮，即可更改颜色主题。

实现主题切换有多种方法：

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 使用body类名

此方法的核心是使用一个类名作为切换页面任何位置样式的钩子。

以下是一个切换类名的按钮脚本示例：

// 选择按钮
const btn = document.querySelector('.btn-toggle');

// 监听按钮点击事件
btn.addEventListener('click', function() {
  // 切换（添加/删除）body元素的.dark-theme类名
  document.body.classList.toggle('dark-theme');  
});

示例HTML：

<button class="btn-toggle">切换暗黑模式</button>
<h1 id="这是一个标题">这是一个标题</h1>
<p>这是一段文字。</p>
<p>这是另一段文字。</p>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">这是一个链接</a>

此方法的基本思路是：首先定义默认（亮色）样式，然后使用一个应用于 body 元素的类名来创建完整的暗色样式。假设默认样式为亮色方案。所有“亮色”样式的编写方式与您通常编写CSS的方式完全相同。对于上述HTML，让我们对 body 和链接应用一些全局样式：

body {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b222;
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
}
a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b0033cc;
}

接下来，我们重新定义这些属性值，这次设置在不同的 body 类名上：

body {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b222;
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
}
a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b0033cc;
}

/* 暗黑模式样式 */
body.dark-theme {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15beee;
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b121212;
}
body.dark-theme a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b809fff;
}

暗黑模式样式将是相同父类（本例中为 .dark-theme）的子元素。如何切换 body 类名来访问暗黑样式？我们可以使用JavaScript！我们将选择按钮类名（.btn-toggle），添加一个点击监听器，然后将暗黑主题类名（.dark-theme）添加到 body 元素的类名列表中。由于级联和特异性，这将有效地覆盖我们设置的所有“亮色”颜色。

完整的代码示例请参考演示。点击切换按钮可在暗黑模式和亮色模式之间切换。

与其将所有样式保存在一个样式表中，不如为每个主题切换样式表。这假设您已准备好完整的样式表。

例如，一个默认的亮色主题 light-theme.css：

/* light-theme.css */

body {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b222;
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
}
a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b0033cc;
}

然后我们创建暗色主题的样式，并将其保存在名为 dark-theme.css 的独立样式表中：

/* dark-theme.css */

body {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15beee;
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b121212;
}
body a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b809fff;
}

这给了我们两个独立的样式表——每个主题一个——我们可以在HTML的部分链接它们。由于我们将其称为默认样式，因此我们首先链接亮色样式。

<link id="theme-link" href="light-theme.css" rel="stylesheet">

我们使用一个 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btheme-link ID，可以用JavaScript选择它来切换亮色模式和暗黑模式。只是这次我们切换的是文件而不是类名。

// 选择按钮
const btn = document.querySelector(".btn-toggle");
// 选择样式表 <link>
const theme = document.querySelector("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btheme-link");

// 监听按钮点击事件
btn.addEventListener("click", function() {
  // 如果当前URL包含"light-theme.css"
  if (theme.getAttribute("href") == "light-theme.css") {
    // ...则切换到"dark-theme.css"
    theme.href = "dark-theme.css";
  // 否则...
  } else {
    // ...切换到"light-theme.css"
    theme.href = "light-theme.css";
  }
});

我们还可以利用CSS自定义属性来创建暗黑主题！这有助于避免为每个主题编写单独的样式规则集，从而使编写样式的速度更快，并且更容易更改主题。

我们仍然可以选择切换 body 类名，并使用该类名来重置自定义属性：

// 选择按钮
const btn = document.querySelector(".btn-toggle");

// 监听按钮点击事件
btn.addEventListener("click", function() {
  // 切换（添加/删除）body元素的.dark-theme类名
  document.body.classList.toggle("dark-theme");
});

首先，让我们在 body 元素上将默认亮色值定义为自定义属性：

body {
  --text-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b222;
  --bkg-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
  --anchor-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b0033cc;
}

现在，我们可以像第一种方法一样，在 .dark-theme 类名上重新定义这些值：

body.dark-theme {
  --text-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15beee;
  --bkg-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b121212;
  --anchor-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b809fff;
}

以下是使用自定义属性的 body 和链接元素的规则集：

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

我们也可以在 document:root 中定义自定义属性。这是完全合法的，甚至是很常见的做法。在这种情况下，所有默认主题样式定义都放在 :root {} 内，所有暗黑主题属性都放在 :root.dark-mode {} 内。

如果我们正在使用服务器端语言（例如PHP），那么我们可以使用它来代替JavaScript。如果您更喜欢直接在标记中工作，这是一个很好的方法。

<?php $themeClass = '';
if (isset($_GET['theme']) && $_GET['theme'] == 'dark') {
  $themeClass = 'dark-theme';
}

$themeToggle = ($themeClass == 'dark-theme') ? 'light' : 'dark';
?>
<a href="https://www.php.cn/link/39fd3e6495f36f48bfce2fdff05d27cf">切换暗黑模式</a>

我们可以让用户发送GET或POST请求。然后，让我们的代码（在本例中为PHP）在页面重新加载时应用相应的 body 类名。为了演示的目的，我使用的是GET请求（URL参数）。

当然，我们也可以像第二种方法一样切换样式表。

<?php $themeStyleSheet = 'light-theme.css';
if (isset($_GET['theme']) && $_GET['theme'] == 'dark') {
  $themeStyleSheet = 'dark-theme.css';
}

$themeToggle = ($themeStyleSheet == 'dark-theme.css') ? 'light' : 'dark';
?>
<link href="<?php%20echo%20%24themeStyleSheet;%20?>" rel="stylesheet">
<a href="https://www.php.cn/link/39fd3e6495f36f48bfce2fdff05d27cf">切换暗黑模式</a>

这种方法有一个明显的缺点：页面需要刷新才能进行切换。但是，这种服务器端解决方案对于在页面重新加载时保持用户的主题选择非常有用，我们将在后面看到。

选择哪种方法？

“正确”的方法取决于项目的具体要求。例如，如果是一个大型项目，您可能会选择CSS属性来管理大型代码库。另一方面，如果您的项目需要支持旧版浏览器，则需要采用其他方法。

此外，我们并不局限于只使用一种方法。有时，多种方法的组合是最有效的方法。甚至可能还有我们尚未讨论的其他方法。

操作系统级暗黑模式

到目前为止，我们使用按钮来切换亮色模式和暗黑模式，但我们可以简单地让用户的操作系统为我们完成这项工作。例如，许多操作系统允许用户直接在系统设置中选择亮色主题和暗黑主题。

纯CSS

详情

幸运的是，CSS有一个 prefers-color-scheme 媒体查询，可以用来检测用户的系统颜色方案偏好。它可以有三个可能的值：no preference、light 和 dark。

@media (prefers-color-scheme: dark) {
  /* 暗黑主题样式在此处 */
}

@media (prefers-color-scheme: light) {
  /* 亮色主题样式在此处 */
}

要使用它，我们可以将暗黑主题样式放在媒体查询中。

@media (prefers-color-scheme: dark) {
  body {
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15beee;
    background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b121212;
  }

  a {
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b809fff;
  }
}

现在，如果用户启用了系统设置中的暗黑模式，他们将默认获得暗黑模式样式。我们不必求助于JavaScript或服务器端脚本就能决定使用哪种模式。事实上，我们甚至不再需要按钮！

JavaScript

详情

我们可以使用JavaScript来检测用户的首选颜色方案。这与我们使用的第一种方法非常相似，只是我们使用 matchMedia() 来检测用户的偏好。

const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
if (prefersDarkScheme.matches) {
  document.body.classList.add('dark-theme');
} else {
  document.body.classList.remove('dark-theme');
}

使用JavaScript的缺点是：JavaScript在CSS之后执行，因此可能会出现亮色主题的快速闪烁，这可能会被误认为是错误。

当然，我们也可以像第二种方法一样切换样式表。这次，我们链接两个样式表，并使用媒体查询来确定应用哪个样式表。

覆盖操作系统设置

我们刚刚了解了如何考虑用户的系统范围颜色方案偏好。但是，如果用户希望覆盖其网站的系统偏好怎么办？ 用户偏好操作系统的暗黑模式并不总是意味着他们也偏好网站的暗黑模式。这就是为什么提供一种方法来手动覆盖暗黑模式（即使是系统设置）是一个好主意。

查看代码

让我们使用CSS自定义属性方法来演示如何做到这一点。其思想是像以前一样定义两种主题的自定义属性，将暗黑样式包装在 prefers-color-scheme 媒体查询中，然后在其中定义一个 .light-theme 类，如果用户希望在这两种模式之间切换，我们可以使用它来覆盖暗黑模式属性。

/* 默认颜色 */
body {
  --text-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b222;
  --bkg-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
}
/* 暗黑主题颜色 */
body.dark-theme {
  --text-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15beee;
  --bkg-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b121212;
}

/* 针对在操作系统级别偏好暗黑模式的用户提供的样式 */
@media (prefers-color-scheme: dark) {
  /* 默认使用暗黑主题 */
  body {
    --text-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15beee;
    --bkg-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b121212;
  }
  /* 如果用户决定切换，则使用亮色模式样式覆盖暗黑模式 */
  body.light-theme {
    --text-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b222;
    --bkg-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
  }
}

现在，我们可以再次使用我们的可靠按钮来切换亮色主题和暗黑主题。这样，我们默认情况下尊重操作系统的颜色偏好，并且允许用户手动切换主题。

// 监听按钮点击事件
btn.addEventListener("click", function() {
  // 如果操作系统设置为暗黑模式...
  if (prefersDarkScheme.matches) {
    // ...则应用.light-theme类来覆盖这些样式
    document.body.classList.toggle("light-theme");
    // 否则...
  } else {
    // ...应用.dark-theme类来覆盖默认的亮色样式
    document.body.classList.toggle("dark-theme");
  }
});

浏览器支持

prefers-color-scheme 媒体查询功能受到主要浏览器的支持，包括Chrome 76 、Firefox 67 、Chrome Android 76 、Safari 12.5 （iOS上的13 ）和三星互联网浏览器。它不支持IE。

这是一个很有希望的支持量！Can I Use估计用户覆盖率为80.85%。

目前支持暗黑模式的操作系统包括MacOS（Mojave或更高版本）、iOS（13.0 ）、Windows（10 ）和Android（10 ）。

存储用户偏好

到目前为止，我们所看到的内容确实做到了它的承诺：根据操作系统偏好或按钮点击来切换主题。这很好，但在用户访问网站上的另一个页面或重新加载当前页面时，它不会延续。

我们需要保存用户的选择，以便在整个网站和后续访问中始终应用它。为此，我们可以在切换主题时将用户的选择保存到 localStorage 中。Cookie也适合这项工作。

让我们看看这两种方法。

使用localStorage

我们有一个脚本，在切换发生时将选择的主题保存到 localStorage 中。换句话说，当页面重新加载时，脚本从 localStorage 中获取选择并应用它。JavaScript通常在CSS之后执行，因此这种方法容易出现“错误主题闪烁”（FOIT）。

查看代码

// 选择按钮
const btn = document.querySelector(".btn-toggle");
// 从localStorage中获取主题偏好设置
const currentTheme = localStorage.getItem("theme");

// 如果localStorage中的当前主题是"dark"...
if (currentTheme == "dark") {
  // ...则使用.dark-theme类名
  document.body.classList.add("dark-theme");
}

// 监听按钮点击事件
btn.addEventListener("click", function() {
  // 在每次点击时切换body元素的.dark-theme类名
  document.body.classList.toggle("dark-theme");

  // 假设主题等于light
  let theme = "light";
  // 如果body包含.dark-theme类名...
  if (document.body.classList.contains("dark-theme")) {
    // ...则将主题设置为dark
    theme = "dark";
  }
  // 然后将选择保存到localStorage中
  localStorage.setItem("theme", theme);
});

使用PHP的Cookie

为了避免FLIC，我们可以使用服务器端脚本，例如PHP。我们将不将用户的主题偏好保存到 localStorage 中，而是从JavaScript创建一个cookie并将其保存到cookie中。但这可能只有在您已经使用服务器端语言时才可行。

查看代码

// 选择按钮
const btn = document.querySelector(".btn-toggle");

// 监听按钮点击事件
btn.addEventListener("click", function() {
  // 在body上切换.dark-theme类名
  document.body.classList.toggle("dark-theme");

  // 假设主题等于light
  let theme = "light";
  // 如果body包含.dark-theme类名...
  if (document.body.classList.contains("dark-theme")) {
    // ...则将主题设置为dark
    theme = "dark";
  }
  // 然后将选择保存到cookie中
  document.cookie = "theme="   theme;
});

我们现在可以检查该cookie是否存在，并通过将正确的类名应用于 body 标记来加载相应的主题。

<?php $themeClass = '';
if (!empty($_COOKIE['theme']) && $_COOKIE['theme'] == 'dark') {
  $themeClass = 'dark-theme';
}
?>

以下是使用独立样式表方法的方法：

<?php $themeStyleSheet = 'light-theme.css';
if (!empty($_COOKIE['theme']) && $_COOKIE['theme'] == 'dark') {
  $themeStyleSheet = 'dark-theme.css';
}
?>
<link href="<?php%20echo%20%24themeStyleSheet;%20?>" rel="stylesheet">

如果您的网站有用户帐户（例如登录和管理个人资料的地方），这也是保存主题偏好的好地方。将它们发送到存储用户帐户详细信息的数据库中。然后，当用户登录时，从数据库中获取主题，并使用PHP（或任何服务器端脚本）将其应用到页面。

有多种方法可以做到这一点。在这个例子中，我在登录时从数据库中获取用户的主题偏好，并将其保存在会话变量中。

<?php // 登录操作
if (!empty($_POST['login'])) {
  // 等
  // 如果用户已通过身份验证...
  if ($loginSuccess) {
    // ...将他们的主题偏好保存到会话变量中
    $_SESSION['user_theme'] = $userData['theme'];
  }
}

// 如果已设置，则首先选择会话变量；否则选择cookie
$themeChoice = $_SESSION['user_theme'] ?? $_COOKIE['theme'] ?? null;
$themeClass = '';
if ($themeChoice == 'dark') {
  $themeClass = 'dark-theme';
}
?>

我使用PHP的空合并运算符（??）来决定从哪里获取主题偏好：从会话还是从cookie。如果用户已登录，则使用会话变量的值而不是cookie的值。如果用户未登录或已注销，则使用cookie的值。

处理用户代理样式

为了告知浏览器UA样式表系统颜色方案偏好并告知它页面中支持哪些颜色方案，我们可以使用 color-scheme 元标记。

例如，假设页面应该同时支持“dark”和“light”主题。我们可以将它们都作为值放在元标记中，用空格分隔。如果我们只想支持“light”主题，那么我们只需要使用“light”作为值即可。

<meta content="dark light" name="color-scheme">

添加此元标记后，浏览器会在呈现页面的UA控制元素（例如）时考虑用户的颜色方案偏好。它根据用户的偏好呈现根背景、表单控件和拼写检查功能（以及任何其他UA控制的样式）的颜色。

尽管主题在大多数情况下都是手动设置样式的（这会覆盖UA样式），但告知浏览器支持的主题有助于避免出现任何轻微的FOIT情况。对于HTML已呈现但CSS仍在等待加载的情况，这是正确的。

我们也可以在CSS中设置它：

:root {
  color-scheme: light dark; /* 都支持 */
}

在撰写本文时，color-scheme 属性缺乏广泛的浏览器支持，尽管Safari和Chrome都支持它。

方法组合

让我们将所有内容组合起来，创建一个有效的演示，它：

根据系统偏好自动加载暗黑主题或亮色主题
允许用户手动覆盖其系统偏好
在页面重新加载时保持用户的首选主题

使用JavaScript和localStorage

// 选择按钮
const btn = document.querySelector(".btn-toggle");
// 检查操作系统级别的暗黑模式偏好设置
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

// 获取用户从localStorage中存储的主题偏好设置（如果可用）
const currentTheme = localStorage.getItem("theme");
// 如果localStorage中的用户偏好设置是dark...
if (currentTheme == "dark") {
  // ...让我们在body上切换.dark-theme类名
  document.body.classList.toggle("dark-mode");
// 否则，如果localStorage中的用户偏好设置是light...
} else if (currentTheme == "light") {
  // ...让我们在body上切换.light-theme类名
  document.body.classList.toggle("light-mode");
}

// 监听按钮点击事件
btn.addEventListener("click", function() {
  // 如果用户的操作系统设置为dark并且与我们的.dark-mode类名匹配...
  if (prefersDarkScheme.matches) {
    // ...则切换light模式类名
    document.body.classList.toggle("light-mode");
    // ...但如果body上已经存在.light-mode类名，则使用.dark-mode
    var theme = document.body.classList.contains("light-mode") ? "light" : "dark";
  } else {
    // 否则，让我们对.dark-mode做同样的事情
    document.body.classList.toggle("dark-mode");
    var theme = document.body.classList.contains("dark-mode") ? "dark" : "light";
  }
  // 最后，让我们将当前偏好设置保存到localStorage中，以便继续使用它
  localStorage.setItem("theme", theme);
});

使用PHP和Cookie

<?php $themeClass = '';
if (!empty($_COOKIE['theme'])) {
  if ($_COOKIE['theme'] == 'dark') {
    $themeClass = 'dark-theme';
  } else if ($_COOKIE['theme'] == 'light') {
    $themeClass = 'light-theme';
  }
}
?>


<script>
  const btn = document.querySelector(".btn-toggle");
  const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

  btn.addEventListener("click", function() {
    if (prefersDarkScheme.matches) {
      document.body.classList.toggle("light-mode");
      var theme = document.body.classList.contains("light-mode") ? "light" : "dark";
    } else {
      document.body.classList.toggle("dark-mode");
      var theme = document.body.classList.contains("dark-mode") ? "dark" : "light";
    }
    document.cookie = "theme="   theme;
  });
</script>

设计考量

我经常听到人们说实现暗黑模式比设计暗黑模式更容易。虽然我不会妄加评论，但让我们来看看设计暗黑主题的一些考虑因素。

您已经知道基本任务：将较浅的颜色值换成较深的颜色值，反之亦然。但是，一些UI元素和增强功能更加细致，需要更多关注。让我们来看看这些。

暗黑模式图像

一个好的规则是稍微降低图像的亮度和对比度，以便在暗色背景下看起来更舒适。在超暗背景上的超亮图像可能会令人震惊，而调暗图像可以减少一些强烈的对比度。

CSS filter() 函数可以很好地处理这个问题：

/* 直接在body标记上应用过滤器 */
body.dark-theme img {
  filter: brightness(.8) contrast(1.2);
}

/* 或通过媒体查询应用它 */
@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

我们可以使用 <picture></picture> 元素直接在标记中做同样的事情来加载图像的不同版本：

<picture>
  <source srcset="light-image.jpg" media="(prefers-color-scheme: light)">
  <source srcset="dark-image.jpg" media="(prefers-color-scheme: dark)">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174372967441105.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Dark Mode in CSS Guide ">
</source></source></picture>

这里的缺点是，它需要提供两个文件，而当使用CSS时，我们只需要处理一个文件。这也不能完全解决用户在网站上切换颜色主题的问题。

暗黑模式阴影

暗黑模式阴影很棘手。如果我们简单地使用浅色来反转暗色阴影，那么我们就会得到一个在暗色背景上带有浅色阴影的奇怪东西……这看起来并不好。

可以在暗黑模式中使用暗色阴影，但背景颜色必须足够“浅”（例如深灰色），才能提供足够的对比度，以便在暗色背景上看到阴影。

使用不透明度来表达深度，高不透明度区域的深度较低。也就是说，海拔较高的元素的不透明度应该低于与背景在深度上“更接近”的元素。

暗黑模式排版

这里的技巧与图像非常相似：我们必须平衡对比度。使用过重的字体会使文字过于刺眼，让我们想要远离屏幕。使用过轻的字体会使我们眯起眼睛，向屏幕靠近以仔细查看。

平衡点在中间。

暗黑模式图标

图标属于这个“棘手”类别，因为它们有点像文本和图像的混合体。但是，如果我们使用SVG图标，我们可以使用CSS更改填充颜色。另一方面，如果我们使用字体图标，我们可以简单地更改 color 属性。

/* SVG图标 */
body.dark-theme svg.icon path {
  fill: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15befefef;
}
/* 字体图标（以Font Awesome为例） */
body.dark-theme .fa {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15befefef;
}

许多适用于文本的设计注意事项也普遍适用于图标。例如，我们应该避免使用纯白色和粗边框。

暗黑模式颜色

纯白色文本在纯黑色背景上看起来会很刺眼。这里的技巧是使用近白色作为文本颜色，使用近黑色作为背景颜色。例如，Material Design指南建议使用 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b121212 作为背景颜色。

暗黑模式调色板

我们已经看到了使用近白色和近黑色颜色对文本和图像的影响。让我们用一些关于如何开发完整调色板的技巧来扩展一下。

大多数事情都归结为一件事：对比度。这就是为什么在确定任何颜色之前，第一个技巧是将想法通过对比度检查器来确保颜色比率至少符合WCAG的AA等级指南（对比度比率为4.5:1）。

这意味着在使用暗黑模式设计时，不饱和的颜色是我们的朋友。它们有助于防止过于明亮的图像，并且仍然给我们提供了足够的余地来创建有效的对比度比率。

接下来，请记住，强调色是为了增强效果。它们可能比暗黑主题背景颜色更亮，因此像主要颜色或大型容器的背景颜色一样使用它们，就像明亮的图像或浓重的白色文本一样，同样会刺眼且伤眼。

如果对比度是我们试图达到的平衡，那么请记住，暗黑模式不仅仅是黑色和灰色。深蓝色背景搭配浅黄色文本怎么样？或者深棕色搭配棕褐色？那里有整个（并且不断增长）的色彩范围，我们可以利用它的任何部分来激发创造力。

一些不使用纯黑色的深色示例：

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b232B32

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b152028

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b202945

Material Design关于暗黑模式的指南是关于暗黑模式设计的最佳实践的有用资源。绝对值得一读，以了解更多需要记住的技巧。

实际案例

YouTube使用CSS变量技术。他们在 html 选择器下定义了所有颜色变量，而暗黑模式颜色则在 html:not(.style-scope)[dark] 下定义。启用暗黑模式时，YouTube会向 html 标记添加 dark="true" 属性。这就是他们用来覆盖在HTML中定义的变量的方法。

在实际应用中，CSS自定义属性方法似乎最受欢迎。Dropbox Paper、Slack和Facebook都在使用它。

Simplenote使用类名切换方法，其中所有亮色样式规则都是 .theme-light 父类的子元素，所有暗色样式都属于 .theme-dark 类。切换主题时，相应的类名将应用于 body 标记。Twitter更进一步，提供了多种主题供选择：“默认”、“调暗”和“熄灯”。“调暗”选项使用深蓝色作为背景颜色。将其与使用纯黑色的“熄灯”进行比较。