CustomTkinter/Readme.md

240 lines
7.9 KiB
Markdown
Raw Normal View History

2021-03-04 20:27:46 +03:00
# CustomTkinter
2021-03-04 21:10:12 +03:00
![](documentation_images/customtkinter_comparison.png)
2021-03-04 20:27:46 +03:00
2021-03-04 21:10:12 +03:00
With CustomTkinter you can create modern looking user
interfaces in python with tkinter. CustomTkinter is a
2021-03-05 01:39:09 +03:00
tkinter extension which provides extra ui-elements like
2021-03-04 21:10:12 +03:00
the CTkButton, which can be used like a normal tkinter.Button,
2021-03-05 02:44:00 +03:00
but can be customized with a border and round edges.
2021-03-04 21:10:12 +03:00
CustomTkinter also supports a light and dark theme,
2021-03-04 21:54:01 +03:00
which can either be set manually or get controlled by
2021-03-04 21:10:12 +03:00
the system appearance mode (only macOS).
2021-03-05 02:05:34 +03:00
### Example program (simple button):
2021-03-05 18:21:25 +03:00
To use CustomTkinter, just place the /customtkinter folder from this repository
next to your program, and then you can do `import customtkinter`.
2021-03-05 02:05:34 +03:00
```python
import tkinter
2021-03-05 02:32:17 +03:00
import customtkinter # <- import the CustomTkinter module
root_tk = tkinter.Tk() # create the Tk window like you normally do
2021-03-05 02:05:34 +03:00
root_tk.geometry("400x240")
root_tk.title("CustomTkinter Test")
def button_function():
print("button pressed")
2021-03-05 02:32:17 +03:00
# Use CTkButton instead of tkinter Button
2021-03-05 02:05:34 +03:00
button = customtkinter.CTkButton(master=root_tk, corner_radius=10, command=button_function)
button.place(relx=0.5, rely=0.5, anchor=tkinter.CENTER)
root_tk.mainloop()
```
which gives the following:
2021-03-05 02:32:17 +03:00
2021-03-05 02:05:34 +03:00
![](documentation_images/simple_button_test.png)
2021-03-05 02:32:17 +03:00
### Use custom colors and shapes:
If you dont specify any colors, customtkinter uses the standard blue color in the light theme.
You can change the color theme to dark by calling
```customtkinter.set_appearance_mode("Dark")```.
If you specify custom colors for CustomTkinter elements, the you can either use a
tuple in the form: (light_color, dark_color). Or you can set a single color
which will be used in light and dark theme.
2021-03-05 02:36:39 +03:00
```python
2021-03-05 18:21:25 +03:00
customtkinter.set_appearance_mode("Dark") # Other: "Light", "System" (only macOS)
2021-03-05 02:36:39 +03:00
button = customtkinter.CTkButton(master=root_tk,
fg_color=("black", "lightgray"), # <- tuple color for light and dark theme
text="CTkButton",
command=button_event)
button.place(relx=0.5, rely=0.5, anchor=tkinter.CENTER)
```
2021-03-05 02:32:17 +03:00
2021-03-05 02:05:34 +03:00
### How to use macOS dark mode?
If you have a python version with Tcl/Tk >= 8.6.9, then you can enable the macOS
darkmode. Currently only the anaconda python versions have Tcl/Tk >= 8.6.9.
```python
import tkinter
import customtkinter
customtkinter.enable_macos_darkmode()
customtkinter.set_appearance_mode("System")
... the program ...
customtkinter.disable_macos_darkmode()
```
2021-03-05 02:32:17 +03:00
which gives the following with the above simple button program:
![](documentation_images/simple_macOS_darkmode_test.png)
2021-03-05 01:39:09 +03:00
## Ui-Elements
### CTkButton
Examle Code:
```python
def button_event():
print("button pressed")
button = customtkinter.CTkButton(master=root_tk,
text="CTkButton",
command=button_event,
width=120,
height=32,
border_width=0,
corner_radius=8)
button.place(relx=0.5, rely=0.5, anchor=tkinter.CENTER)
```
<details>
<summary>Show all arguments:</summary>
argument | value
--- | ---
master | root, tkinter.Frame or CTkFrame
text | string
command | callback function
width | button width in px
height | button height in px
corner_radius | corner radius in px
border_width | button border width in px
fg_color | forground color, tuple: (light_color, dark_color) or single color
bg_color | background color, tuple: (light_color, dark_color) or single color
border_color | border color, tuple: (light_color, dark_color) or single color
hover_color | hover color, tuple: (light_color, dark_color) or single color
text_color | text color, tuple: (light_color, dark_color) or single color
text_font | button text font, tuple: (font_name, size)
hover | enable/disable hover effect: True, False
</details>
### CTkLabel
Example Code:
```python
2021-03-05 02:44:00 +03:00
label = customtkinter.CTkButton(master=root_tk,
2021-03-05 01:39:09 +03:00
text="CTkLabel",
width=120,
height=25,
corner_radius=8)
2021-03-05 02:44:00 +03:00
label.place(relx=0.5, rely=0.5, anchor=tkinter.CENTER)
2021-03-05 01:39:09 +03:00
```
<details>
<summary>Show all arguments:</summary>
argument | value
--- | ---
master | root, tkinter.Frame or CTkFrame
text | string
width | label width in px
height | label height in px
corner_radius | corner radius in px
fg_color | forground color, tuple: (light_color, dark_color) or single color
bg_color | background color, tuple: (light_color, dark_color) or single color
text_color | label text color, tuple: (light_color, dark_color) or single color
text_font | label text font, tuple: (font_name, size)
</details>
### CTkEntry
Example Code:
```python
entry = customtkinter.CTkEntry(master=root_tk,
width=120,
height=25,
corner_radius=10)
entry.place(relx=0.5, rely=0.5, anchor=tkinter.CENTER)
text = entry.get()
```
<details>
<summary>Show all arguments:</summary>
argument | value
--- | ---
master | root, tkinter.Frame or CTkFrame
width | entry width in px
height | entry height in px
corner_radius | corner radius in px
fg_color | forground color, tuple: (light_color, dark_color) or single color
bg_color | background color, tuple: (light_color, dark_color) or single color
text_color | entry text color, tuple: (light_color, dark_color) or single color
text_font | entry text font, tuple: (font_name, size)
</details>
### CTkSlider
Example Code:
```python
def slider_event(value):
print(value)
slider = customtkinter.CTkSlider(master=root_tk,
width=160,
height=16,
border_width=5.5,
command=slider_event)
slider.place(relx=0.5, rely=0.5, anchor=tkinter.CENTER)
```
<details>
<summary>Show all arguments:</summary>
argument | value
--- | ---
master | root, tkinter.Frame or CTkFrame
command | callback function, gest called when slider gets changed
width | slider width in px
height | slider height in px
border_width | space around the slider rail in px
fg_color | forground color, tuple: (light_color, dark_color) or single color
bg_color | background color, tuple: (light_color, dark_color) or single color
border_color | slider border color, normally transparent (None)
button_color | color of the slider button, tuple: (light_color, dark_color) or single color
button_hover_color | hover color, tuple: (light_color, dark_color) or single color
</details>
### CTkProgressBar
Example Code:
```python
progressbar = customtkinter.CTkSlider(master=root_tk,
width=160,
height=20,
border_width=5)
progressbar.place(relx=0.5, rely=0.5, anchor=tkinter.CENTER)
progressbar.set(value)
```
<details>
<summary>Show all arguments:</summary>
argument | value
--- | ---
master | root, tkinter.Frame or CTkFrame
width | slider width in px
height | slider height in px
border_width | border width in px
fg_color | forground color, tuple: (light_color, dark_color) or single color
bg_color | background color, tuple: (light_color, dark_color) or single color
border_color | slider border color, tuple: (light_color, dark_color) or single color
progress_color | progress color, tuple: (light_color, dark_color) or single color
</details>
### CTkFrame
Example Code:
```python
frame = customtkinter.CTkSlider(master=root_tk,
width=200,
height=200,
2021-03-05 02:05:34 +03:00
corner_radius=10)
2021-03-05 01:39:09 +03:00
frame.place(relx=0.5, rely=0.5, anchor=tkinter.CENTER)
```
<details>
<summary>Show all arguments:</summary>
argument | value
--- | ---
master | root, tkinter.Frame or CTkFrame
width | slider width in px
height | slider height in px
fg_color | forground color, tuple: (light_color, dark_color) or single color
bg_color | background color, tuple: (light_color, dark_color) or single color
</details>
#