黑暗模式是一个越来越受欢迎的主题，它可以成为你整体用户体验的核心部分。能够根据环境或上下文在这些模式之间切换，有助于您轻松高效地设计网站。

在本文中，我们将看到一个新的用于Bootstrap 5/4框架的jQuery/Vanilla JS暗模式插件，它可以在网页上使用切换按钮在暗模式和亮模式之间切换。这是通过在单击暗模式切换按钮时覆盖Bootstrap框架中引入的默认CSS变量来实现的。

它还能够获得用户喜欢的配色方案，并自动将深色或浅色模式应用于您的网站。

参见：

• 10个最佳JavaScript暗模式解决方案
• WordPress的5个最佳黑暗模式插件

如何使用它:

1.在Bootstrap框架中加载bs darkmode插件的文件。

<!-- jQuery Is Optional -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
 
<!-- Bootstrap Framework -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
 
<!-- bs-darkmode's Stylesheet -->
<link href="css/bs-darkmode.min.css" rel="stylesheet" />
 
<!-- jQuery Version -->
<script src="js/bs-darkmodejquery.min.js"></script>
 
<!-- Vanilla JS Version -->
<script src="js/bs-darkmode.ecmas.min.js"></script>

2.要创建一个基本的暗模式切换，只需添加数据插件=“bsdarkmode”属性指定给您指定的按钮，插件将执行其余操作。

<button class="btn btn-primary" data-plugin="bsdarkmode"></button>

3.您也可以通过JavaScript初始化暗模式切换程序。

<button class="btn btn-primary" id="example"></button>

$(function () {
  $('#example').bsDarkmode({
    // options here
  });
})

4.然后，您可以覆盖暗模式和亮模式的默认CSS变量，如下所示。所有可用的CSS变量：

• 蓝色
• 靛蓝
• 紫色
• 粉红色
• 红色
• 橙色
• 黄的
• 绿色
• 蓝绿色的
• 青色
• 灰色
• 灰黑色
• 灰色-100
• 灰色-200
• 灰色-300
• 灰色-400
• 灰色-500
• 灰色-600
• 灰色-700
• 灰色-800
• 灰色-900
• 主要的，重要的
• 次要的
• 成功
• 信息
• 警告
• 危险
• 光线
• 黑暗的
• 主rgb
• 辅助rgb
• 成功rgb
• 信息rgb
• 警告rgb
• 危险rgb
• 轻型rgb
• 深色rgb
• 黑色
• 白色
• 白色rgb
• 黑色rgb
• 车身颜色rgb
• 车身bg rgb
• 白色
• 黑色

<button class="btn btn-primary" 
        data-plugin="bsdarkmode"
        data-lightvars='{"primary":"#ffffff","secondary":"#000000"}'
        data-darkvars='{"primary":"#000000","secondary":"#ffffff"}'>
</button>

// OR Via JavaScript
$(function () {
  $('#example').bsDarkmode({
    lightvars: '{
      "primary":"#000000",
      "secondary":"#ffffff",
      // ...
    }',
    darkvars: '{
      "primary":"#ffffff",
      "secondary":"#000000"
      // ...
    }'
  });
})

5.设置初始状态：暗或亮。

<button class="btn btn-primary" 
        data-plugin="bsdarkmode"
        data-state="dark">
</button>

// OR Via JavaScript
$(function () {
  $('#example').bsDarkmode({
    state: false,
  });
})

6.自定义按钮中显示的标签。

<button class="btn btn-primary" 
        data-plugin="bsdarkmode"
        darklabel="HTML Label Here"
        lightlabel="HTML Label Here">
</button>

// OR Via JavaScript
$(function () {
  $('#example').bsDarkmode({
    lightlabel: 'HTML Label Here',
    darklabel: 'HTML Label Here',
  });
})

7.设置插件在CSS变量之间切换的根元素。

<button class="btn btn-primary" 
        data-plugin="bsdarkmode"
        data-root="#container">
</button>

// OR Via JavaScript
$(function () {
  $('#example').bsDarkmode({
    root: '#container',
  });
})

8.确定是否使用cookie存储当前状态。默认值：false。

$(function () {
  $('#example').bsDarkmode({
    allowsCookie: true,
  });
})

9.API方法。

// initialize the plugin
$('#example').bsDarkmode();
 
// enable Light Mode
$('#example').bsDarkmode('light');
 
// enable Dark Mode
$('#example').bsDarkmode('dark');
 
// toggle between Dark Mode and Light Mode
$('#example').bsDarkmode('toggle');
 
// enable cookies (true/false)
$('#example').bsDarkmode('setCookieAutorization', status)

9.当模式改变时执行一个功能。

$('#example').change(function() {
  // do something
})

更新日志：

v2.0.0版本（2022-09-12）

• 添加对Bootstrap 5的支持。

v1.2.0 (2022-08-31)

• 所有Bootstrap程序组件的颜色都应该映射到插件中。
• 专长：在cookie中设置首选颜色模式
• 修复：列表组样式的颜色不被覆盖

v1.1.1 (2022-08-22)

• 修复：组件渲染超出根元素
• 修复：Jumbotron风格的颜色不被覆盖
• 修复：卡片样式的颜色不被覆盖
• 修复：表样式的颜色不被替代
• 修复：窗体和输入组样式颜色不被覆盖
• 修复：面包屑样式的颜色不被覆盖
• 修复：导航栏和导航样式颜色不被覆盖

1.0版（2022-08-14）

• 功能：保留主题颜色的rgb CSS var
• 添加了默认的深色主题
• 专长：获取用户偏好的配色方案
• 修复：执行操作时不会触发更改事件
• 修复：浅色CSS变量未正确应用

预览截图

暗模式切换按钮插件 Bootstrap bs暗模式