Change logo when theme changes

1

Hello community .
is there a method to automatically change logo when dark mode is enabled_disabled , so I can put a light logo when it’s dark and vice versa . thank you

1 Like
2

found solution?

3

I did that recently using a css filter, to invert the colors!

But, ofcourse it was easier, because the customer logo was just a dark logo on a white background

1 Like
4

Share how you did

5

@bahaou I am also facing this problem , found any solution?

6

I do that with JS:

  1. Add logo in public/images.
  2. Create a js file in public/js.(theme_logo.js)
  3. Add this code :

frappe.after_ajax(() => {

function updateLogoBasedOnTheme() {
    const htmlEl = document.documentElement;
    const theme = htmlEl.getAttribute("data-theme-mode") || "light";

    // Wait until logo element exists
    const logoEl = document.querySelector(".app-logo, .navbar-brand img, .navbar-home img");
    if (!logoEl) {
        setTimeout(updateLogoBasedOnTheme, 500); // retry in 0.5s
        return;
    }

    if (theme === "dark") {
        logoEl.src = "/assets/app_name/images/image_name.png";
    } else {
        logoEl.src = "/assets/app_name/images/image_name.png";
    }
}

// Run once initially
updateLogoBasedOnTheme();

// Re-run when theme changes
const observer = new MutationObserver(updateLogoBasedOnTheme);
observer.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ["data-theme-mode"]
});

});

  1. Add in hooks.py

app_include_js = “/assets/app_name/js/theme_logo.js”

2 Likes