Cannot seem to use ttk bootstrap and customtkinter together for an gui Project?

[yoboy1102]

Version

• python -> 3.12.0
• customtkinter -> latest
• ttkbootstrap -> latest

Problem
The output Looks like this when I run the program

in this output the code is 400 lines and the things i have imported are

1. import customtkinter as ctk
2. import tkinter as tk
3. import PIL
4. from PIL import Image, ImageTk
5. from pathlib import Path
6. from tkinter import Tk, Canvas, Entry, Text, Button, PhotoImage
   If I add "import ttkbootsrap" or "from ttkbootstrap import Spinbox" and use it to create a spinbox, It gives this as an output
   

And if i simply hover over these buttons it fixes it a little bit

#from customtkinter import *
import tkinter as tk
import PIL
from PIL import Image, ImageTk
from pathlib import Path
#from tkinter import *
from tkinter import Tk, Canvas, Entry, Text, Button, PhotoImage
import ttkbootstrap 

OUTPUT_PATH = Path(__file__).parent
ASSETS_PATH = OUTPUT_PATH / Path(r"E:\user data\Desktop\build\DESKTOP\kama 2024\build\assets\frame0")

def relative_to_assets(path: str) -> Path:
    return ASSETS_PATH / Path(path)

web = ctk.CTk()
ctk.set_appearance_mode('light')
web.geometry("1880x1000")
web.configure(bg = "#FCFFDD")
canvas = Canvas(
    web,
    bg = "#FCFFDD",
    height = 1000,
    width = 1880,
    bd = 0,
    highlightthickness = 0,
    relief = "ridge"
)

canvas.place(x = 0, y = 0)
image_image_1 = PhotoImage(
    file=relative_to_assets("image_1.png"))
image_1 = canvas.create_image(
    940.0,
    500.0,
    image=image_image_1
)

def HomePage(window):
    canvas.create_rectangle(
        0.0,
        1.0,
        1880.0,
        92.0,
        fill="#0B031A",
        outline="")


#Sign IN
    button_image_1 = ctk.CTkImage(light_image=Image.open(relative_to_assets("button_1.png")),
                                dark_image=Image.open(relative_to_assets("button_1.png")),
                                size=(167, 39))
    button_1 = ctk.CTkButton(window,
        image=button_image_1,
        border_width=0,
        text='',
        fg_color='#0B041B',
        bg_color='#0B041B',
        hover_color='#0B041B',
        border_color='#0B041B',
        #highlightthickness=0,
        command=lambda: print("button_1 clicked"),
        #relief="flat",
        width=167.0,
        height=34.0
    )
    button_1.place(
        x=1630.0,
        y=27.0,
    )

#logo down
    button_image_2 = ctk.CTkImage(light_image=Image.open(relative_to_assets("button_2.png")),
                                  dark_image=Image.open(relative_to_assets("button_2.png")),
                                  size=(100, 74))
    button_2 = ctk.CTkButton(window,
        image=button_image_2,
        border_width=0,
        text='',
        fg_color='transparent',
        bg_color='#0A071E',
        hover_color='#0A071E',
        border_color='#0A071E',
        #highlightthickness=0,
        command=lambda: print("button_2 clicked"),
        #relief="flat"
        width=100.0,
        height=74.0
    )
    button_2.place(
     x=103.0,
      y=88,   
    )
#logo
    button_image_3 = ctk.CTkImage(light_image=Image.open(relative_to_assets("button_3.png")),
                                dark_image=Image.open(relative_to_assets("button_3.png")),
                                size=(100, 80))
    button_3  = ctk.CTkButton(window,
        image=button_image_3,
        border_width=0,
        text='',
        fg_color='transparent',
        bg_color='#0B041B',
        hover_color='#0B041B',
        border_color='#0B041B',
        #highlightthickness=0,
        command=lambda: print("button_3 clicked"),
        #relief="flat"
        width=100.0,
        height=91.0
    )
    button_3.place(
        x=103.0,
        y=1.0
    )
#Explore
    button_image_4 = ctk.CTkImage(light_image=Image.open(relative_to_assets("button_4.png")),
                                dark_image=Image.open(relative_to_assets("button_4.png")),
                                size=(84, 57))
    button_4 = ctk.CTkButton(window,
        image=button_image_4,
        border_width=0,
        text='',
        fg_color='transparent',
        bg_color='#0B041B',
        hover_color='#0B041B',
        border_color='#0B041B',
        #highlightthickness=0,
        #relief="flat"
        width=84,
        height=57,
        command = lambda :btn(frames[0])
    )
    button_4.place(
        x=316.0,
        y=16.0,
    )
#Manage
    button_image_5 = ctk.CTkImage(light_image=Image.open(relative_to_assets("button_5.png")),
                                dark_image=Image.open(relative_to_assets("button_5.png")),
                                size=(85, 57))
    button_5 = ctk.CTkButton(window,
        image=button_image_5,
        border_width=0,
        text='',
        fg_color='transparent',
        bg_color='#0B041B',
        hover_color='#0B041B',
        border_color='#0B041B',
        #highlightthickness=0,
        #relief="flat"
        width=85,
        height=57,
        command = lambda :btn(frames[1])
    )
    button_5.place(
        x=442.0,
        y=17.0
    )
#Experience
    button_image_6 = ctk.CTkImage(light_image=Image.open(relative_to_assets("button_6.png")),
                                dark_image=Image.open(relative_to_assets("button_6.png")),
                                size=(127, 57))
    button_6 = ctk.CTkButton(window,
        image=button_image_6,
        border_width=0,
        text='',
        fg_color='transparent',
        bg_color='#0B041B',
        hover_color='#0B041B',
        border_color='#0B041B',
        #highlightthickness=0,
        #relief="flat"
        width=127,
        height=57,
        command = lambda :btn(frames[2])
    )
    button_6.place(
        x=569.0,
        y=16.0
    )
#Destinations
    button_image_7 = ctk.CTkImage(light_image=Image.open(relative_to_assets("button_7.png")),
                                dark_image=Image.open(relative_to_assets("button_7.png")),
                                size=(140, 57))
    button_7 = ctk.CTkButton(window,
        image=button_image_7,
        border_width=0,
        text='',
        fg_color='transparent',
        bg_color='#0B041B',
        hover_color='#0B041B',
        border_color='#0B041B',
        #highlightthickness=0,
        #relief="flat"
        width=140,
        height=57,
        command = lambda :btn(frames[3])
    )
    button_7.place(
        x=735.0,
        y=16.0
    )


#Experience
    button_image_hover_6 = ctk.CTkImage(
        light_image=Image.open(relative_to_assets("button_hover_1.png")),
        size=(127, 57))
    def button_6_hover(e):
        button_6.configure(
            image=button_image_hover_6
        )
    def button_6_leave(e):
        button_6.configure(
            image=button_image_6
        )

    button_6.bind('<Enter>', button_6_hover)
    button_6.bind('<Leave>', button_6_leave)
#Explore
    button_image_hover_4 = PhotoImage(
        file=relative_to_assets("button_hover_2.png"))
    def button_4_hover(e):
        button_4.configure(
            image=button_image_hover_4
        )
    def button_4_leave(e):
        button_4.configure(
            image=button_image_4
        )

    button_4.bind('<Enter>', button_4_hover)
    button_4.bind('<Leave>', button_4_leave)
#Manage
    button_image_hover_5 = PhotoImage(
        file=relative_to_assets("button_hover_3.png"))
    def button_5_hover(e):
        button_5.configure(
            image=button_image_hover_5
        )
    def button_5_leave(e):
        button_5.configure(
            image=button_image_5
        )

    button_5.bind('<Enter>', button_5_hover)
    button_5.bind('<Leave>', button_5_leave)
#Destinations
    button_image_hover_7 = PhotoImage(
        file=relative_to_assets("button_hover_4.png"))
    def button_7_hover(e):
        button_7.configure(
            image=button_image_hover_7
        )
    def button_7_leave(e):
        button_7.configure(
            image=button_image_7
        )

    button_7.bind('<Enter>', button_7_hover)
    button_7.bind('<Leave>', button_7_leave)    
    button_image_hover_1 = PhotoImage(
    file=relative_to_assets("button_hover_5.png"))
    def button_1_hover(e):
        button_1.configure(
            image=button_image_hover_1
        )
    def button_1_leave(e):
        button_1.configure(
            image=button_image_1
        )

    button_1.bind('<Enter>', button_1_hover)
    button_1.bind('<Leave>', button_1_leave)
    
    window.resizable(False, False)

global my_y
my_y = 1004
def up(frm):
        frm.place(x=0, y=my_y)
        #button_frame_1.configure(text=my_y)
def down(frm):
        frm.place(x=0, y=my_y)
        #button_frame_1.configure(text=my_y)
def btn(frm):
    global my_y
    if my_y > 91:        
        my_y=91
        frm.place(x=0, y=my_y)
    elif my_y < 1004:      
        my_y=1004
        frm.place(x=0, y=my_y)
def twoway_arr():
    image_image_3 = PhotoImage(
    file=relative_to_assets("Arrow.png"))
    image_3 = ctk.CTkLabel(bookframe,
        text='',
        
        image=image_image_3
        )
    image_3.place(x=365,y=132)

def oneway_arr ():
    image_image_ar = PhotoImage(
    file=relative_to_assets("Arrow_.png"),)
    image_ar = ctk.CTkLabel(bookframe,
        width=45,
        height=40,
        text='',
        image=image_image_ar
        )
    image_ar.place(x=365,y=128)

     
HomePage(web)  
framev = ['frame_1','frame_2','frame_3','frame_4'] 
frames = []
colors = ['black','blue','green','brown']
for i, v in enumerate(framev):
     v = ctk.CTkFrame(
            web,
            width=1880,
            height=200,
            fg_color=colors[i]
            )
     v.place(x=0,y=1004,)   
     frames.append(v)
#buttonbleh = ctk.CTkButton(frames[0],
#                           )
#buttonbleh.pack()

#button_frame_1 = ctk.CTkButton(web, text='Up', command=lambda :btn(frame_1))
#button_frame_1.place(x=400, y=63)

bookframe = ctk.CTkFrame(
    web,
    corner_radius=15,
    width=1300,
    height=400,
    fg_color='#0B041B',
    bg_color='green' 
)
bookframe.place(x=150,y=567)
hometab = ctk.CTkTabview(
     bookframe,
     width=800,
     height=340,
     corner_radius=7,
     fg_color=('#0B041B','#26294F'),
     bg_color=('#0B041B','#26294F'),
     border_color=('#0B041B','#26294F'),
     border_width= 0,
     segmented_button_fg_color=('#0B041B','#26294F'),
     segmented_button_selected_color=('#0B041B','#26294F'),
     segmented_button_selected_hover_color=('#0B041B','#26294F'),
     segmented_button_unselected_color=('#26294F','#0B041B'),
     segmented_button_unselected_hover_color=('#26294F','#0B041B'),
     text_color=('#CCD09F', '#666666')
     
)
hometab.pack()
hometablist = ['      Book a Flight     ',
               '      Manage Booking    ',
               '        Check-in        ',
               '      Flight Status     ']
for i, v in enumerate(hometablist):
     hometab.add(v)
hometab.set('      Book a Flight     ')
hometabcustomfont = ctk.CTkFont("Georgia", 20, 'bold')
hometab._segmented_button.configure( corner_radius=7,
                                     font=hometabcustomfont)

radioname=['One-way',
           'Round Trip']
radiobuttons = []
radiovar = ctk.StringVar(web,value='')

for i,v in enumerate(radioname):
     v = ctk.CTkRadioButton(hometab.tab(hometablist[0]),
                             text=radioname[i],
                             text_color='white',
                             variable=radiovar,
                             font=('Arial', 16, 'bold'),
                             border_width_checked=4,
                             border_width_unchecked=2,
                             border_color='#26294F',
                             fg_color='#26294F',
                             hover_color='#26294F',
                             command=oneway_arr
                             )
     
     if i == 0:
        v.select(1)
        v.configure(command=oneway_arr)
        v.grid(row=0, column=i, padx=50, pady=10, sticky='ew')
        oneway_arr()
     else:
        v.configure(command=twoway_arr)
        v.place(x=190,y=10)
     radiobuttons.append(v)

entryname = ['From',
             'To']
entries = []
for i, v in enumerate(entryname):
    v = ctk.CTkEntry(hometab.tab(hometablist[0]),
                           width=280,
                           height=50,
                           fg_color='#26294F',
                           bg_color='#0B041B',
                           border_color='black',
                           border_width=4,
                           corner_radius=8,
                           placeholder_text=entryname[i],)
    v.grid(row=2, column=i, padx=50, pady=30, sticky='ew')

spinboxpas = ttkbootstrap.Spinbox(bookframe)
spinboxpas.place(x=200, y=200)

#web.wm_attributes('-transparentcolor','green')
web.mainloop()

[dipeshSam]

CustomTkinter is not compatible with ttkbootstrap. Or, more specifically, ttkbootstrap's internal mechanism is only supportive to native Tkinter applications. What actually happens is that ttkbootstrap uses ttk (Themed Tkinter) to produce appealing graphics. And, ttk isn't supported by customtkinter in any way.

CustomTkinter relies on its own graphics rendering logics or custom json file of theme.

Helpful links:

1. https://customtkinter.tomschimansky.com/documentation/color

Regards.

[yoboy1102]

Any solutions to it?

[dipeshSam]

Use Tkinter if you want to enjoy Bootstrap facilities.

Regards.

[yoboy1102]

i am using tkinter, i am infact using all 3

[dipeshSam]

CustomTkinter is not compatible with bootstrap at all. We can't use CustomTkinter in combination with bootstrap.

[yoboy1102]

Ig, I did found a workaround by making the main window ttkbootstrap.Window(), slight things like the entries n all still kinda sho white bg, but ig no other way to use both

[dipeshSam]

Yeah! You are getting it.