如何结合dark-mode-switch实现ASP.Net汉堡菜单的navbar样式切换？

AI 小北

2026-6-23

解决暗黑模式下导航栏类切换问题

方法一：纯CSS实现（无需修改JS）

dark-mode-switch脚本会在暗黑模式开启时给<html>标签添加dark类，关闭时移除。你可以直接通过CSS选择器控制导航栏样式，不需要切换navbar-light/navbar-dark类：

/* 暗黑模式下应用navbar-dark的样式特性 */
html.dark .navbar {
  background-color: #212529; /* 匹配Bootstrap navbar-dark的默认背景色 */
  color: #fff;
}
/* 继承Bootstrap navbar-dark的文字样式规则 */
html.dark .navbar .navbar-brand,
html.dark .navbar .nav-link {
  color: rgba(255,255,255,.9);
}
html.dark .navbar .nav-link:hover {
  color: rgba(255,255,255,.7);
}

方法二：JS监听模式切换（切换类实现）

不用修改原dark-mode-switch.min.js，在项目的自定义脚本中添加以下代码，监听模式切换事件来切换导航栏的类：

// 获取导航栏元素
const navbar = document.querySelector('.navbar');

// 监听暗黑模式切换事件
document.addEventListener('darkModeSwitch', (e) => {
  if (e.detail.darkMode) {
    // 开启暗黑模式：替换类
    navbar.classList.remove('navbar-light', 'bg-white');
    navbar.classList.add('navbar-dark', 'bg-dark');
  } else {
    // 关闭暗黑模式：恢复原类
    navbar.classList.remove('navbar-dark', 'bg-dark');
    navbar.classList.add('navbar-light', 'bg-white');
  }
});

// 页面加载时初始化导航栏状态
window.addEventListener('DOMContentLoaded', () => {
  if (document.documentElement.classList.contains('dark')) {
    navbar.classList.remove('navbar-light', 'bg-white');
    navbar.classList.add('navbar-dark', 'bg-dark');
  }
});