I have one question related to pictures use with CTkButton to which I assign picture (.png) which is actually not shown from beginning of program run. It is shown just after I change "customtkinter.set_appearance_mode("")" to any "Light or dark", then they are shown.
here is link to video me running the program: https://youtube.com/shorts/Q-3c0YeDBMQ?feature=share
Can anyone help me?
here is code (this is just part of my code which I created, but totally describe / shows my problem):
# Import Libraries
import time
from datetime import datetime
import customtkinter
from customtkinter import CTk, CTkFrame, CTkImage, CTkButton
from CTkToolTip import CTkToolTip
from PIL import Image
import json
def Theme_Change():
Current_Theme = customtkinter.get_appearance_mode()
if Current_Theme == "Dark":
customtkinter.set_appearance_mode("light")
elif Current_Theme == "Light":
customtkinter.set_appearance_mode("dark")
elif Current_Theme == "System":
customtkinter.set_appearance_mode("dark")
else:
customtkinter.set_appearance_mode("system")
File = open(file=f"Libs\\GUI\\Configuration.json", mode="r", encoding="UTF-8", errors="ignore")
Configuration = json.load(fp=File)
File.close()
def Get_Frame(Frame: CTk|CTkFrame, Frame_Size: str) -> CTkFrame:
Configuration_Bacground = Configuration["Frames"]["Page_Frames"][f"{Frame_Size}"]
# fg_color - Preparation
fg_color_json = Configuration_Bacground["fg_color"]
if type(fg_color_json) is list:
fg_color = tuple(Configuration_Bacground["fg_color"])
else:
fg_color = Configuration_Bacground["fg_color"]
Frame_Big = CTkFrame(
master = Frame,
width = Configuration_Bacground["width"],
height = Configuration_Bacground["height"],
corner_radius = Configuration_Bacground["corner_radius"],
border_width = Configuration_Bacground["border_width"],
border_color = Configuration_Bacground["border_color"],
bg_color = Configuration_Bacground["bg_color"],
fg_color = fg_color)
return Frame_Big
def Get_Icon_Button(Frame: CTk|CTkFrame, Picture_size: str) -> CTkButton:
Configuration_Button_Picture_SideBar = Configuration["Buttons"][f"{Picture_size}"]
Button_Picture_SideBar = CTkButton(
master = Frame,
width = Configuration_Button_Picture_SideBar["width"],
height = Configuration_Button_Picture_SideBar["height"],
corner_radius = Configuration_Button_Picture_SideBar["corner_radius"],
border_width = Configuration_Button_Picture_SideBar["border_width"],
bg_color = Configuration_Button_Picture_SideBar["bg_color"],
fg_color = Configuration_Button_Picture_SideBar["fg_color"],
hover = Configuration_Button_Picture_SideBar["hover"],
hover_color = tuple(Configuration_Button_Picture_SideBar["hover_color"]),
anchor = Configuration_Button_Picture_SideBar["anchor"])
return Button_Picture_SideBar
def Get_Image(light_image: str, dark_image: str, size: tuple) -> CTkImage:
Picture = CTkImage(
light_image = Image.open(f"{light_image}"),
dark_image = Image.open(f"{dark_image}"),
size = size)
return Picture
def Get_Icon(Frame: CTk|CTkFrame, Icon: str, Icon_Size: tuple, Picture_size: str) -> CTkFrame:
Frame_Icon = Get_Icon_Button(Frame=Frame, Picture_size=Picture_size)
Image_Settings = Get_Image(light_image=f"Libs\\GUI\\Icons\\{Icon}_Light.png", dark_image=f"Libs\\GUI\\Icons\\{Icon}_Dark.png", size=Icon_Size)
Frame_Icon.configure(image=Image_Settings, text="")
return Frame_Icon
# -------------------------------------------- Page Listing -------------------------------------------- #
def Clear_Frame(Pre_Working_Frame:CTk|CTkFrame) -> None:
# Find
for widget in Pre_Working_Frame.winfo_children():
widget.destroy()
def Show_Download_Page() -> None:
Clear_Frame(Pre_Working_Frame=Frame_Work_Area_Detail)
time.sleep(0.1)
Page_Download(Frame=Frame_Work_Area_Detail)
# -------------------------------------------- Side Bar -------------------------------------------- #
def Get_Side_Bar(Frame: CTk|CTkFrame) -> CTkFrame:
customtkinter.set_appearance_mode("system") # default
# Page - Downlaod
Icon_Frame_Download = Get_Icon(Frame=Frame, Icon="Download", Icon_Size=(30, 30), Picture_size="Picture_SideBar")
CTkToolTip(widget=Icon_Frame_Download, message="Download page")
Icon_Frame_Download.configure(command = lambda: Show_Download_Page())
Icon_Frame_Download.pack(padx=5, pady=10, expand=True)
Icon_Theme = Get_Icon(Frame=Frame, Icon="Theme", Icon_Size=(30, 30), Picture_size="Picture_Theme")
Icon_Theme.configure(command = lambda: Theme_Change())
Icon_Theme.pack(side="right", fill="none", expand=False, padx=5, pady=5)
# -------------------------------------------- Downlaod Page -------------------------------------------- #
def Page_Download(Frame: CTk|CTkFrame):
pass
# ---------------------------------------------------------- Main Loop ---------------------------------------------------------- #
# main window
window = customtkinter.CTk()
# position window in center
window.geometry("1800x900")
customtkinter.set_appearance_mode("system") # default
# ---------------------------------- Main Page ----------------------------------#
# Frames
Frame_Background = Get_Frame(Frame=window, Frame_Size="Background")
Frame_Background.pack(side="top", fill="both", expand=False)
Frame_Work_Area = Get_Frame(Frame=Frame_Background, Frame_Size="Work_Area")
Frame_Work_Area.pack(side="top", fill="both", expand=False)
Frame_Side_Bar = Get_Frame(Frame=Frame_Work_Area, Frame_Size="Work_Area_SideBar")
Frame_Side_Bar.pack_propagate(False)
Frame_Side_Bar.pack(side="left", fill="y", expand=False)
Frame_Work_Area_Detail = Get_Frame(Frame=Frame_Work_Area, Frame_Size="Work_Area_Main")
Frame_Work_Area_Detail.pack_propagate(False)
Frame_Work_Area_Detail.pack(side="left", fill="both", expand=False)
customtkinter.set_appearance_mode("system") # default
Get_Side_Bar(Frame=Frame_Side_Bar)
# run
window.mainloop()
And Configuration.json:
{
"Buttons": {
"Picture_SideBar": {
"width": 40,
"height": 40,
"corner_radius": 0,
"border_width": 0,
"bg_color": "transparent",
"fg_color": "transparent",
"hover": false,
"hover_color": [
"#00a9ff",
"#00a9ff"
],
"anchor": "center"
},
"Picture_Theme": {
"width": 40,
"height": 40,
"corner_radius": 0,
"border_width": 0,
"bg_color": "transparent",
"fg_color": "transparent",
"hover": false,
"hover_color": [
"#00a9ff",
"#00a9ff"
],
"anchor": "center"
}
},
"Frames": {
"Page_Frames": {
"Background": {
"width": 500,
"height": 900,
"corner_radius": 0,
"border_width": 0,
"border_color": [
"#2C2C2C",
"#111219"
],
"bg_color": "transparent",
"fg_color": "transparent"
},
"Work_Area": {
"width": 1800,
"height": 830,
"corner_radius": 0,
"border_width": 0,
"border_color": [
"#ecf0f1",
"#111219"
],
"bg_color": "transparent",
"fg_color": "transparent"
},
"Work_Area_SideBar": {
"width": 70,
"height": 830,
"corner_radius": 0,
"border_width": 0,
"border_color": [
"#f7f9f9",
"#2C2C2C"
],
"bg_color": "transparent",
"fg_color": [
"#f7f9f9",
"#2C2C2C"
]
},
"Work_Area_Main": {
"width": 1730,
"height": 830,
"corner_radius": 0,
"border_width": 0,
"border_color": [
"#ecf0f1",
"#111219"
],
"bg_color": "transparent",
"fg_color": [
"#ecf0f1",
"#111219"
]
}
}
}
}
This was actually solved by passing empty text to buton as property .command(text="").