set theme icon on sidebar

static/js/base.js

@@ -5,9 +5,21 @@ const getPreferredTheme = () => window.matchMedia('(prefers-color-scheme: dark)'
 $('input[name="themeToggle"]').on("change", function() {
     const selectedTheme = $(this).val();
     setStoredTheme(selectedTheme);
+    setThemeIcon(selectedTheme)
     applyTheme(selectedTheme);
 });
 
+function setThemeIcon(theme) {
+    const iconOptions = {
+        light: "bi-sun",
+        dark: "bi-moon-stars",
+        auto: "bi-circle-half"
+    }
+
+    $(".js-themeMenuBtn > i").removeClass(Object.values(iconOptions).join(" "));
+    $(".js-themeMenuBtn > i").addClass(iconOptions[theme]);
+}
+
 function applyTheme(theme) {
     $('input[name="themeToggle"]').siblings("label").removeClass("active");
     $(`input[name="themeToggle"][value="${theme}"]`).siblings("label").addClass("active");
@@ -15,6 +27,7 @@ function applyTheme(theme) {
     if (!theme || theme === "auto") {
         theme = getPreferredTheme();
     }
+
     $("body").attr("data-bs-theme", theme);
 }
 
@@ -77,5 +90,7 @@ $(document).ready(function() {
     // $(".input-group.date").datepicker({format: "yyyy-mm-dd"});
 
     // Load theme
-    applyTheme(getStoredTheme());
+    const theme = getStoredTheme();
+    setThemeIcon(theme);
+    applyTheme(theme);
 });