Automatic Dark Mode - Avenue Theme

@Chambyte

/* Tagline */
.logo-subtitle {
   color: white;
}
/* Nav */
nav.main-nav li a {
   color: white !important;
}
/* Post Title */
article h1.entry-title a {
   color: white !important;
}

@Chambyte I mean, wrap my code in your code ;)

 @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;
}
PASTE MY CODE
}

@Cahmbyte

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

10 minutes: check & find the solution

Hi @tuanphan, thanks for the response.

The CSS code you provided did the job when in Dark Mode but unfortunately it has the opposite effect when light mode is on. As seen in the image below.

Hi @tuanphan, thanks for the response.

The CSS code you provided did the job when in Dark Mode but unfortunately it has the opposite effect when light mode is on. As seen in the image below.

You are a true star.

Thank you very much @tuanphan. That worked.

The menu nav on mobile is still grey but that is not much of a big deal. If anything can be done then please help, if not i can just about live with it.

@Chambyte

div#mobileMenuLink a {
   color: #fff;
}

Thank you Thank you Thank you @tuanphan, your help is truly appreciated.

My H2 and H3 Headings in Dark Mode are greyed out. (See Image attached Image). Any help with a CSS Code for H2 and H3 to convert to white text when the blog switches to Dark Mode?

CC: @tuanphan

Many thanks.

I thank you, @tuanphan. Appreciate your help.