2

I tried some things I found on Stackoverflow such as placing a frame around the button and giving that a color, like said here. I also tried some other stuff that is said here but I can't get it to work.

I'm using Mac OS and the buttons are rounded, but there's a square around it which makes it look not as nice. Does anyone know how I can get this square to change its color?

This is the code I'm working with:

empty = Button(frame, text='Opnieuw', command=clear, font=bold_font)
empty.config(width=10, fg='#009688', borderwidth=0, relief=RAISED)
empty.grid(row=11, column=0, pady=(25, 0), padx=(80, 0))

This is the square I'm talking about: the white one which is around the button and does not have that green color.

This is the square I'm talking about

After adding what Bryan Oakley said, by doing this:

empty = Button(frame, text='Opnieuw', command=clear, font=bold_font)
empty.config(width=10, fg='#009688', borderwidth=0, relief=RAISED)
empty.configure(highlightbackground="#009688")
empty.grid(row=11, column=0, pady=(25, 0), padx=(80, 0))

More specifically, this is a larger piece of the code I'm using:

from tkinter import *
from tkinter import font as tkfont

root = Tk()
root.config(background='#009688')
root.title('Contractmaker')

# GUI stuff that takes care of the scrollbar
def on_configure(event):
    canvas.configure(scrollregion=canvas.bbox('all'))

def on_mousewheel(event):
    canvas.yview_scroll(int(event.delta), 'units')

# Create some fonts
bold_font = tkfont.Font(weight='bold')

# Create the actual GUI
canvas = Canvas(root, width=450, height=550)
canvas.config(background='#009688')
canvas.pack(side=RIGHT)

scrollbar = Scrollbar(root, command=canvas.yview)
# scrollbar.pack(side=RIGHT, fill='y')

canvas.configure(yscrollcommand=scrollbar.set)
canvas.bind('<Configure>', on_configure)
canvas.bind_all('<MouseWheel>', on_mousewheel)

frame = Frame(canvas)
frame.config(background='#009688')
canvas.create_window((0,0), window=frame)

empty = Button(frame, text='Opnieuw', font=bold_font)
empty.config(width=10, fg='#009688', borderwidth=0, relief=RAISED)
empty.configure(highlightbackground='#009688')
empty.grid(row=11, column=0, pady=(25, 0), padx=(80, 0))

root.mainloop()

this is what I got:

enter image description here

Does anyone know how I can get the white part of the button to stay white instead of also changing its color? I'm using python 3.8 and Tkinter 8.6.

Jem
  • 557
  • 9
  • 28
  • I cannot reproduce the problem you see. For me, the code works according to the documentation and only adjusts the ring around the button. Please create a complete [mcve] so we can be sure you haven't left out details. I'm guessing it should take less than a dozen lines of code. Also, we need to know which versoin of python and tkinter you're using. – Bryan Oakley Jun 26 '20 at 12:32
  • I updated my question once again. I hope I provided the information needed. Looking forward to your answer, thanks! – Jem Jun 26 '20 at 19:33
  • 1
    I'm not sure but that is a bug, it goes away if you focus out and focus back to the main window. For example try open a `Toplevel` window in the same program then click on toplevel window and then back on the main window. – Saad Jun 26 '20 at 20:11
  • I still see a white button on my mac, though I'm running python 3.7 and tkinter 8.5. – Bryan Oakley Jun 26 '20 at 20:12
  • I think it is a bug indeed as Saad mentioned because after clicking on some random stuff in the GUI, it sometimes shows the correct button as Bryan Oakley showed in his answer. – Jem Jun 26 '20 at 20:14
  • Which appearance you have dark or light? if light, then change to dark and let us know if the tkinter window goes black and show nothing. – Saad Jun 26 '20 at 20:17
  • I'm not sure what you mean with appearance and dark / light. Like how the button is displayed? I see it dark when opening it but then after clicking some stuff, it sometimes goes light. – Jem Jun 26 '20 at 20:19
  • @BryanOakley: i think you can reproduce the issue with **Tcl 8.6 & Tk 8.6 (8.6.8)** on any python 3.x version – Saad Jun 26 '20 at 20:20
  • I mean system dark/light mode. See [here](https://www.macrumors.com/how-to/enable-dark-mode-macos-mojave/) how to change. – Saad Jun 26 '20 at 20:22
  • @Saad, I had it dark mode. After changing it to light mode, nothing changed. The colors change when I focus on a different app and then go back to my GUI. After that first focus change, the color keeps changing between in-focus and out-focus, which is good I guess. But when my GUI opens, it looks like the screenshot I showed which makes it seem as my GUI is out of focus. – Jem Jun 27 '20 at 11:14
  • How are you writing your code like in which ide? and are you using any python environments? Can [this](https://stackoverflow.com/a/55516222/10364425) solve your issue? – Saad Jun 27 '20 at 11:23
  • 1
    I'm using PyCharm. I have no clue actually whether I'm using any environments so I don't think I am. I took a look at the page you suggested but I don't really understand what they're saying. Guess I'll make a new question about my GUI not being focussed visually. Thanks a lot for your time and answers! – Jem Jun 27 '20 at 11:30
  • For anyone in the future who has the same problem, [this](https://stackoverflow.com/questions/62609543/my-tkinter-gui-seems-visually-out-of-focus-when-opened) is the question regarding the focus. – Jem Jun 27 '20 at 11:46

1 Answers1

4

That white area is called the traversal highlight region. It changes color to let the user know when the button has the keyboard focus.

You can change its non-focused color with the highlightbackground option, and its focused color with highlightcolor. You can set it to the color of the background to get it to blend in.

empty.configure(highlightbackground="#009588")

screenshot

Bryan Oakley
  • 370,779
  • 53
  • 539
  • 685
  • I didn't know we could do that on macOS. ***Quick question:-*** How can we do the same with `ttk.Button`? I tried to map as well as configure with `ttk.style` but it doesn't work. – Saad Jun 25 '20 at 14:34
  • If I do this, the entire button gets a shade of that color. I will update my question with a picture. – Jem Jun 26 '20 at 09:56