Is there a way to add alterative images that change based on dark/light theme?

[kelltom]

As the title suggests, I'd like some button images to change with the theme of the app.

self.github_logo_black = ImageTk.PhotoImage(Image.open(f"{self.PATH}/src/images/ui/github32_b.png"))
self.github_logo_white = ImageTk.PhotoImage(Image.open(f"{self.PATH}/src/images/ui/github32_w.png"))  # unused
self.btn_github = customtkinter.CTkButton(master=self,
                                          text="GitHub",
                                          image=self.github_logo_black,
                                          command=self.btn_github_clicked)
self.btn_github.grid(row=3, column=0, padx=15, pady=(15, 0), sticky="e")

What I have now:

What I want:

Is there a way to programmatically listen for theme changes and swap image accordingly?

[felipetesc]

What about this:
create a function which returns the correct image: dark, or white, accourdingly the current color theme
call self.btn_github.configure(image=your_fn_with_correct_image)
and call self.btn_github.draw()

PS : The issue is: inside configure method of CTkButton the check for the image variable doesn't have the line
require_redraw = True, so, once we add an image we can't change

Gimme a feedback to let me know if it worked, please

[abhaymakes]

Yes, you can get the switch value and if the value for the switch dark mode is True you can config the image of the button to white guthub logo and if it is false, you can config it to black github logo.

I'll post the code tomorrow.

[kelltom]

Let's assume I don't have access to the dark mode switch from this part of the UI. In my project, the left and right panels are separate.

[abhaymakes]

@Kell90 are you using classes to make the left frame and the right frame? if yes, then you must be placing them in a main window(which would be another file). in order to call the function to the change the button color as per the the theme, you have to follow these steps :

1. First you have to create a function in the file where your self.btn_github is located(right frame)

def changeButtonColor(self, mode): #this function takes the current theme mode and changes the image
    if mode == "Dark":
        self.btn_github.configure(image=self.github_logo_white) #if mode is "Dark", change image to white one

    elif mode == "Light":
        self.btn_github.configure(image=self.github_logo_black) #if mode is "light", change image to black one

2. Now you need to find a way to call this function when you interact with the slider in the left frame, i tried importing the right frame but as you're probably using classes to make the frames, as you create the object of the right frame, 2 copies get created, first in the left frame as you're creating an object to access the changebuttonColor function and second at the main window, But ther is a way to do it without making 2 copies, and it could be done by

#while you're creating the left frame class you have to take a function argument in the __init__ method which'd be changeButtonColor function, like this
class LeftFrame:
    def __init__(self, master, changeImageFunc):
        self. button_image_function = lambda theme : changeImageFunc(theme)

3. Third you have to create certain variables in your file which contains the dark mode slider(left frame)

self.main_theme = ctk.get_appearance_mode() #this is to save the theme that is currently selected
self.is_dark_mode = True #this is to check if the dark mode is on(im assuming you're using dark mode as default)

4. Now the last thing left to do is in the main file where all your frame are being packed

from left_frame import LeftFrame
from right_frame import RightFrame


class App:

    def __init__(self):
        
        self.main = ctk.CTk()

        self.right = RightFrame(self.main)

        self.left = LeftFrame(self.main, changeColorFunc=self.right.changeButtonColor) #our left_frame takes the changeButtonColorFunction as an argument in order to run it
        
        self.main.mainloop()

Im not very good a explaining, so im leaving the scripts for the reference here.

Please do ask if you have any doubts! :D

[abhaymakes]

@Kell90

[kelltom]

Sorry, haven’t had a chance to get around to this yet. It’s a little further down in the backlog right now. I’ll hopefully be tackling it this weekend or early next week. Thanks for the suggestions so far though.

[abhaymakes]

Sure, let me know when its done! :D