Themes using Theme switcher

Hello, i would like to create themes/skins for Frappe desk view, which can be switched using the Toggle Theme option. Any idea how to implement this using a custom app or any guidance where to start?

1 Like

May be you can check how toggle theme is used.

yea, found the js file for Toggle Theme /public/js/frappe/ui/theme_switcher.js

But i’m more of a python guy than a js guy… so bit hard for me to figure out… :grimacing:

@hashir you mean something like this

yes, exactly :star_struck:

Please guide me how to achieve the same.

@hashir first you need to create a css file containing all new colors for specific data-theme and include it in hooks for example :

[data-theme=red]{
--primary:#ff000;
}

next copied the switcher class from theme_switcher.js to my custom app and add new red theme to the fetch_theme function . and include your js to the hooks .
next open navbar settings , hide the old button and create new one that using the new switcher class .
when this works fine you can create new doctypes and python codes to add new themes dynamically from the ui .

7 Likes

@bahaou cool, thanks mate. Let me give this a try and tell you how it goes.

please guide me how i can do this

Hi Mr. Baha
Kindly contact me, I have a some tasks to offer for you
My email is:
sa2024wh@outlook.com
I live in Saudi Arabia

Thanks