Customize CSS/HTML does not display as expected in dark mode

Viewed 110
support darkmode template

Add code to the Footer of Admin-Customize-CSS/HTML

The interface is set to dark mode, the newly added code is invalid

Custom CSS Code:

footer.bg-light {
  display: none
}

footer.bg-light1 {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important;
}

Footer Code:

<footer class="bg-light1">
  <div class="py-3 container">
    <p class="text-center mb-0 small text-secondary">
       © 2023-2024 xxxx.com copyright xxxx
    </p>
  </div>
</footer>
xiaoyuandy31
1 Answers

Maybe you can avoid conflicts by not controlling the colors.

Custom CSS Code:

footer:not(#new-footer) {
    display: none;
}

Footer Code:

<footer class="bg-light" id="new-footer">
  <div class="py-3 container">
    <p class="text-center mb-0 small text-secondary">
       © 2023-2024 xxxx.com copyright xxxx
    </p>
  </div>
</footer>
Fen435