set theme icon on sidebar

This commit is contained in:
Corban-Lee Jones 2024-10-14 22:45:00 +01:00
parent 507b60e54e
commit 7705ff1fcb

View File

@ -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);
});