System colors in iOS

I want to make a custom control in iOS using a canvas.
So I’d like to reflect system colors

The help talks about these methods of Color

But I cannot get at AccentThemeColor, PrimayThemeColor etc etc - they just dont seem to be part of Color as a singleton, or a color I have Var’d
(no sign in autocomplete)

How do I get at these values?

I have a Folder in the IDE of ColorGroups where I add colours I need — there are ones for SystemBackground and SystemFill that might meet your need. There are way more than what I have added.

I confess - I have zero clue about colorgroups - I just don’t understand them
I dont see the system colors in the screenshot.

The implementation is confusing as heck:

dim theColorGroup as new ColorGroup
theColorGroup.AddNamedColor(ColorGroup.Platforms.Current, "disabledControlTextColor")
Return theColorGroup

In code it’s like a mess yes.

In the IDE you can select one of the 3 segmented button options.
The right-most is the one @Jeff_Tullin would need, then use the popupmenu to select a system based color.

I originally thought the IDE was broken when I added a MobileLabel or MobileRectangle, as the popup on the right didn’t show any colour options!

I needed to Add a new ColorGroup from the Insert menu, then these ColorGroups will show up in the Object popup menus.

If you set the ColorGroup as Single or Dual, you can set the individual colour (or Dark mode colour) by clicking on it. I tend to use the Named colour sets as these are managed by Xojo and/or iOS.

Say what?

I added a MobileLabel or MobileRectangle, as the popup on the right didn’t show any colour options!
I needed to Add a new ColorGroup

Doesn’t feel like this relates to drawing to a canvas in the Paint event.
I’ll re-read these messages a few times, but none the wiser yet

It’s documented, AccentThemeColor and PrimaryThemeColor are…

This method is supported for Android only.

Fair. What do we call them on iOS, and how do I get them?

If you want to go the ColorGroup direction, select the last option, IIRC, it’s called Named Color. From the pop up menu you can select one of the iOS named colors.

If you want to do it in code, just use:

Dim c as color = ColorGroup.NamedColor("name")

I think the color you are looking for is tintColor.
Keep in mind that these names are camel cased and must match what Apple uses in their API.

You can get the valid color names on these pages. Just use the Apple property names. Pay attention to when the colors became available as the call will raise an exception if it’s not available on the system.

Colors which represent UI elements:

Standard Colors which auto-adjust for light/dark mode followed by ones that don’t. (Ones that start with “system” will auto adjust.

ColorGroups are an attempt at a cross-platform was to do what Xcode calls “named colors”. Basically, it’s an object that can hold multiple representations of a color which the class sorts out at runtime.

For instance, when they were first introduced, only macOS had dark mode. If you were writing code in a canvas paint event and you wanted to use the macOS “red” color but just a plain old red on Windows and Linux, you’d have to write something like this:

Dim c as color
#if TargetMacOS
    If IsDarkMode then
        c = &cDD0000
    Else 
        c = &cEE0000
    End If
# Else
    c = &cFF0000
# EndIf
g.drawingColor = c

ColorGroups let you define this all visually. You add a named color for “systemRedColor” and then add a Default item of plain old red. Then your paint code becomes:

g.drawingColor = MyRedColorGroup

and all of the logic is handled for you behind the scenes. If Apple ever adjusts the color, your app gets those updates too.

Another advantage of ColorGroups is that you can adjust theme colors very easily. Let’s say that you started designing your app thinking that you wanted errors to appear in maroon. Later on, during testing you find out that maroon is almost invisible on the dark mode backgrounds. If you had been using color literals, you would have to find them all and update them. If it were a ColorGroup, you just adjust the color in there and you’re done.