覆盖 z 索引

Question

我正在使用 darkmode.js https://darkmodejs.learn.uno/ 暗模式库。它使用 css

mix-blend-mode

来带来黑暗模式。当我手动检查时，它适用于深色模式。transform : scale(1)

它不能很好地与 bootstrap 组件（尤其是小部件）配合使用，因此我按照文档使用它。

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
    <script>
      function addDarkmodeWidget() {
        new Darkmode().showWidget();
      }
      window.addEventListener('load', addDarkmodeWidget);
    </script>

现在我想在黑暗模式下忽略一些小部件的 CSS，例如按钮（带有 .btn-primary 类）。我想在黑暗模式下显示按钮的实际颜色。我尝试了 

darkmode-ignore

、 isolation:isolate、mix-blend-mode: Difference; 但它不起作用。 查看 jsfiddle 链接 -

https://jsfiddle.net/27b06hy9/

我想在深色模式下将按钮（带有 .btn-primary 类）的背景颜色显示为蓝色。其余按钮可以在黑暗模式下显示。

Answer 1

只需在 css 中的 darkmode-toggle 类之前添加“按钮”

.darkmode-layer, .darkmode-toggle {
  z-index: 500;
}

你也可以摆弄

的力量

button .darkmode-layer, .darkmode-toggle {
  z-index: 500;
}

Answer 2