Assign class to tag1 and unassign from tag2 and vice versa with a click

$(".btn1").click(function() { //on each click one class shows and other hides but i cant figure it out
  $(".darktheme").addClass("displaynone");
  $(".whitetheme").removeClass("displaynone");
});

.displaynone {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn1">
<span class="darktheme">Dark Theme</span>
<span class="whitetheme displaynone">White Theme</span>
</button>

$(".btn1").click(function() { //on each click one class shows and other hides but i cant figure it out
  $(".darktheme, .whitetheme").toggleClass("displaynone");
});

.displaynone {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn1">
<span class="darktheme">Dark Theme</span>
<span class="whitetheme displaynone">White Theme</span>
</button>