Prepping your Xojo made Mac app for Big Sur

Just posted part 2 of what was originally only going to be a 3 part series, but now I have enough content for a while!

Part 2 - Sidebars and source lists.


@Sam_Rowlands could you please tell me how you configured the objects in order to get the appearance of the left side window of the image of your post, with check boxes, focus ring, etc all in green, instead of the original blue one (like the right side window) ? Is this possible to do it also in WebApps with CSS ?

That could just be his system’s accent color. Users can get that on current macOS versions in System Prefs.

BUT you can change the accent color of your app for Big Sur. If the user has the new “Multicolor” accent color chosen.

You will need Xcode. 12 would be better, but 11 will work well enough. Use File -> New -> File and choose to create an Asset Catalog. I recommend keeping your catalog, so save it somewhere important and not just the desktop. Inside the catalog, press the “+” at the bottom left and create a new color set. By default, your color set will have two vales: Any Appearance and Dark Appearance. If you show the attributes inspector using View -> Inspectors -> Attributes, you can change the number of colors in the set with the Appearances menu. My advice is to set colors for both any and dark. Also, give your color set a name.

Now that you have your assets catalog, you need to compile it. /Applications/ --compile DESTINATION_PATH --minimum-deployment-target 11.0 --platform macosx CATALOG_PATH. I’ll admit I don’t actually know the right minimum deployment target, but 11 has worked for me.

This will create an file in your DESTINATION_PATH. Oh right, that means DESTINATION_PATH should be a folder, not a file. Now you’ll need to use Build Automation to have the folder added to your app’s Resources folder. Lastly, you need to add a key to your Info.plist. Add NSAppAccentColorName as a string with the value set to the name of the color set in your asset catalog.

Done. Now on Big Sur, your app will adopt the colors if the user has the Multicolor accent color selected.

I should probably put this in a blog post, but that might wait until Big Sur is closer to shipping.

Edit: Oh yeah that’s definitely just the system accent color, since the left is Catalina. And sorry I missed the CSS question. No, you cannot get the system accent color. There is a CSS property for it, but Apple has it always return blue to prevent advertisers from using it as part of a visitor signature.

1 Like

Too much helpfull your hints @Thom_McGrath … I will test them and send you my results. Very nice from you the hole and detailed explanation.

It is.

System Preferences -> General and select the color of your choice.

There is a API that I intend to test which may or may not do the same or similar thing, which from the looks of it doesn’t need the new resources file type…

Oh really? That would be nice. I have trouble finding anything about the new stuff in the docs.

Yeah, you have to watch the videos, this years API_Changes was light, really light… too light… and I was right, there’s a lot not listed in the changes, which requires you to sit through hours of video, making your own long list of changes.

It’s funny that Apple are bringing resources back, but under a new name. I look forward to seeing an updated ResEdit, especially given the new format is undocumented.

You can get the user’s accent colour with this function:

#If TargetMacOS
  If System.Version >= "10.14" Then
    Declare Function NSClassFromString Lib "AppKit" (aClassName As CFStringRef) As Ptr
    Declare Function controlAccentColor Lib "AppKit" selector "controlAccentColor" (ob_id As Ptr) As Ptr
    Declare Function getRedComponent Lib "AppKit" selector "redComponent"(ob_id As Ptr) As CGFloat
    Declare Function getGreenComponent Lib "AppKit" selector "greenComponent"(ob_id As Ptr) As CGFloat
    Declare Function getBlueComponent Lib "AppKit" selector "blueComponent"(ob_id As Ptr) As CGFloat
    Declare Function getAlphaComponent Lib "AppKit" selector "alphaComponent"(ob_id As Ptr) As CGFloat
    Declare Function colorUsingColorSpace Lib "AppKit" selector "colorUsingColorSpace:"(ob_id As Ptr, space As ptr) As Ptr
    Var c As Ptr = controlAccentColor(NSClassFromString("NSColor"))
    // Get an NSColorSpace object.
    Var nscolorspace As Ptr = NSClassFromString("NSColorSpace")
    // Get a generic RGB NSColorSpace object.
    Declare Function genericRGBColorSpace Lib "AppKit" selector "genericRGBColorSpace" (nsColorSpaceObjID As Ptr) As Ptr
    Var rgbColorSpace As Ptr = genericRGBColorSpace(nscolorspace)
    c = colorUsingColorSpace(c, rgbColorSpace)
    Var r As Integer = getRedComponent(c)*255
    Var g As Integer = getGreenComponent(c)*255
    Var b As Integer = getBlueComponent(c)*255
    Var a As Integer = 256-getAlphaComponent(c)*255

    Return RGB(r, g, b, a)
    // Accent colours were introduced in 10.14.
1 Like

Can you change the accent colour in 10.13? I didn’t realise that.

You can also get the accent color like this:

Var c = ColorGroup.NamedColor(“controlAccentColor”)

On Mac? I thought that color groups were iOS only.

It works in code at the moment and will be in the desktop version in a coming release.

It’s part of the reason that System.Version is also cross platform.

1 Like

Awesome @Greg_Ođ–˝‘Lone! That saves a bunch of code.

@Sam_Rowlands, at OSX 10.13 System Preferences -> General -> Appearance only let set blue or gray.
It also changes for all the OS and not only for one specific application.
I understand that @Thom_McGrath answer is quite more complicated but I believe that only affects the appearance of an specific application, the one where the is in the Resources folder of the Xojo application.
Am I right ?

Correct. AFAIR the color options were introduced in Mojave.

At the moment that’s the way Apple is recommending it to be done. There is another API available that I want to experiment with that may allow us to do this in code, avoiding the need to use Xcode to build an assets file.

We will appreciate if you share your results when you get them. Thanks a lot.