Fix: Resolve CTkSwitch AttributeError and implement custom themes

This commit is contained in:
Ramforth
2025-11-02 22:40:24 +01:00
parent 1250afc9e5
commit b4ffdfa977
4 changed files with 129 additions and 1 deletions

35
custom_theme_dark.json Normal file
View File

@@ -0,0 +1,35 @@
{
"CTk": {
"fg_color": ["#121212", "#121212"]
},
"CTkFrame": {
"fg_color": ["#121212", "#121212"]
},
"CTkLabel": {
"text_color": ["#ecd7b2", "#ecd7b2"]
},
"CTkButton": {
"fg_color": ["#21498a", "#21498a"],
"hover_color": ["#2a5c9e", "#2a5c9e"]
},
"CTkEntry": {
"fg_color": ["#1e1e1e", "#1e1e1e"],
"text_color": ["#ecd7b2", "#ecd7b2"],
"placeholder_text_color": ["#888888", "#888888"]
},
"CTkOptionMenu": {
"fg_color": ["#21498a", "#21498a"],
"button_color": ["#21498a", "#21498a"],
"button_hover_color": ["#2a5c9e", "#2a5c9e"],
"text_color": ["#ecd7b2", "#ecd7b2"]
},
"CTkProgressBar": {
"fg_color": ["#1e1e1e", "#1e1e1e"],
"progress_color": ["#21498a", "#21498a"]
},
"CTkSwitch": {
"fg_color": ["#1e1e1e", "#1e1e1e"],
"progress_color": ["#21498a", "#21498a"],
"text_color": ["#ecd7b2", "#ecd7b2"]
}
}

35
custom_theme_light.json Normal file
View File

@@ -0,0 +1,35 @@
{
"CTk": {
"fg_color": ["#ecd7b2", "#ecd7b2"]
},
"CTkFrame": {
"fg_color": ["#ecd7b2", "#ecd7b2"]
},
"CTkLabel": {
"text_color": ["#000000", "#000000"]
},
"CTkButton": {
"fg_color": ["#4077d1", "#4077d1"],
"hover_color": ["#5a8ee6", "#5a8ee6"]
},
"CTkEntry": {
"fg_color": ["#ffffff", "#ffffff"],
"text_color": ["#000000", "#000000"],
"placeholder_text_color": ["#888888", "#888888"]
},
"CTkOptionMenu": {
"fg_color": ["#4077d1", "#4077d1"],
"button_color": ["#4077d1", "#4077d1"],
"button_hover_color": ["#5a8ee6", "#5a8ee6"],
"text_color": ["#000000", "#000000"]
},
"CTkProgressBar": {
"fg_color": ["#ffffff", "#ffffff"],
"progress_color": ["#4077d1", "#4077d1"]
},
"CTkSwitch": {
"fg_color": ["#ffffff", "#ffffff"],
"progress_color": ["#4077d1", "#4077d1"],
"text_color": ["#000000", "#000000"]
}
}

4
gui.py
View File

@@ -19,7 +19,7 @@ class VideoConverterGUI:
# --- Set Dark Mode by Default --- # --- Set Dark Mode by Default ---
customtkinter.set_appearance_mode("Dark") # Modes: "System", "Dark", "Light" customtkinter.set_appearance_mode("Dark") # Modes: "System", "Dark", "Light"
customtkinter.set_default_color_theme("blue") customtkinter.set_default_color_theme(os.path.join(os.path.dirname(__file__), "custom_theme_dark.json"))
# --- Pack bottom elements first --- # --- Pack bottom elements first ---
# This makes them stick to the bottom # This makes them stick to the bottom
@@ -91,8 +91,10 @@ class VideoConverterGUI:
# Check if the switch is on (1) or off (0) # Check if the switch is on (1) or off (0)
if self.mode_switch.get() == 1: if self.mode_switch.get() == 1:
customtkinter.set_appearance_mode("Dark") customtkinter.set_appearance_mode("Dark")
customtkinter.set_default_color_theme(os.path.join(os.path.dirname(__file__), "custom_theme_dark.json"))
else: else:
customtkinter.set_appearance_mode("Light") customtkinter.set_appearance_mode("Light")
customtkinter.set_default_color_theme(os.path.join(os.path.dirname(__file__), "custom_theme_light.json"))
def browse_file(self): def browse_file(self):
filepath = filedialog.askopenfilename() filepath = filedialog.askopenfilename()

56
test.css Normal file
View File

@@ -0,0 +1,56 @@
:root {
/** Base colors */
--clr-dark-a0: #000000;
--clr-light-a0: #ffffff;
/** Theme primary colors */
--clr-primary-a0: #759542;
--clr-primary-a10: #84a057;
--clr-primary-a20: #94ac6b;
--clr-primary-a30: #a3b77f;
--clr-primary-a40: #b2c394;
--clr-primary-a50: #c1cfa9;
/** Theme surface colors */
--clr-surface-a0: #121212;
--clr-surface-a10: #282828;
--clr-surface-a20: #3f3f3f;
--clr-surface-a30: #575757;
--clr-surface-a40: #717171;
--clr-surface-a50: #8b8b8b;
/** Theme tonal surface colors */
--clr-surface-tonal-a0: #1c1e17;
--clr-surface-tonal-a10: #31332c;
--clr-surface-tonal-a20: #474943;
--clr-surface-tonal-a30: #5f605b;
--clr-surface-tonal-a40: #777974;
--clr-surface-tonal-a50: #91928e;
/** Success colors */
--clr-success-a0: #22946e;
--clr-success-a10: #47d5a6;
--clr-success-a20: #9ae8ce;
/** Warning colors */
--clr-warning-a0: #a87a2a;
--clr-warning-a10: #d7ac61;
--clr-warning-a20: #ecd7b2;
/** Danger colors */
--clr-danger-a0: #9c2121;
--clr-danger-a10: #d94a4a;
--clr-danger-a20: #eb9e9e;
/** Info colors */
--clr-info-a0: #21498a;
--clr-info-a10: #4077d1;
--clr-info-a20: #92b2e5;
}
/** Examples */
.bg-primary {
color: var(--clr-primary-a50);
background-color: var(--clr-surface-a0);
}