zuramai/mazer

Toggle Logo Sidebar by theme

mocfaisal opened this issue · 2 comments

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

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.