Switching fas fa icon through javascript - Dark / Light mode

Question

Don't know where I am going wrong, but the icon just doesn't change.

$( ".inner-switch" ).on("click", function() {
    if( $( "body" ).hasClass( "dark" )) {
      $( "nav" ).removeClass( "dark-force" );
      $( "body" ).removeClass( "dark" );
      $(this).find("i").toggleClass("fas fa-moon");
    } else {
      $( "body" ).addClass( "dark" );
      $( "nav" ).addClass( "dark-force" );
      $(this).find("i").toggleClass("fas fa-sun");
    }
});

.dark {
    background-color: #222;
}

.dark-force * {
    background-color: #222;
}

It does switch to dark mode, but the icon refuses to change from the moon(fas fa-moon). I'm new to javascript but fairly familiar with HTML and CSS. Any help is appreciated. Have a great and safe day! Thanks for reading!

user_13669048 · Answer

You are nearly there and your code looks good but you need to use addClass and removeClass to switch fas fa icon from sun to moon and vice versa.

$(this).find("i").removeClass("fa-sun").addClass('fa-moon');

When you use toggleClass the existing is still there and new icon is not working as it suppose to.

Live Working Demo:

$(".inner-switch").on("click", function() {
  if ($("body").hasClass("dark")) {
    $("nav").removeClass("dark-force");
    $("body").removeClass("dark");
    $(this).find("i").removeClass("fa-sun").addClass('fa-moon');
  } else {
    $("body").addClass("dark");
    $("nav").addClass("dark-force");
    $(this).find("i").removeClass("fa-moon").addClass('fa-sun');
  }
});

.dark {
  background-color: #222;
}

.dark-force * {
  background-color: #222;
}

.fa-sun {
 color: white;
}

user_514878 · Answer

The problem is that you only toggle the sun and moon class every second time. You need to toggle them both every time!

$(this).find("i").toggleClass("fa-moon").toggleClass("fa-sun");

FYI you don't need to toggle the fas class because you always need it. Also, you don't need to duplicate the code by putting this inside the if/else - as you need to toggle them both every time you click, you can just include this line once directly in the function.

Working example:

$(".inner-switch").on("click", function() {
  // toggle moon and sun every time
  $(this).find("i").toggleClass("fa-moon").toggleClass("fa-sun");

  if ($("body").hasClass("dark")) {
    $("nav").removeClass("dark-force");
    $("body").removeClass("dark");
} else {
 $("body").addClass("dark");
    $("nav").addClass("dark-force");
  }
});

.dark {
  background-color: #222;
}

.dark-force * {
  background-color: #222;
}

.button {
  font-size: 3em;
  color: #f00
}

Tomalak_18771 · Answer

You also need to toggle the font color when you toggle the background color.

$("#lightswitch i").click(function() {
    var isDark = $("body").is(".dark");
    $("body").toggleClass("dark", !isDark);
    $(this).toggleClass("fa-moon", isDark).toggleClass("fa-sun", !isDark);
});

body.dark {
  background-color: #222;
  color: white;
}

Switching fas fa icon through javascript - Dark / Light mode

3 Answers