Multiple banners

Hello all,

I currently have a custom CSS that activates the sites Light and Dark Modes based on device settings. I recently had some blog banners made with Red/Black and Red/Grey font colours. The Red/Black logo doesn’t look great on Dark Mode. 

Is it possible to have multiple banners uploaded (either via CSS code etc) for a site that rotates and changes based on whether the site is on Light or Dark Mode? Black/Red banner when in Light Mode and Black/Grey banner when in Dark Mode.

I’m using the Avenue Template.

Any help and guidance will be greatly appreciated. Thanks in advance for your help.

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;
 }

 @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;}
}

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.