fixed rendering bug in CTkSlider and modified complex examples

customtkinter/customtkinter_slider.py

@@ -124,8 +124,12 @@ class CTkSlider(tkinter.Frame):
         if not self.canvas.find_withtag("inner_parts"):
             self.canvas.create_line((0, 0, 0, 0), tags=("inner_line_1", "inner_parts"))
 
-            if self.progress_color != self.fg_color:
+        if self.progress_color != self.fg_color:
+            if not self.canvas.find_withtag("progress_parts"):
                 self.canvas.create_line((0, 0, 0, 0), tags=("inner_line_progress", "progress_parts"))
+                self.canvas.tag_raise("button_parts")
+        else:
+            self.canvas.delete("progress_parts")
 
         self.canvas.coords("inner_line_1",
                            (self.height / 2,
@@ -192,6 +196,10 @@ class CTkSlider(tkinter.Frame):
             self.canvas.create_rectangle((0, 0, 0, 0), tags=("inner_rect_2", "inner_parts"), width=0)
             self.canvas.create_oval((0, 0, 0, 0), tags=("inner_oval_2", "inner_parts"), width=0)
 
+        # progress parts
+        if not self.canvas.find_withtag("inner_oval_1"):
+            self.canvas.delete("inner_oval_1", "inner_rect_1")
+
             if self.progress_color != self.fg_color:
                 self.canvas.create_oval((0, 0, 0, 0), tags=("inner_oval_1", "progress_parts"), width=0)
                 self.canvas.create_rectangle((0, 0, 0, 0), tags=("inner_rect_1", "progress_parts"), width=0)
@@ -301,7 +309,10 @@ class CTkSlider(tkinter.Frame):
             del kwargs["bg_color"]
 
         if "progress_color" in kwargs:
-            self.progress_color = kwargs["progress_color"]
+            if kwargs["progress_color"] is None:
+                self.progress_color = self.fg_color
+            else:
+                self.progress_color = kwargs["progress_color"]
             require_redraw = True
             del kwargs["progress_color"]
 

examples/complex_example.py

@@ -1,6 +1,7 @@
 import tkinter
 import tkinter.messagebox
 import customtkinter
+import sys
 
 customtkinter.set_appearance_mode("System")  # Other: "Light", "Dark"
 
@@ -16,14 +17,21 @@ class App(tkinter.Tk):
 
         tkinter.Tk.__init__(self, *args, **kwargs)
 
+        # color the background of the Tk window if mode is not System
+        if customtkinter.get_appearance_mode() == "Dark":
+            self.configure(bg="#323232")  # set window background to dark color
+        elif customtkinter.get_appearance_mode() == "Light":
+            self.configure(bg="#ECECEC")  # set window background to dark color
+
         self.title(App.APP_NAME)
         self.geometry(str(App.WIDTH) + "x" + str(App.HEIGHT))
         self.minsize(App.WIDTH, App.HEIGHT)
 
         self.protocol("WM_DELETE_WINDOW", self.on_closing)
-        self.bind("<Command-q>", self.on_closing)
+        if sys.platform == "darwin":
-        self.bind("<Command-w>", self.on_closing)
+            self.bind("<Command-q>", self.on_closing)
-        self.createcommand('tk::mac::Quit', self.on_closing)
+            self.bind("<Command-w>", self.on_closing)
+            self.createcommand('tk::mac::Quit', self.on_closing)
 
         # ============ create two CTkFrames ============
 

examples/complex_example_other_style.py

@@ -22,18 +22,21 @@ class App(tkinter.Tk):
 
         tkinter.Tk.__init__(self, *args, **kwargs)
 
-        if "win" in sys.platform:
+        # color the background of the Tk window if mode is not System
-            if customtkinter.get_appearance_mode() == "Dark":
+        if customtkinter.get_appearance_mode() == "Dark":
-                self.configure(bg="gray20")  # set window background to dark color
+            self.configure(bg="#323232")  # set window background to dark color
+        elif customtkinter.get_appearance_mode() == "Light":
+            self.configure(bg="#ECECEC")  # set window background to dark color
 
         self.title(App.APP_NAME)
         self.geometry(str(App.WIDTH) + "x" + str(App.HEIGHT))
         self.minsize(App.WIDTH, App.HEIGHT)
 
         self.protocol("WM_DELETE_WINDOW", self.on_closing)
-        self.bind("<Command-q>", self.on_closing)
+        if sys.platform == "darwin":
-        self.bind("<Command-w>", self.on_closing)
+            self.bind("<Command-q>", self.on_closing)
-        self.createcommand('tk::mac::Quit', self.on_closing)
+            self.bind("<Command-w>", self.on_closing)
+            self.createcommand('tk::mac::Quit', self.on_closing)
 
         # ============ create two CTkFrames ============
 

examples/simple_example.py

@@ -2,12 +2,13 @@ import tkinter
 import customtkinter  # <- import the CustomTkinter module
 
 customtkinter.enable_macos_darkmode()
-customtkinter.set_appearance_mode("System")  # Other: "Dark", "Light"
 
 root_tk = tkinter.Tk()  # create the Tk window like you normally do
 root_tk.geometry("400x300")
 root_tk.title("CustomTkinter Test")
 
+customtkinter.set_appearance_mode("System")  # Other: "Dark", "Light"
+
 
 def button_function():
     print("Button click")
@@ -34,53 +35,15 @@ button_1 = customtkinter.CTkButton(master=frame_1, corner_radius=10, command=but
 button_1.place(relx=0.5, rely=0.4, anchor=tkinter.CENTER)
 # button_1.configure(state="disabled")
 
-slider_1 = customtkinter.CTkSlider(master=frame_1, command=slider_function, from_=0, to=1)
+slider_1 = customtkinter.CTkSlider(master=frame_1, command=slider_function, from_=0, to=1, progress_color="gray20")
 slider_1.place(relx=0.5, rely=0.55, anchor=tkinter.CENTER)
 slider_1.set(1.5)
 
 entry_1 = customtkinter.CTkEntry(master=frame_1)
 entry_1.place(relx=0.5, rely=0.75, anchor=tkinter.CENTER)
 
-#checkbox_1 = customtkinter.CTkCheckBox(master=frame_1, command=check_box_function)
+checkbox_1 = customtkinter.CTkCheckBox(master=frame_1, command=check_box_function)
-#checkbox_1.place(relx=0.5, rely=0.9, anchor=tkinter.CENTER)
+checkbox_1.place(relx=0.5, rely=0.9, anchor=tkinter.CENTER)
-
-color = {'main': '#FFFFFF',
-         'accent': '#F0F0F0',
-         'text': '#141414',
-
-         'red': '#FF3232',
-         'red_': '#DC1414',
-         'yellow': '#FFDC32',
-         'yellow_': '#F0C800',
-
-         'green': '#50C850',
-         'green_': '#32B432',
-         'teal': '#50C8C8',
-         'teal_': '#329696',
-
-         'blue': '#3296FF',
-         'blue_': '#1478FF',
-         'purple': '#9696FF',
-         'purple_': '#1478FF',
-
-         'white': '#FFFFFF',
-         'white_': '#F0F0F0',
-         'black': '#141414',
-         'black_': '#323232',
-         }
-
-red_slider = customtkinter.CTkSlider(
-    from_=0, to=100,
-    command=lambda event: event,
-    progress_color=color['red'],
-    fg_color=color['accent'],
-    button_color=color['white_'],
-    button_hover_color=color['white_'],
-    master=frame_1,
-    height=20,
-    width=100)
-red_slider.place(relx=0.5, rely=0.9)
-red_slider.configure(fg_color=color['accent'], bg_color=None)
 
 root_tk.mainloop()
 customtkinter.disable_macos_darkmode()