Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Cham

Automatic Dark Mode - Avenue Theme

Question

Posted (edited)

Hi,

Currently in iOS 13 Beta, dark mode can be enabled automatically. I have seen a lot of blogs add CSS code that’s turns their websites in dark mode when dark mode is initiated on iOS and vice versa. I’ve added a CSS code that turns my site into dark mode on iOS but having trouble with the headings and menu navigation text colour changing to match the theme.

I am currently using the Avenue Theme on chambyte.net. I’ve attached a photo and the CSS code snippet I’m currently using, if anyone can help modify this CSS (or have a better CSS code) for the avenue theme for the blog post title and menu colours too match the theme that would greatly appreciated.


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

alt text

Any help will be greatly appreciated.

Many thanks in advance.

7926bb4c-5634-4589-9a19-6654409fe3b1.jpeg.930ec15747a7e2da5de295d449bf7086.jpeg

Edited by Chambyte
Initial Revision

Chambyte - Mobile Tech Geekery - chambyte.net

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 1

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


Share this post


Link to post
  • 1

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


Share this post


Link to post
  • 1

@Cahmbyte


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

10 minutes: check & find the solution

Edited by tuanphan
Initial Revision

Share this post


Link to post
  • 0

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.alt text

021e7e9b-b848-415a-8476-4492dea5ed27.jpeg.60f2b1bb37fa5e472d9669d008ac435f.jpeg


Chambyte - Mobile Tech Geekery - chambyte.net

Share this post


Link to post
  • 0

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.alt text

021e7e9b-b848-415a-8476-4492dea5ed27.jpeg.8c653cc158586ca6401d76835701abef.jpeg


Chambyte - Mobile Tech Geekery - chambyte.net

Share this post


Link to post
  • 0
Posted (edited)

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.

alt text

aa9e6940-6e0e-4502-8709-63d9d5d6ba55.jpeg.e58c483e8488d91e9e84b0f37836298d.jpeg

Edited by Chambyte
Initial Revision

Chambyte - Mobile Tech Geekery - chambyte.net

Share this post


Link to post
  • 0

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


Chambyte - Mobile Tech Geekery - chambyte.net

Share this post


Link to post
  • 0

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.

alt text

40b886d5-12ec-4b68-af54-c03beac3821f.jpeg.dea82302317fcb25d39d3a8be0a26406.jpeg


Chambyte - Mobile Tech Geekery - chambyte.net

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...