Themes using Theme switcher

1

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?

2 Likes
2

May be you can check how toggle theme is used.

3

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:

4

@hashir you mean something like this

image
image1612×631 68.1 KB

5

yes, exactly :star_struck:

6

Please guide me how to achieve the same.

7

image
image972×385 33.6 KB

8

@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 .

8 Likes
9

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

10

please guide me how i can do this

11

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

12

@bahaou please share the detailed steps.

Thank you

13

plz bro can u show me steps plzz ?

14

plz bro can u show me steps plzz ?

15

step are here my friend . Themes using Theme switcher - #8 by bahaou

1 Like
16

@bahaou
thanks for the steps may i know how can i create the custom app and then link to the erpnext.

Thanks

Screenshot from 2024-05-20 15-49-59
Screenshot from 2024-05-20 15-49-591875×888 148 KB

17

@rs115199789 here is how you create a new app

1 Like
18

Ok so do i need to make an icon ? size, what should i create to add a custom theme to the website, can you elaborate a bit more thank you.

19

@rs115199789 just create your app then follow the steps above .

20

that’s what i wanted to know what should i create ? same library as mentioned in your link.

Thank you