Setting background color or macOs doesn't have any effect

[ikus060]

I'm in progress of testing if Toga has all I need to create my user interface for Windows, Linux and macOS. Honestly, you make are really good job making all this working out of the box.

For my interface, I need styled button with different colors. On Windows and Linux, it's working fine.

But on macOS, when setting the background color it does nothing.

I search a bit for a solution to change the background color of NSButton in objective-C. But it's not clear if it's even possible. Any idea ?

[freakboy3742]

style=Pack(background_color=RED) (or any other color) should work. However, there's a caveat in the docs about button colors on macOS - while you can control the background color on macOS, you can't control the text color - macOS will pick a contrasting color, and ignore color=... declarations.

[ikus060]

@freakboy3742 Thanks again for helping.

I tried using solid color like RED and BLUE and it's still not working on macOS.

Here the full code:

"""
Opensource software to backup all your data.
"""
import toga
from toga.style import Pack
from toga.style.pack import COLUMN, ROW
import toga.platform

IS_LINUX = toga.platform.get_current_platform() == 'linux'
IS_WINDOWS = toga.platform.get_current_platform() == 'windows'
IS_MAC = toga.platform.get_current_platform() == 'macOS'

default_font_family = 'Tahoma'
default_font_size = 11 # 11pt = 14px

def s(**kwargs):
    font_family=kwargs.pop('font_family', default_font_family)
    font_size=kwargs.pop('font_size', default_font_size)
    return Pack(font_family=font_family, font_size=font_size, **kwargs)

class Button(toga.Button):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        if IS_LINUX:
            from gi.repository import Gtk
            self._impl.native.set_relief(Gtk.ReliefStyle.NONE)
            self._impl.apply_css('test1', {'border-radius':'0', 'border':'none'})
            self._impl.apply_css('test2', {'opacity':'0.8'}, selector='.toga:hover')
        elif IS_WINDOWS:
            from System.Windows.Forms import Padding, FlatStyle
            self._impl.native.Padding = Padding(9)
            self._impl.native.FlatStyle = FlatStyle.Flat

class MinarcaAgent(toga.App):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        # Disable menu creation for Linux and Windows
        if IS_LINUX or IS_WINDOWS:
            self._impl.create_menus = self._create_menus
            self._impl.interface.commands.on_change = None

    def _create_menus(*args, **kwargs):
        # Do nothing
        return None
    
    def startup(self):
        d = dict(family='Tahoma', size=14)
        white = toga.colors.WHITE
        dark = toga.colors.color('#0E2933')
        btn = toga.colors.color('#009FB9')

        main_box = toga.Box(style=s(direction=COLUMN), children=[
            toga.Box(style=s(direction=COLUMN, background_color=dark), children=[
                 toga.Label(text='MINARCA', style=s(text_align='left', color=white, padding=20)),
            ]),
            toga.Box(style=s(direction=COLUMN, padding=30, background_color=white), children=[
                toga.Label(id='lbl', text='Coucou', style=s(text_align='left', padding=20)),
                toga.Box(style=s(direction=ROW), children=[
                    Button(text='Cancel', on_press=self.click ,style=s(color=white, background_color=toga.colors.RED, padding=(20,10,20,20), width=120)),
                    Button(text='OK', on_press=self.click ,style=s(color=white, background_color= toga.colors.BLUE, padding=(20, 0), width=120)),
                ])
            ])
        ])

        self.main_window = toga.MainWindow(title=self.formal_name)
        # Remove useless toolbar
        if IS_LINUX:
            self.main_window._impl.layout.remove(self.main_window._impl.native_toolbar) 
        self.main_window.content = main_box
        self.main_window.show()
    
    def click(self, event=None):
        lbl = self.main_window.widgets['lbl']
        lbl.text = 'Foo'


def main():
    return MinarcaAgent("Minarca Agent", "org.minarca.agent")

I'm using an old version of MacOS Catalina, do you think it's related to it ?

[HalfWhitt]

That's entirely possible — Toga officially supports 11 (Big Sur) and up.

[freakboy3742]

I can confirm this works as expected on Ventura:

The buttons lose their color when the window doesn't have focus, but that's macOS default behavior, AFAIK.

As far as I can tell, the API we're using for color should work on anything from macOS 10.12.2 onwards... but that's also with the documented caveat "in appearances that support it". It wouldn't surprise me if Catalina is the source of the discrepancy here.

[ikus060]

Thanks for testing.

I confirm it's a limitation of MacOS Catalina. The API is provided, but the feature is not implemented. I will try to upgrade my MacOS to BigSur. Not sure if it's feasible. Mac seams to force me to upgrade to the latest version.

Found a reference: https://mackuba.eu/2014/10/06/a-guide-to-nsbutton-styles/#switch

Custom button colors
Since macOS Monterey you can also manually override the background color of a push button, regardless of the global accent color and whether it’s a default button or not. The property used for that is called bezelColor (don’t be fooled by the “10.12.2+” availability, this only works in Monterey).

[HalfWhitt]

You can update to intermediate versions, you just have to do it manually by downloading the installer file rather than through Software Update.

[ikus060]

@HalfWhitt Could you test the following code on MacOS BigSur to check if you have the same behavior ? I don't want to do trough the pain of installing a new macOS if the result is the same.

[HalfWhitt]

I can try it when I'm next at my computer. But you're almost certainly going to run into other issues on Catalina, especially if you plan to package your app with Briefcase.