diff --git a/Readme.md b/Readme.md index 2539d0d..1e8e8a6 100644 --- a/Readme.md +++ b/Readme.md @@ -87,6 +87,12 @@ Otherwise it looks like this: ![](documentation_images/complex_example_light.png) +But can also customize it by yourself. Here I changed the main +colors and removed the round corners, and added a border to the buttons: + +![](documentation_images/complex_example_other_style.png) + + ## Documentation - CustomTkinter Elements ### CTkButton diff --git a/complex_example.py b/complex_example.py index 178bbfc..a56dca3 100644 --- a/complex_example.py +++ b/complex_example.py @@ -2,6 +2,8 @@ import tkinter import tkinter.messagebox import customtkinter +customtkinter.set_appearance_mode("System") # Other: "Light", "Dark" + class App(tkinter.Tk): diff --git a/complex_example_other style.py b/complex_example_other style.py new file mode 100644 index 0000000..0b49b04 --- /dev/null +++ b/complex_example_other style.py @@ -0,0 +1,183 @@ +import tkinter +import tkinter.messagebox +import customtkinter + +customtkinter.set_appearance_mode("System") # Other: "Light", "Dark" + + +class App(tkinter.Tk): + + APP_NAME = "CustomTkinter complex example" + WIDTH = 700 + HEIGHT = 500 + + MAIN_COLOR = "#5EA880" + MAIN_COLOR_DARK = "#2D5862" + MAIN_HOVER = "#458577" + + def __init__(self, *args, **kwargs): + customtkinter.enable_macos_darkmode() + + tkinter.Tk.__init__(self, *args, **kwargs) + + 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("", self.on_closing) + self.bind("", self.on_closing) + self.createcommand('tk::mac::Quit', self.on_closing) + + # ============ create two CTkFrames ============ + + self.frame_left = customtkinter.CTkFrame(master=self, + width=200, + height=App.HEIGHT-40, + corner_radius=0) + self.frame_left.place(relx=0.32, rely=0.5, anchor=tkinter.E) + + self.frame_right = customtkinter.CTkFrame(master=self, + width=420, + height=App.HEIGHT-40, + corner_radius=0) + self.frame_right.place(relx=0.365, rely=0.5, anchor=tkinter.W) + + # ============ frame_left ============ + + self.button_1 = customtkinter.CTkButton(master=self.frame_left, + border_color=App.MAIN_COLOR, + fg_color=None, + hover_color=App.MAIN_HOVER, + text="CTkButton", + command=self.button_event, + border_width=2, + corner_radius=0) + self.button_1.place(relx=0.5, y=50, anchor=tkinter.CENTER) + + self.button_2 = customtkinter.CTkButton(master=self.frame_left, + border_color=App.MAIN_COLOR, + fg_color=None, + hover_color=App.MAIN_HOVER, + text="CTkButton", + command=self.button_event, + border_width=2, + corner_radius=0) + self.button_2.place(relx=0.5, y=100, anchor=tkinter.CENTER) + + self.button_3 = customtkinter.CTkButton(master=self.frame_left, + border_color=App.MAIN_COLOR, + fg_color=None, + hover_color=App.MAIN_HOVER, + text="CTkButton", + command=self.button_event, + border_width=2, + corner_radius=0) + self.button_3.place(relx=0.5, y=150, anchor=tkinter.CENTER) + + # ============ frame_right ============ + + self.frame_info = customtkinter.CTkFrame(master=self.frame_right, + width=380, + height=200, + corner_radius=0) + self.frame_info.place(relx=0.5, y=20, anchor=tkinter.N) + + # ============ frame_right -> frame_info ============ + + self.label_info_1 = customtkinter.CTkLabel(master=self.frame_info, + text="CTkLabel: Lorem ipsum dolor sit,\n" + + "amet consetetur sadipscing elitr,\n" + + "sed diam nonumy eirmod tempor\n" + + "invidunt ut labore", + width=250, + height=100, + corner_radius=0, + fg_color=("white", "gray20"), + text_color=App.MAIN_COLOR, + justify=tkinter.LEFT) + self.label_info_1.place(relx=0.5, rely=0.15, anchor=tkinter.N) + + self.progressbar = customtkinter.CTkProgressBar(master=self.frame_info, + progress_color=App.MAIN_COLOR, + width=250, + height=15, + border_width=0) + self.progressbar.place(relx=0.5, rely=0.85, anchor=tkinter.S) + + # ============ frame_right <- ============ + + self.slider_1 = customtkinter.CTkSlider(master=self.frame_right, + button_color=App.MAIN_COLOR, + button_hover_color=App.MAIN_HOVER, + width=160, + height=16, + border_width=5.5, + command=self.progressbar.set) + self.slider_1.place(x=20, rely=0.6, anchor=tkinter.W) + self.slider_1.set(0.3) + + self.slider_2 = customtkinter.CTkSlider(master=self.frame_right, + button_color=App.MAIN_COLOR, + button_hover_color=App.MAIN_HOVER, + width=160, + height=16, + border_width=5.5, + command=self.progressbar.set) + self.slider_2.place(x=20, rely=0.7, anchor=tkinter.W) + self.slider_2.set(0.7) + + self.label_info_1 = customtkinter.CTkLabel(master=self.frame_right, + text="CTkLabel: Lorem ipsum", + width=150, + height=20, + justify=tkinter.CENTER) + self.label_info_1.place(x=310, rely=0.6, anchor=tkinter.CENTER) + + self.button_4 = customtkinter.CTkButton(master=self.frame_right, + border_color=App.MAIN_COLOR, + fg_color=None, + hover_color=App.MAIN_HOVER, + height=25, + text="CTkButton", + command=self.button_event, + border_width=2, + corner_radius=0) + self.button_4.place(x=310, rely=0.7, anchor=tkinter.CENTER) + + self.entry = customtkinter.CTkEntry(master=self.frame_right, + width=120, + height=25, + corner_radius=0) + self.entry.place(relx=0.33, rely=0.92, anchor=tkinter.CENTER) + self.entry.insert(0, "CTkEntry") + + self.button_5 = customtkinter.CTkButton(master=self.frame_right, + border_color=App.MAIN_COLOR, + fg_color=None, + hover_color=App.MAIN_HOVER, + height=25, + text="CTkButton", + command=self.button_event, + border_width=2, + corner_radius=0) + self.button_5.place(relx=0.66, rely=0.92, anchor=tkinter.CENTER) + + + + self.progressbar.set(0.65) + + def button_event(self): + print("Button pressed") + + def on_closing(self, event=0): + customtkinter.disable_macos_darkmode() + self.destroy() + + def start(self): + self.mainloop() + + +if __name__ == "__main__": + app = App() + app.start() diff --git a/customtkinter/customtkinter_button.py b/customtkinter/customtkinter_button.py index bb73b5a..4503f6d 100644 --- a/customtkinter/customtkinter_button.py +++ b/customtkinter/customtkinter_button.py @@ -36,7 +36,10 @@ class CTkButton(tkinter.Frame): AppearanceModeTracker.add(self.set_appearance_mode) - self.fg_color = fg_color + if fg_color == None: + self.fg_color = self.bg_color + else: + self.fg_color = fg_color self.hover_color = hover_color self.border_color = border_color self.appearance_mode = AppearanceModeTracker.get_mode() # 0: "Light" 1: "Dark" @@ -167,13 +170,13 @@ class CTkButton(tkinter.Frame): self.height - self.inner_corner_radius - self.border_width)) for part in self.canvas_fg_parts: - if type(self.fg_color) == tuple and len(self.hover_color) == 2: + if type(self.fg_color) == tuple and len(self.fg_color) == 2: self.canvas.itemconfig(part, fill=self.fg_color[self.appearance_mode], width=0) else: self.canvas.itemconfig(part, fill=self.fg_color, outline=self.fg_color, width=0) for part in self.canvas_border_parts: - if type(self.border_color) == tuple and len(self.hover_color) == 2: + if type(self.border_color) == tuple and len(self.border_color) == 2: self.canvas.itemconfig(part, fill=self.border_color[self.appearance_mode], width=0) else: self.canvas.itemconfig(part, fill=self.border_color, outline=self.border_color, width=0) @@ -219,7 +222,7 @@ class CTkButton(tkinter.Frame): def on_leave(self, event=0): for part in self.canvas_fg_parts: - if type(self.fg_color) == tuple and len(self.hover_color) == 2: + if type(self.fg_color) == tuple and len(self.fg_color) == 2: self.canvas.itemconfig(part, fill=self.fg_color[self.appearance_mode], width=0) else: self.canvas.itemconfig(part, fill=self.fg_color, width=0) diff --git a/documentation_images/complex_example_other_style.png b/documentation_images/complex_example_other_style.png new file mode 100644 index 0000000..765de5f Binary files /dev/null and b/documentation_images/complex_example_other_style.png differ