Toggle Logo Sidebar by theme
mocfaisal opened this issue · 2 comments
mocfaisal commented
Hi,
Can you add a switch logo when changing themes
i already made one of my versions, but it could be better by just changing the attributes for the 2 logo modes (light, dark).
My code :
const toggler = document.getElementById("toggle-dark")
// Function for toggling logo when theme mode changed
function toggleTheme() {
let currTheme = document.documentElement.getAttribute("data-bs-theme");
// NOTE Add Condition to change logo
let logo_path = '/static/images/logo/';
let currLogo = app_asset_url + logo_path + "/logo.png";
if (currTheme !== "dark") {
// Dark Mode
currLogo = app_asset_url + logo_path + "/logo2.png";
} else {
// Light Mode
currLogo = app_asset_url + logo_path + "/logo.png";
}
document.getElementById("logo_img").setAttribute('src', currLogo);
}
if (toggler) {
toggler.checked = theme === "dark"
toggler.removeEventListener("input", toggleTheme);
toggler.addEventListener("input", toggleTheme);
}
alfianchii commented
WDYT @zuramai
zuramai commented
Hi, this is a great additionial feature. But for the starter template, we only need one logo unaffected by the dark/light mode. You can implement it into your own application.