如何优化Bootstrap打印模式主题设置？求优于JS切换与重写CSS的方案

方案一：打印媒体查询+属性选择器局部覆盖 #

不用写整套深色打印样式，只在@media print里针对深色主题的关键打印样式做覆盖即可，比如页面背景、文字颜色、容器背景这些直接影响打印可读性的属性：

@media print {
  /* 深色主题下强制打印用浅色核心样式 */
  [data-bs-theme="dark"] body {
    background-color: #ffffff !important;
    color: #000000 !important;
  }
  [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .modal-content {
    background-color: #ffffff !important;
    color: #000000 !important;
  }
  /* 其他如导航栏、表格等组件按需补充，只改打印时出问题的部分 */
}

完全靠CSS解决，没有主题切换的突兀感，工作量比写整套深色打印样式小很多。

方案二：利用Bootstrap CSS变量批量替换 #

Bootstrap的主题基于CSS变量实现，你可以在打印媒体查询里直接重写深色模式下的核心变量，一键切换到浅色主题的变量值：

@media print {
  [data-bs-theme="dark"] {
    --bs-body-bg: #ffffff;
    --bs-body-color: #000000;
    --bs-card-bg: #ffffff;
    --bs-card-color: #000000;
    /* 按需补充其他核心变量，比如链接色、边框色等 */
  }
}

这种方式更高效，只需要替换核心变量，所有依赖这些变量的组件会自动切换到浅色样式，代码量极少，且无JS介入，体验流畅。

方案三：优化JS方案的视觉体验（非首选） #

如果一定要用JS方案，可以通过隐藏页面避免主题切换的闪烁：

window.addEventListener('beforeprint', () => {
  const originalTheme = document.documentElement.getAttribute('data-bs-theme');
  // 临时隐藏页面
  document.body.classList.add('print-hide');
  document.documentElement.setAttribute('data-bs-theme', 'light');
  // 强制重绘后再显示
  requestAnimationFrame(() => {
    document.body.classList.remove('print-hide');
  });
  window._originalTheme = originalTheme;
});

window.addEventListener('afterprint', () => {
  document.documentElement.setAttribute('data-bs-theme', window._originalTheme);
  delete window._originalTheme;
});

配套CSS：

.print-hide {
  visibility: hidden !important;
}

用户看不到切换过程的闪烁，但还是不如纯CSS方案优雅。

内容的提问来源于stack exchange，提问作者stakolee