Multiple banners

 @media (prefers-color-scheme:     dark) {
.logo-image .logo img {
    display: none;
}
.logo a:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/10/headon-generatepress1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: block;
    width: 300px;
    height: 100px;
    margin: 10px auto;
}
.logo a {display: block;}
}

Can you share link to your site, and CSS you used for Dark/Light Mode?

30 minutes ago, tuanphan said:

Can you share link to your site, and CSS you used for Dark/Light Mode?

Hi @tuanphan,

Thanks for taking the time to help.

I’m using the Avenue Template.

The website: https://www.chambyte.net

The CSS for the Dark/Light Mode theme:

  @media (prefers-color-scheme:     dark) {
   body {
 color: #fafafa;
 background-color: #1a1a1a; 
 }
 .blog-title a {
 color: #ffffff;
 }
   .post-title a {
   color: #ffffff !important;
 } 
    blockquote p {
   color: #ffffff !important;
 }
 /* Tagline */
 .logo-subtitle {
     color: white;
 }
 /* Nav */
 nav.main-nav li a {
     color: white !important;
 }
 /* Post Title */
 article h1.entry-title a {
     color: white !important;
 }
div#mobileMenuLink a {
     color: #fff;
 }

 @media (prefers-color-scheme:dark) {
    h2, h3 {
    color: #fff !important;
 }
 }

 }

article h2.entry-title a {
     color: white !important;
 }

16 hours ago, tuanphan said:

 @media (prefers-color-scheme:     dark) {
.logo-image .logo img {
    display: none;
}
.logo a:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/10/headon-generatepress1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: block;
    width: 300px;
    height: 100px;
    margin: 10px auto;
}
.logo a {display: block;}
}

 

Amazing. Many many thanks @tuanphan. Truly appreciated.