javascript - jQuery - ローカル ストレージと優先カラー スキームを使用してダーク モードを切り替える

Question

dark-modeシステムのデフォルトの外観 ( light、dark、 ) を検出し、選択したシステムに一致するようにauto変更する機能があります。また、ユーザーがサイトのさまざまなサブページを閲覧するときに、最後に選択したモードを記憶できるようにします。CSSthemelocalStorage

問題は、システムのデフォルトがライトモードに設定されているときに、機能がモード間でのみトグルすることです。

システムがダーク モードまたは自動に設定されているときに、ライト モードをオーバーライドして切り替えることができるように、コードを更新するにはどうすればよいですか?

$(document).ready(function() {
  if (localStorage.getItem("mode") == "dark-theme") {
    $("body").addClass("dark-theme");
  } else if (localStorage.getItem("mode") == "light-theme") {
    $("body").removeClass("dark-theme");
  }
  var mq = window.matchMedia("(prefers-color-scheme: dark)");
  if (localStorage.getItem("mode") == "light-theme") {
    $("body").removeClass("dark-theme");
  } else if (mq.matches) {
    $("body").addClass("dark-theme");
  }
});

$("#theme_toggle").on("click", function() {
  if ($("body").hasClass("dark-theme")) {
    $("body").removeClass("dark-theme");
    localStorage.setItem("mode", "light-theme");
  } else {
    $("body").addClass("dark-theme");
    localStorage.setItem("mode", "dark-theme");
  }
});

body {
  --font-color: blue;
  --bg-color: white;
}

body.dark-theme {
  --font-color: white;
  --bg-color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    --font-color: white;
    --bg-color: black;
  }
  body.light-theme {
    --font-color: blue;
    --bg-color: white;
  }
}

body {
  color: var(--font-color);
  background: var(--bg-color);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="theme_toggle">
  <input type="checkbox" id="theme_toggle">
  Dark mode?
</label>
<h3>Title</h3>