3

I developed a simple application using Tkinter, python 3.7.4 and on Mac OS Mojave 10.14.6. I executed the same code on Ubuntu 18.04 and the latest Windows 10, and the application looks native. However, when I run it on my Macbook, it doesn't look native, like other mac GUI apps.

Look at this screenshot for instance: enter image description here

Notice the gray backgrounds on widgets.

Here's the code for this:

import datetime
import gettext
import sys
import time
import os
import tkinter
import tkinter.ttk as ttk
from tkinter.filedialog import askopenfilename
from tkinter import *
from tkinter import filedialog

# All translations provided for illustrative purposes only.
# english
_ = lambda s: s


class MainFrame(ttk.Frame):
    "Main area of user interface content."

    def __init__(self, parent):
        ttk.Frame.__init__(self, parent)
        self.parent = parent
        paddings = {'padx': 6, 'pady': 6}
        self.download_location = '/'.join(os.getcwd().split('/')[:3]) + '/Downloads'
        ttk.Label(parent, text="Youtube Url").pack(side='top', anchor='w', **paddings)
        self.entry = ttk.Entry(parent, )
        self.entry.pack(side='top', fill='x', **paddings)

        # todo delete this line
        self.entry.insert(0, 'https://www.youtube.com/watch?v=nXait2wHOQc')

        self.button = ttk.Button(parent, text="Download", command=self.do_download)
        self.button.pack(side='top', **paddings, anchor='w')

        # style = ttk.Style()
        # style.configure('TButton', foreground="red")
        # self.button.config(style='Alarm.TButton')

        self.location_button = ttk.Button(parent, text="Location", command=self.browse_button)
        self.location_button.pack(side='top', **paddings, anchor='w')

        self.statusStringVar = StringVar()
        self.statusStringVar.set('status here')
        self.status = ttk.Label(parent, textvariable=self.statusStringVar, text='status', )
        self.status.pack(side='top', anchor='w', fill='x', **paddings)

        self.locStringVar = StringVar()
        self.locStringVar.set(f"Location: {self.download_location}")
        self.locationLabel = ttk.Label(parent, textvariable=self.locStringVar, )
        self.locationLabel.pack(side='top', anchor='w', fill='x', **paddings)

        self.mp3_check_value = StringVar()
        self.mp3_checkbox = ttk.Checkbutton(parent, text='Convert to MP3')
        self.mp3_checkbox.config(variable=self.mp3_check_value, onvalue='yes', offvalue='no')
        self.mp3_check_value.set('yes')
        self.mp3_checkbox.pack(side='top', anchor='w', **paddings)

        self.progressIntVar = IntVar()
        self.progressIntVar.set(0)
        self.mpb = ttk.Progressbar(parent, orient="horizontal", length=200, mode="determinate")
        self.mpb['variable'] = self.progressIntVar
        self.mpb.pack(side='top', anchor='w', fill='x', **paddings)
        self.mpb["maximum"] = 100
        # self.mpb["value"] = 0

    def do_download(self):
        pass

    def progress_hook(self, d):
        pass

    def browse_button(self):
        filename = filedialog.askdirectory()
        print(filename)
        self.download_location = filename
        self.locStringVar.set(f"Location: {self.download_location}")


class Application(tkinter.Tk):
    "Create top-level Tkinter widget containing all other widgets."

    def __init__(self):
        tkinter.Tk.__init__(self)

        self.wm_title('Tkinter YDL')
        self.wm_geometry('640x480')

        self.mainframe = MainFrame(self)
        self.mainframe.pack(side='right', fill='y')


if __name__ == '__main__':
    APPLICATION_GUI = Application()
    APPLICATION_GUI.mainloop()

Am I missing something here? Please help.

osama7901
  • 1,461
  • 2
  • 14
  • 21
  • 2
    `ttk` widgets are "themed", so you may be able to make them look more native on MacOS by creating a custom theme. Here's a little (somewhat-dated but still applicable) [documentation](https://web.archive.org/web/20190315202103id_/http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/ttk.html) about them. – martineau Sep 22 '19 at 18:59
  • Relevant [how-to-set-tcl-tk-system-configuration-items](https://stackoverflow.com/questions/52464078/how-to-set-tcl-tk-system-configuration-items/52465157#52465157) – stovfl Sep 22 '19 at 19:12
  • 1
    Don't all of those widgets look native already though? – Roope Sep 22 '19 at 22:17
  • 1
    Maybe I just need to change the Frame's background to macs color. – osama7901 Sep 23 '19 at 05:21
  • 2
    @osama7901: If you find a solution, please post it as an answer here to your own question — which is allowed — for others to use. – martineau Sep 23 '19 at 23:07

3 Answers3

0

The problem is that you put the label into the parent window, and not into the ttk frame. This is why the background color is different. You should set selfas the parent for the label.

ttk.Label(self, text="Youtube Url").pack(side='top', anchor='w', **paddings)
rdbende
  • 29
  • 8
-1

I just saw this theme posted on reddit:

https://github.com/rdbende/Sun-Valley-ttk-theme

It's based on a Microsoft visual style but it definitely looks better than the default ttk theme.

Also scroll to the bottom for two other themes by the same author.

JCallicoat
  • 117
  • 2
-1

You can manually change the background color of the tk or ttk labels to white, if the os is mac. To learn about that check How to identify on which OS Python is running on? (that is if you don't know)

You can see on windows it looks properly native

Or you could try setting the theme to "aqua" which only works on mac

  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 28 '22 at 07:47