Python Tkinter menu colours

[mattl1598]

I'm trying to make a settings menu for my A-Level coursework in Computer Science and one of my aims is to have a themes system and a menu to change it. 

 

So far, the theme switching menu works and changes the backgrounds, text colours, button colours etc but the actual drop down menu doesn't change colour according to the theme and it doesn't look very good on the dark theme background.

 

Has anyone got much experience with tkinter and can tell me which config value I need to set to change the colour?

 

(attached are an image of my settings menu with the drop down open and the code for getting colours from json file and creating the option menu)

 

Code:

theme import from json:

Spoiler

	def gettheme(self):

		#get colours from json file
		with open("D:/Project-Bookworm/theme.json", "r") as readfile:
			theme1 = json.load(readfile)

		theme = theme1["theme"]

		bg = theme1[theme]["windows"]["background"]
		text = theme1[theme]["windows"]["text"]
		buttonBG = theme1[theme]["button"]["background"]
		buttTXT = theme1[theme]["button"]["text"]
		boxBG = theme1[theme]["textbox"]["background"]
		boxTXT = theme1[theme]["textbox"]["foreground"]
		cursor = theme1[theme]["textbox"]["insertbackground"]
		select = theme1[theme]["textbox"]["selectbackground"]
		clickedbg = theme1[theme]["button"]["clickedbg"]

		return bg, text, buttonBG, buttTXT, boxBG, boxTXT, cursor, select, clickedbg, theme

 

creating optionmenu:

Spoiler

	def __init__(self):


		#import colours
		bg, text, buttonBG, buttTXT, boxBG, boxTXT, cursor, select, clickedbg, currentTheme = self.gettheme()
		self.setts = tkinter.Tk()
		self.setts.title("Settings")
		self.setts.configure(background=bg)

		themes = [
			"dark",
			"light",
			"custom"
		]

		self.theme = tkinter.StringVar(self.setts)
		self.theme.set(currentTheme)


		#option menu setup and config
		self.themeDrop = tkinter.OptionMenu(self.setts, self.theme, *themes)
		self.themeDrop.configure(background=buttonBG, foreground=buttTXT, activebackground=clickedbg, activeforeground=buttTXT, highlightthickness=0, highlightcolor=bg, highlightbackground=bg, disabledForeground=bg)
		#print(self.themeDrop.config())
		self.themeDrop.pack()

 

json file:

Spoiler

{
    "theme": "dark",
    "dark": {
        "windows": {
            "background": "#474747",
            "darkbackground": "#2f2f2f",
            "highlightbackground": "#474747",
            "highlightcolor": "black",
            "text": "white"
        },
        "textbox": {
            "background": "#2f2f2f",
            "foreground": "white",
            "highlightbackground": "#d9d9d9",
            "highlightcolor": "black",
            "insertbackground": "#c4c4c4",
            "selectbackground": "#214283",
            "selectforeground": "black"
        },
        "button": {
            "background": "#474747",
            "text": "white",
            "clickedbg": "#2f2f2f"
        }
    },
    "light": {
        "windows": {
            "background": "#d9d9d9",
            "darkbackground": "#d9d9d9",
            "highlightbackground": "#d9d9d9",
            "highlightcolor": "black",
            "text": "black"
        },
        "textbox": {
            "background": "white",
            "foreground": "black",
            "highlightbackground": "#d9d9d9",
            "highlightcolor": "black",
            "insertbackground": "#c4c4c4",
            "selectbackground": "black",
            "selectforeground": "black"
        },
        "button": {
            "background": "#d9d9d9",
            "text": "black",
            "clickedbg": "#d9d9d9"
        }
    },
    "custom": {
        "windows": {
            "background": "SystemButtonFace",
            "darkbackground": "#2f2f2f",
            "highlightbackground": "#474747",
            "highlightcolor": "black",
            "text": "white"
        },
        "textbox": {
            "background": "#2f2f2f",
            "foreground": "white",
            "highlightbackground": "#d9d9d9",
            "highlightcolor": "black",
            "insertbackground": "#c4c4c4",
            "selectbackground": "#214283",
            "selectforeground": "black"
        },
        "button": {
            "background": "#474747",
            "text": "white",
            "clickedbg": "#2f2f2f"
        }
    }
}

 

 

[reniat]

this looks like it might be useful https://stackoverflow.com/questions/6178153/how-to-change-menu-background-color-of-tkinters-optionmenu-widget

[Sauron]

Do you call the init function every time you change theme? If not, the reason this doesn't work is that the menu is created with the default theme and never updated.

[mattl1598]

Just now, Sauron said:

Do you call the init function every time you change theme? If not, the reason this doesn't work is that the menu is created with the theme and never updated.

sort of. when i change theme the close button in the settings menu functions as an apply and close. so it goes back to the main menu which gets re-opened from it's init function and you go back into settings from there.

[mattl1598]

6 minutes ago, reniat said:

this looks like it might be useful https://stackoverflow.com/questions/6178153/how-to-change-menu-background-color-of-tkinters-optionmenu-widget

thank you this is working now. i should be able to get rid of the weird border issues from here.

 

thanks again

[Sauron]

7 minutes ago, mattl1598 said:

sort of. when i change theme the close button in the settings menu functions as an apply and close. so it goes back to the main menu which gets re-opened from it's init function and you go back into settings from there.

Try manually changing the theme after creating the menu, that should tell us if the problem is caused by only applying it on creation. Also, have you read this?

 

-edit-

well looks like I'm late to the party ^^

[mattl1598]

18 hours ago, reniat said:

this looks like it might be useful https://stackoverflow.com/questions/6178153/how-to-change-menu-background-color-of-tkinters-optionmenu-widget

sorry to ask again but I can't work out which option the border is controlled by.

 

it doesn't get removed by setting the border width to 0 and i've tried all of the colour things that i can change for the optionmenu["menu"] object.

 

[reniat]

5 hours ago, mattl1598 said:

sorry to ask again but I can't work out which option the border is controlled by.

 

it doesn't get removed by setting the border width to 0 and i've tried all of the colour things that i can change for the optionmenu["menu"] object.

 

try this: https://stackoverflow.com/questions/39921360/how-to-remove-the-border-of-a-tkinter-optionmenu-widget
also, both of these are from the first page of a google search  Don't hesitate to let yourself dig through search results once and a while. It's a good skill to have.

[Voltaia]

I apologize for reviving this thread, but did you happen to figure out how to change the color of the border surrounding the options (the white border in your dark theme screenshot)? I am able to change the background of the options and their font color with the following:

dropdownmenu["menu"].config(bg="grey", fg="white")

However, I can not seem to figure out how to change the ugly border surrounding the options.

[riklaunim]

On 5/7/2021 at 1:39 AM, Voltaia said:

However, I can not seem to figure out how to change the ugly border surrounding the options.

Hm.. why do you even want to recolor the UI. You either should aim for native look or in some cases - for completely custom look that doesn't resemble native UI elements. On top of that tkinter is pretty much obsolete in terms of UX/UI -  you won't get a good app out of that.