📌  相关文章
📜  引导暗模式 - CSS (1)

📅  最后修改于: 2023-12-03 15:09:49.387000             🧑  作者: Mango

引导暗模式 - CSS

简介

暗模式是一种较为流行的 UI 设计趋势，它使用的是深色背景和浅色文本。能够明显降低屏幕对人眼的疲劳度，并更好地适应夜间环境。在 CSS 中，我们可以使用所谓的 “引导暗模式（Bootstrap Dark Mode）”来轻松地实现这一效果。

安装
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.css"
        integrity="sha384-tw6M7/q6+iLEUewAVdU6HsfAi1C9iJGlFSg0sAkfzDBj/IbVTtnP+l90DI+bTc0C"
        crossorigin="anonymous">
  <title>引导暗模式</title>
</head>
<body>
  <h1>引导暗模式</h1>
  <p>这就是暗模式！</p>
</body>
</html>
使用

在上面所示的代码中，我们只需在 HTML 的 <head> 标签中添加一个 CSS 引用，并在 bootstrap.css 的链接后加上 [theme].min.css（其中 [theme] 可选值为 dark、cyborg、journal等）。这会将 CSS 文件载入到我们的 HTML 中，从而使用暗模式主题。

<!DOCTYPE html>
<html>
<head>
  ...
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap-dark.min.css"
        integrity="sha384-1bWdMuG7cMeRkmEcwaaTNhJjKwhgF3TZVPyT1TtWdIz+BJB10JQ2V3A4fM8uORE7"
        crossorigin="anonymous">
  ...
</head>
<body>
  ...
</body>
</html>
定制

如果以上提供的主题仍不能满足您的需求，您可以自行定制主题。您可以从 CSS 样式表中选择所需的变量，并进行覆盖。您可以在 bootstrap.css 中找到变量的默认值（如颜色、字体、背景等）。CSS 变量的默认前缀是 --bs-，此外还可以覆盖此前缀，并根据需要指定全局和局部的样式。例如，以下代码段将使我们的按钮呈现为蓝色：

:root {
  --my-var-prefix-primary: #0070ff;
}

...
<button class="btn btn-primary">我的按钮</button>
...
结论

在本文中，我们已经简短地讲解了如何使用 Bootstrap 来引导暗模式。我们了解了如何通过添加 CSS 引用并定制我们自己的样式表来更改样式。希望您喜欢这篇文章！如果有任何问题或建议，请告诉我们。