CTkButton - Pictures on Buttons do not show from beginning for me

[JanVasko1]

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"
                ]
            }
        }
    }
}