如何让Bootstrap 5.3颜色模式适配浏览器偏好设置？

你说得对，Bootstrap 5.3的深色主题确实依赖data-bs-theme数据属性而非自动读取浏览器的prefers-color-scheme，要实现自动适配+本地存储持久化，JS是必要的，但你的代码可以大幅精简，还能补上浏览器偏好变化的同步逻辑：

1. 精简初始主题设置代码 #

你的原代码可以简化成更紧凑的逻辑，利用JS语法特性和更高效的DOM操作：

// 优先取本地存储的主题，否则匹配浏览器偏好，默认浅色
const theme = localStorage.getItem('bs-theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
// 直接操作html根元素的data属性（比querySelector更高效）
document.documentElement.dataset.bsTheme = theme;
// 首次加载时自动存入本地存储，避免重复写入
!localStorage.getItem('bs-theme') && localStorage.setItem('bs-theme', theme);

2. 可选：监听浏览器主题偏好变化 #

如果要在用户切换系统主题时自动同步页面主题（提升体验），可以添加媒体查询监听：

// 监听系统主题变化事件
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  // 仅当用户未手动设置过主题时，才跟随系统变化
  if (!localStorage.getItem('bs-theme')) {
    const newTheme = e.matches ? 'dark' : 'light';
    document.documentElement.dataset.bsTheme = newTheme;
  }
});

这个逻辑的好处是：如果用户手动切换过主题（本地存储存在记录），则保留用户选择；如果没有手动设置，就自动同步系统主题。

为什么Bootstrap默认不做这个？ #

Bootstrap 5.3把主题控制的主动权完全交给开发者，这样可以灵活实现各种定制需求（比如手动切换按钮、特定页面强制主题等），所以默认不会自动适配系统偏好，需要开发者自己补充这层逻辑。

内容的提问来源于stack exchange，提问作者Pierre de LESPINAY