diff --git a/static/js/base.js b/static/js/base.js index fdfb8ed..4ee6e17 100644 --- a/static/js/base.js +++ b/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); }); \ No newline at end of file