覆盖 z-index

Question

我将 darkmode.js https://darkmodejs.learn.uno/ 库用于黑暗模式。它使用 css mix-blend-mode 来引入暗模式。当我手动检查时，它适用于 transform : scale(1) 暗模式。

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

它不适用于引导程序的组件（尤其是小部件），因此我按照文档使用它。

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

现在我想在黑暗模式下忽略一些小部件的 CSS，比如按钮（类 .btn-primary）。我想在暗模式下显示按钮的实际颜色。我尝试了 darkmode-ignore 、isolation:isolate、mix-blend-mode: difference; 但它不起作用。

Checkout jsfiddle link - https://jsfiddle.net/27b06hy9/ 我想在深色模式下将按钮（类为 .btn-primary）的背景颜色显示为蓝色。其余按钮可以在黑暗模式下显示。

Answer 1

据我了解你的问题，你想要这样的东西？

只需在css中的darkmode-toggle类之前添加'button'

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

你也可以摆弄

的力量

all:unset!important;