Jquery if statement to check the current style sheet

I'm working on a web app and switching stylesheets to let user select different themes.

I have the fallowing code:

$('#theme_selector_white').click(function (){
   $('link[href="default_teal.css"]').attr('href','white_style.css');
});
$('#theme_selector_teal').click(function (){
   $('link[href="white_style.css"]').attr('href','default_teal.css');
});
$('#theme_selector_sopia').click(function (){
   $('link[href="    "]').attr('href','sopia_style.css');
});

My code works if alternating 2 different stylesheets but once I add a third one I need to check what the current one is so I can replaced current stylesheet with the intended one.

I believe I need to do something like this for every selector:

$('#theme_selector_white').click(function(){
     if ( current stylesheet == "default_teal.css") {
           //replace default_teal.css with intended stylesheet
     }
     else {
          //replace sopia_style.css with intended stylesheet

     }

I need help writing the condition to check for current stylesheet.

I will really appreciate any help..


Give an id to your link element

<link id="userSelectedCss" ...>

and then target it

$('#theme_selector_white').click(function (){
 $('#userSelectedCss').attr('href','white_style.css');
});
$('#theme_selector_teal').click(function (){
 $('#userSelectedCss').attr('href','default_teal.css');
});
$('#theme_selector_sopia').click(function (){
 $('#userSelectedCss').attr('href','sopia_style.css');
});