Archived topic

Dark mode button with javascript

5 replies · Started by elektrum on February 22, 2021

Viewing posts 1–6 of 6

February 22, 2021 at 2:15 pm #1668357

I am following along this tutorial and got it working, however it only modifies the body and not the containers.

I've added this to Hooks but not sure what the containerElement variable should equal to target the background and font colors of .site-content .inside-article and header:

<script>function myFunction() {
  var bodyElement = document.body;
  var containerElement = ?
  bodyElement.classList.toggle("dark-mode");
  containerElement.classList.toggle("dark-mode");
}</script>

I am also open to a more elegant method of dark mode if you have suggestions.

February 22, 2021 at 6:17 pm #1668535

Hi there,

Can you link us to the site in question?

To see what you already have to get and idea of what best to suggest.

You can use the private information text field to provide the link. Thank you. :)

February 23, 2021 at 6:10 am #1669059

Hi Elvin,

I've provided the site in question in Private Info

February 23, 2021 at 3:13 pm #1669854

Try adding these elements to the script's target for dark mode.

header.site-header
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.inside-page-header

February 24, 2021 at 12:56 pm #1671194

Thanks. I switched to WP Night Mode plugin and called the elements you listed. Works great now!

February 24, 2021 at 4:50 pm #1671405

Nice one. No problem. Glad you got it sorted. :D

This archived topic is closed to new replies.

Start building better websites today.