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

xiaoyuandy 33
Viewed 234

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>
support darkmode template

I think you may need to paste your custom code in your question.

Fen•

Have you ever tried to increase the priority of how you define CSS?

shuai•

how you increase the priority define？

xiaoyuandy•
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>
Fen580
Related
HTTP Error 50X when using PostgreSQL
1 answers
Minimal example custom route plugin
1 answers
Can't access apache answer via subdirectory URL when deployed with docker
1 answers