Bootstrap 暗黑模式指南

Bootstrap 的暗黑模式（Dark Mode）是一个流行的主题，它可以在保持功能性的同时提供更舒适的视觉体验。以下是关于 Bootstrap 暗黑模式的一些基本指南。

快速概览

• 使用 Bootstrap 5 或更新版本。
• 通过 CSS 变量或预处理器变量来切换主题。
• 可以自定义颜色、背景等。

安装和设置

1. 确保你的项目使用了 Bootstrap 5 或更高版本。
2. 在你的样式表中添加以下 CSS 变量：

:root {
  --bs-bg-primary: #343a40;
  --bs-text-primary: #f8f9fa;
  /* 其他变量根据需要添加 */
}

3. 在你的 HTML 中使用 data-bs-theme 属性来切换主题：

<button data-bs-theme-value="dark">切换到暗黑模式</button>

自定义暗黑模式

你可以通过自定义 CSS 来进一步调整暗黑模式的样式。以下是一些常用的自定义选项：

• 背景色
• 文本颜色
• 链接颜色

:root {
  --bs-bg-dark: #333;
  --bs-text-dark: #fff;
  --bs-link-dark: #0056b3;
}

图片示例

Bootstrap 的暗黑模式可以很好地与图片结合。以下是一个示例：

更多信息

要了解更多关于 Bootstrap 暗黑模式的细节，请查看 Bootstrap 官方文档。