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.
https://ohanaware.com/blog/202030/Preparing-your-Xojo-made-Mac-App-for-macOS-Big-Sur-part-2.html
@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 ?
Thanks
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/Xcode-beta.app/Contents/Developer/usr/bin/actool --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 Assets.car 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 Assets.car 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.
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)
Else
// Accent colours were introduced in 10.14.
#EndIf
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.
@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 Assets.car 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.