Using ttk theme azure-dark and Changing background color of ttk combobox widget
Question:
I am using the ttk azure theme dark Azure-ttk-theme. It sets the background color to nice modern looking UI. However, as seen in the images the background color of the tk window, Text widget and combobox widget is set as same. This looks bad when we are using all these together with some text in area(as seen on the right side of screenshot below).
I tried to modify the background of my combobox as below(pardon the full imports- just for replication):
from tkinter import *
from tkinter.ttk import *
root = Tk()
style = ttk.Style(root)
root.tk.call("source", SYSTEM_DIR / "azure.tcl")
root.tk.call("set_theme", "dark")
style.configure("TCombobox", fieldbackground= "orange", background= "white")
g_combo = Combobox(root, style="TCombobox")
But, the above code does not have any effect on my interface. If someone has any idea on how I can handle this. I might have to modify the tcl file for this theme. Since, I have limited knowledge on tcl I am looking for answers/suggestions here.
Answers:
Ahh, well, I am answering this question because I also tried using this theme yesterday. My idea was too something similar to yours. I wanted to change the default colors and stuff to get a better UI. Before getting into the solution, I have to tell you that this theme overrides the default values and designs to a custom-created one as set by the author. So here’s what you can do to achieve what you want.
As far as I know, the only way to do this is to edit the TCL file, which manages the colors of the widgets. It would help if you had some idea about TCL language before you get into it so deep. So I will tell you step by step:
- Go to dark.tcl file, and then find the widget’s code where you want to change the background color. Say you want to change the combo box’s background color. So if you are on windows, you can search
"Combobox" by pressing ctrl+f after opening that file (I suggest using Notepad to edit it, it’s more accessible).
Ok, so here are the codes where you want to change. As you can see in the third part of the code (ttk::style element create Combobox.field), it is used to create the combo box widget. You can keep trying changing different statements and customize the whole Combobox and its effects (If you know how to). But now lets focus on background color
- So in there, you see that the default background is set to an image known as box-basic.
So now you have to go to Azure-ttk-theme/theme/dark folder and find out where that box-basic file is. Once you find it, you have to edit the colors of that image with respecting the same size and then replace the old one and make sure you set the same name. I suggest you to use figma to replicate another image. Its easy. Change it to any color you wish.
And you are done!
With some other theme fieldbackground would work, but not with Azure (or with any of my themes).
Tk handles PNG images containing transparency very badly, especially on Microsoft Windows.
So to reduce lagging, I removed the transparent areas of the image elements, and therefore where you’d expect fieldbackground to be, there’s actually the images’ background, which looks like as if it were fieldbg.
So the solution is to edit the images, as TechieGeeke suggested.
I am using the ttk azure theme dark Azure-ttk-theme. It sets the background color to nice modern looking UI. However, as seen in the images the background color of the tk window, Text widget and combobox widget is set as same. This looks bad when we are using all these together with some text in area(as seen on the right side of screenshot below).
I tried to modify the background of my combobox as below(pardon the full imports- just for replication):
from tkinter import *
from tkinter.ttk import *
root = Tk()
style = ttk.Style(root)
root.tk.call("source", SYSTEM_DIR / "azure.tcl")
root.tk.call("set_theme", "dark")
style.configure("TCombobox", fieldbackground= "orange", background= "white")
g_combo = Combobox(root, style="TCombobox")
But, the above code does not have any effect on my interface. If someone has any idea on how I can handle this. I might have to modify the tcl file for this theme. Since, I have limited knowledge on tcl I am looking for answers/suggestions here.
Ahh, well, I am answering this question because I also tried using this theme yesterday. My idea was too something similar to yours. I wanted to change the default colors and stuff to get a better UI. Before getting into the solution, I have to tell you that this theme overrides the default values and designs to a custom-created one as set by the author. So here’s what you can do to achieve what you want.
As far as I know, the only way to do this is to edit the TCL file, which manages the colors of the widgets. It would help if you had some idea about TCL language before you get into it so deep. So I will tell you step by step:
- Go to dark.tcl file, and then find the widget’s code where you want to change the background color. Say you want to change the combo box’s background color. So if you are on windows, you can search
"Combobox"by pressingctrl+fafter opening that file (I suggest using Notepad to edit it, it’s more accessible).
Ok, so here are the codes where you want to change. As you can see in the third part of the code (ttk::style element create Combobox.field), it is used to create the combo box widget. You can keep trying changing different statements and customize the whole Combobox and its effects (If you know how to). But now lets focus on background color
- So in there, you see that the default background is set to an image known as box-basic.
So now you have to go to Azure-ttk-theme/theme/dark folder and find out where that box-basic file is. Once you find it, you have to edit the colors of that image with respecting the same size and then replace the old one and make sure you set the same name. I suggest you to use figma to replicate another image. Its easy. Change it to any color you wish.
And you are done!
With some other theme fieldbackground would work, but not with Azure (or with any of my themes).
Tk handles PNG images containing transparency very badly, especially on Microsoft Windows.
So to reduce lagging, I removed the transparent areas of the image elements, and therefore where you’d expect fieldbackground to be, there’s actually the images’ background, which looks like as if it were fieldbg.
So the solution is to edit the images, as TechieGeeke suggested.