Replace select tag by a toggle switch with jquery integration

See more:

CSS

HTML

jQuery

I am using a select tag in the project to change the theme on the site. that is working like a charm in my project. Here is codepen of my project. jQuery stylesheet switcher[^]
I want to replace select tag with a toggle switch with jquery integration. Like, youtube to switch dark theme. I find many examples of toggle switches that all are based on input tag. I don't know how do I configure it with Jquery.?

What I have tried:

This is my code.

HTML, JS and JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" class="style-change form-control" id="style">
  <option value="css/default">Default Style</option>
  <option value="css/bootstrap-slate">Night Mode</option>
</select>

$(function() {
  $('.style-change').change(function() {

    var style = $(this).val();
    $('body').fadeOut("slow", function() {
      $('link[rel="stylesheet"]').attr("href", style + ".css");
      $('body').fadeIn("slow");

      $.cookie("css", style, {
        expires: 365,
        path: '/'
      });
    });
  });
});

$(document).ready(function() {
  $("#style").val('<?php echo $style; ?>');
});

<?php
if (isset($_COOKIE['css'])) {
    $style = $_COOKIE['css'];
} else {
    $style = 'default';
}
?>

I'm using jQuery cookie library to save user setting in cookies.

Any suggestion would be appreciable.