CSS切り替えボタン（Localstrageに保存も）の実装

Question

aタグボタン押下をトリガーとして、読み込まれるスタイルシート（<link>タグ）を追加したいと思っています。
また、その状態をLocalStrageに保存し、次回再訪時、または再読み込み時でもそのスタイルシートが読み込まれた状態にしたいと思っています。

再度、同じボタンを押せば、上の適用されたスタイルシートは適用から外され、状態をLocalStrageに入れ、次回再訪時、または再読み込み時でもその状態が適用された状態にしたいと思っています。

ボタン押下後、そのボタンのラベルも変更したいと思っています。

現状、ボタン押下後、スタイルシートの読み込みまでは完成していて、その状態から戻す処理（？）がよく分かりません。

色々試しすぎてよくわからなくなってきました。
ご教授下さい！

<a href="#" id="styleSwitch">
<span class="icon text">夜間モードに切り替える</span>
</a>

$(function() {
var styleSwitch = $('#styleSwitch');
var styleSwitchBtn = styleSwitch.find('.text');

// ユーザーの状態を定義
var userState = false;

// ローカルストレージから読み込み
loadToLS();

function saveToLS() {
  localStorage.setItem('userStateLS', userState);
}
function loadToLS() {
  var userState = localStorage.getItem('userStateLS');
}

if(userState === false) {
  //夜間モードではない時
  styleSwitchBtn.text("夜間モードに切り替える");

  $('#styleSwitch').on('click', function() {
    styleSwitchBtn.text("昼間モードに切り替える");
    userState = true;
    saveToLS();
    console.log(userState);
    $('<link rel="stylesheet" href="/example/resources/css/night.css">').appendTo('head');
  });

} else if(userState === true)  {
  //夜間モードの時
  styleSwitchBtn.text("昼間モードに切り替える");

  $('#styleSwitch').on('click', function() {
    styleSwitchBtn.text("夜間モードに切り替える");
    userState = false;
    saveToLS();
    loadToLS();
    console.log(userState);
    $('<link rel="stylesheet" href="/example/resources/css/night.css">').remove();
  });
}

});

Answer 1

いつまでたっても知名度が低くて悲しいのですが、代替スタイルシートの仕組みが黎明期から備わっています。
https://developer.mozilla.org/ja/docs/Web/CSS/Alternative_style_sheets

基本スタイルシートと代替スタイルシート
http://www.htmq.com/csskihon/013.shtml

link要素を直接追加削除するのではなく、代替スタイルの制御によりdisabledを切り替えるのが本手かと思います。
https://developer.mozilla.org/ja/docs/Web/API/StyleSheet/disabled

参考:
https://allabout.co.jp/gm/gc/23930/
https://qiita.com/takahiro_itazuri/items/559427278f315ed119fe

Answer 2

if(userState === false) {
  //夜間モードではない時
  styleSwitchBtn.text("夜間モードに切り替える");

  $('#styleSwitch').on('click', function() {
    styleSwitchBtn.text("昼間モードに切り替える");
    userState = true;
    saveToLS();
    console.log(userState);
//  $('<link rel="stylesheet" href="/example/resources/css/night.css">').appendTo('head');
    $('<link id="night-style" rel="stylesheet" href="/example/resources/css/night.css">').appendTo('head');
  });

} else if(userState === true)  {
  //夜間モードの時
  styleSwitchBtn.text("昼間モードに切り替える");

  $('#styleSwitch').on('click', function() {
    styleSwitchBtn.text("夜間モードに切り替える");
    userState = false;
    saveToLS();
    loadToLS();
    console.log(userState);
//  $('<link rel="stylesheet" href="/example/resources/css/night.css">').remove();
    $('#night-style').remove();
  });
}

Answer 3

そもそも、onイベントの中にif文を書いていたので動作しない状態でした。
なので、外に出してあげて色試してみたら出来ました。
ご回答いただいた皆さま本当にありがとうございました。

ちなみにgetItemしたlocalstrageの値がstringになっているのには驚きました。