How to change the foreground or background colour of a Tkinter Button on Mac OS X?

Question

I've been working through the Tkinter chapters in Programming Python and encountered a problem where the foreground and background colours of a button will not change. I am working on a Mac OS X 10.6 system with Python 2.6.1. The colours of a label will change, but not the colours of a button. For example:

from Tkinter import *

Label(None, text='label', fg='green', bg='black').pack()
Button(None, text='button', fg='green', bg='black').pack()

mainloop()

On my Mac system the colours of the label change, but the colours of the button do not. On a Windows system with Python 2.6.1 the colours of both the label and button change.

Anyone know what is going wrong?

I've checked Interface Builder and it appears that there is no option to change the foreground or background colour of a button in that tool. There is the ability to edit the foreground and background colours of a label.

The Mac OS X rendering system (Quartz?) may just not support (easily) changing the fg and bg of a button.

Girder

There is now a better answer - use tkmacosx. Easy to install via pip - requirements look pretty straight forward... as far as I can tell it's all pure python and available on pypi. Credit to Victor VosMottor for mentioning it: https://mcmap.net/q/334749/-how-to-change-the-foreground-or-background-colour-of-a-tkinter-button-on-mac-os-x – Chickasaw

tkmacosx gives some unexpected visual results when using its Button. I would recommend my own ttwidgets package (pypi.org/project/ttwidgets). The TTButton widget is built on underlying Labels and so works around the issue, but without extra, unexpected visual changes. Please see my Answer below for more details. – Armament

Answer 1

I think the answer is that the buttons on the mac simply don't support changing the background and foreground colors. As you've seen, this isn't unique to Tk.

Jehad

Answer 2

There is a solution for changing the background of buttons on Mac.

Use:

highlightbackground=color

For example:

submit = Button(root, text="Generate", highlightbackground='#3E4149')

This results in the following, a nice button that fits in with the background:

Riflery

works on 10.15 catalina too, thanks. @anthony-cramp consider changing the accepted answer. – Statue

perfect, this fixed my issue! – Nejd

Answer 3

You can do it with tkmacosx library from PyPI.

Installation:

• For Python 2, use pip install tkmacosx.

• For Python 3, use pip3 install tkmacosx.

---

This is how you use tkmacosx:

from tkinter import *
from tkmacosx import Button

root = Tk()

B1 = Button(root, text='Mac OSX', bg='black',fg='green', borderless=1)
B1.pack()

root.mainloop()

It works fine on Mac OS X.

Comnenus

P.P.S I think it is the simplest way to do this stuff. – Comnenus

If you post an answer like this you have to see it in the light that your about 9 years and 9 months too late... so include versioning information and birthdate of tkmacos. – Carswell

It will be useful for other users of stack overflow. – Comnenus

@Carswell - StackOverflow is forever. It's reference material, not a social network. It's like Wikipedia - how old content doesn't really matter. Nothing ever auto-locks on the basis of age or inactivity. This is the best answer and should be marked as the correct one. – Chickasaw

The only problem - if I'm not mistaken it's not cross platform – Spurlock

@AlexanderB.: It is cross-platform, see the GitHub repo – Animation

@Chickasaw Stack Overflow doesn't have a marker for a "correct" answer, only for an "accepted" one. That's entirely up to OP, and changing it requires that OP comes back to the question. – Wobbly

Answer 4

For anyone else who happens upon this question as I did, the solution is to use the ttk module, which is available by default on OS X 10.7. Unfortunately, setting the background color still doesn't work out of the box, but text color does.

It requires a small change to the code:

Original:

from Tkinter import *

Label(None, text='label', fg='green', bg='black').pack()
Button(None, text='button', fg='green', bg='black').pack()

mainloop()

With ttk:

import tkinter as tk
from tkinter import ttk

root = tk.Tk()

# background="..." doesn't work...
ttk.Style().configure('green/black.TLabel', foreground='green', background='black')
ttk.Style().configure('green/black.TButton', foreground='green', background='black')

label = ttk.Label(root, text='I am a ttk.Label with text!', style='green/black.TLabel')
label.pack()

button = ttk.Button(root, text='Click Me!', style='green/black.TButton')
button.pack()

root.mainloop()

Melindamelinde

Answer 5

Its quite annoying that after years this is still a problem.

Anyways, as others have mentioned, highlightbackground (the border color) can be used in place of background on a Mac. If you increase the size of the border to be huge (the size of the button or greater), you will get a nice, solid background color. This will give your button the appearance of a label.

This works if you are using place, but not if you are using something like grid. With grid, increasing the border size increases the button size automatically, unfortunately.

However, if you must use grid, you can always hack it....create your colorless grid button. Next use place to parent a background color button on top of it. This will be the button with the 'command' on it or the button you bind events to.

If you want your code to be OS independent, you can either add an 'if OS == "Mac"' statement or even add a custom function that modifies the button if its on a Mac but leaves it alone on Windows or Linux. Here's the former:

from tkinter import *
import platform


if platform.system() == "Darwin":   ### if its a Mac
    B = Button(text="Refersh All Windows", highlightbackground="Yellow", fg="Black", highlightthickness=30)
else:  ### if its Windows or Linux
    B = Button(text="Refresh All Windows", bg="Yellow", fg="Black")

B.place(x=5, y=10, width=140, height=30)

mainloop()

Naashom

This is the only thing that worked for me to get my app working. – Incrust

Answer 6

I was looking as to why this doesn't work as well. I found a quick way to try and fix it is to have a label and then bind a click with the label. Then have the label change colors for a short time to mimic clicking. Here is an example.

def buttonPress(*args):
    searchB.config(state = "active")
    searchB.update()
    time.sleep(0.2)
    searchB.config(state = "normal")
    ## Whatever command you want

    searchB = Label(main, text = "Search", bg = "#fecc14", fg = "Black", activebackground = "Red", highlightbackground="Black")
    searchB.bind("<Button-1>", startSearch)
    searchB.pack()

Smalto

Answer 7

This worked for me:

    self.gnuplot_bt = Button(
        self.run_but_container, text="Plot with Gnuplot", font="Helvetica", command=self.gnuplot,
        highlightbackground ="#8EF0F7", pady=2, relief=FLAT
    )

Peavy

Wonderful; In fact, the kwarg: highlightbackground works with tkinter OSX – Thrave

Yes @BrianOakley, that is what I was saying. – Thrave

Answer 8

Confirm following code can change the background of tkinter Button on Mac OS X.

self.btn_open = tk.Button(self.toolbar,
                          text = "Open",
                          command=self.open,
                          highlightbackground = "gray")

But it cannot change bg of ttk.Button.

Impedance

highlightbackground is not the same as background. highlightbackground only affects a small border around the edges of the button. The background of the button itself doesn't change. – Jehad

With Mojave, this method works in an environment where white text is the default when the OS is in Dark Mode. – Incrust

Answer 9

Not sure if anyone is still viewing this thread, but I have created a simple solution to this problem by creating my own Button class. It is available on GitHub.

import tkinter as tk

class Button():
    button_frame = None
    root = None
    width=100
    height=20
    text=""
    bg="white"
    fg="black"
    font="f 12"
    bordercolor = "black"
    bordersize = 3
    label = None
    command = None

    def __init__(self,root,width=100,height=20,text="",bg="white",fg="black",font="f 12",command=None,bordercolor="black",bordersize=0):
        self.root = root
        self.width=width
        self.height=height
        self.text=text
        self.bg=bg
        self.fg=fg
        self.font=font
        self.command = command
        self.bordercolor = bordercolor
        self.bordersize = bordersize
        self.button_frame = tk.Frame(root,width=width,height=height,bg=bg)
        self.label = tk.Label(self.button_frame,text=self.text,bg=self.bg,width=self.width,height=self.height,fg=self.fg,font=self.font,highlightbackground=self.bordercolor,highlightthickness=self.bordersize)
        self.label.place(anchor="center",relx=0.5,rely=0.5,relheight=1,relwidth=1)
        self.label.bind("<Button-1>",self.call_command)

    def call_command(self,event):
        if (self.command != None):
            self.command()
    
    def place(self,anchor="nw",relx=0,rely=0):
        self.button_frame.place(anchor=anchor,relx=relx,rely=rely)

    def configure(self,width=width,height=height,text=text,bg=bg,fg=fg,font=font,command=command,bordercolor=bordercolor,bordersize=bordersize):
        self.button_frame.configure(width=width,height=height,bg=bg)
        self.label.configure(text=text,bg=bg,width=width,height=height,fg=fg,font=font,highlightbackground=bordercolor,highlightthickness=bordersize)
        self.command = 

Stedfast

Please post solution as an answer and then references – Denbrook

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Tinsmith

Answer 10

Button and Label seem pretty similar to me, so I find it odd that the Label and Button work differently... even after all these years.

You can always make your own Button class which is wrapped around a Label with a border (default width is 2) and a bind call for the Button Release. You'd miss out on some of the "animation" of button press and release, but you'd get your background and foreground colors as desired.

I wrote a project called Tagged Text Widgets ('ttwidgets' on PyPI.org) which essentially does just that. I wrote the project to allow multi-font, multi-color Buttons and Labels. Essentially the project creates a compound Button or Label consisting of multiple underlying Label widgets (each with its own color/font) but acting like a single object. Those different colors and fonts are created by passing in HTML-like tagged text in lieu of regular text. And because of the underlying Labels rather than Buttons, it works around the issue on macOS.

I just tested it on macOS Sierra, and it works around the Button bg/fg color problem.

You can use it as follows:

from ttwidgets import TTButton

A TTButton supports the full interface of a Tkinter Button but with many enhancements. But for someone trying to work around the macOS color issue, just using a TTButton in lieu of a Tkinter Button suffices.

Armament

Answer 11

a I had a similar problem. I am building an application where the GUI is compatible with both MacOS and Windows OS.

Problem: I want to create a button from an image. However, it must work in both MacOS and Windows (or at least find a solution for each respectively). Tkinter.Button wasn't working on MacOS, and Tkmacosx.Button had undesirable behaviors.

I will post some code, but the answer is very simple, ttk.Button() works on both.

However, when using a ttk button, there is no movement animation when the button is clicked. When all borders are gone and all different background colors are set to the same color, the button doesn't move confirming to the user the button was clicked.

To fix this, we will bind the click and the click-release both to their own methods. Both methods just .place the button, click +1 pixels to x and y, and unclick sends the button back to its starting location.

class Root(bootstrap.Window):
    """
    Root UI comprised of import button and 'up-to-date' tracking system indicator
    """

    def __init__(self):
        super().__init__()

        self.settings = UIOptions().settings

        # Window Configuration
        self.title("Automated Expenses Manager")
        self.option_add("*tearOff", False)
        self.geometry("1000x700")
        self.resizable(False, False)

        self.config(background='dark grey')
        
        # Arrow Image Button
        style = bootstrap.Style()
        style.configure(style='Arrow.TButton', background='dark grey',
                        highlightcolor='dark grey', borderwidth=0,
                        focuscolor='dark grey')

        style.map('Arrow.TButton',
                  background=[('active', 'dark grey')],)

        arrow_image = ImageTk.PhotoImage(Image.open(ARROW_IMAGE).resize((235, 150), Image.Resampling.LANCZOS))
        self.arrow = bootstrap.Button(self,
                                      style='Arrow.TButton',
                                      image=arrow_image)
        self.arrow.bind("<Button-1>", self.click)
        self.arrow.bind("<ButtonRelease-1>", self.unclick)
        self.arrow.place(x=390, y=80, anchor='nw')

        self.mainloop()


    def click(self, event):
        self.arrow.place(x=391, y=81, anchor='nw')

    def unclick(self, event):
        self.arrow.place(x=390, y=80, anchor='nw')

Inside this class, you will see I did a style map style.map(). The first positional argument is the style name of which to modify, and in my code I name a property I want to modify and send it a list of tuples. Each tuple indicts a specific event and a value for the named property that will be set, when the event occurs.

I had a problem with hovering over the button. It would change the background color of the button. The solution is to map 'active' - when the mouse hovers the widget, to the same color as the root window background color ('active', 'dark grey'). This stops the widget from changing colors when hovered, because it's just changing to the same color the background already was.

This code runs on both MacOS and Windows perfectly.

Hope it helps!

Avionics

Answer 12

Platform: Mac OS X

OS: 14.1.1 (Mac OS Sonoma)

We need to Install python after installing or updating tcl-tk utility. In my case package manager is brew

brew uninstall tcl-tk --devel 
brew install tcl-tk

In my case tcl-tk installed into directory

/opt/homebrew/Cellar/tcl-tk/8.6.13_5

If you are using ZSH

echo "# For tkinter 
export PATH=\"/opt/homebrew/Cellar/tcl-tk/8.6.13_5/bin:\$PATH\"" >> ~/.zshrc

If you are using BASH

echo "# For tkinter 
export PATH=\"/opt/homebrew/Cellar/tcl-tk/8.6.13_5/bin:\$PATH\"" >> ~/.bashrc

I am Using pyenv for installing python version 3.10.6

pyenv install 3.10.6
pyenv virtualenv 3.10.6 your virtual_env_name

Tkinter Sample Code

from tkinter import Tk, Frame, Button, BOTTOM, LEFT, RIGHT, TOP


root = Tk()

frame1 = Frame(root)
frame1.pack()

frame2 = Frame(root)
frame2.pack(side=BOTTOM)

button1 = Button(frame1, text="Red Button", command=lambda: "Red Button", fg='red')
button1.pack(side=LEFT)

button2 = Button(frame1, text="Blue Button", command=lambda: "Blue Button", fg='blue')
button2.pack(side=RIGHT)

button3 = Button(frame1, text="Cyan Button", command=lambda: "Cyan Button", fg='cyan')
button3.pack(side=TOP)

button4 = Button(frame1, text="White Button", command=lambda: "White Button", fg='white')
button4.pack(side=BOTTOM)
root.mainloop()

Output:

Amends