[Resolved] Dark mode button with javascript

Home Forums Support [Resolved] Dark mode button with javascript

Home Forums Support Dark mode button with javascript

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1668357
    elektrum

    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.

    #1668535
    Elvin
    Staff
    Customer Support

    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. ๐Ÿ™‚

    #1669059
    elektrum

    Hi Elvin,

    I’ve provided the site in question in Private Info

    #1669854
    Elvin
    Staff
    Customer Support

    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

    #1671194
    elektrum

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

    #1671405
    Elvin
    Staff
    Customer Support

    Nice one. No problem. Glad you got it sorted. ๐Ÿ˜€

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.