iOS Question Dynamic dark and light modes

[justabill]

As Apple is requiring all new apps (in April 2020) to support iOS 13 at a minimum, I'd like to update my app to support the user's system choice of light or dark mode as part of the iOS 13 compatibility. However, I'm not sure how to implement this in b4i.

From Apple's documentation, it looks like iOS 13 has a traitcollection value that tells what the user selected

enum UIUserInterfaceStyle: Int {
   case unspecified
   case light
   case dark
}

iOS 13 also has added dynamic system colors so instead of hard coding things to white or gray or black, you can use system defined colors that are appropriate for the current system setting.

from https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/

Dynamic System Colors
In addition to tint colors, iOS also provides semantically defined system colors that automatically adapt to both light and dark modes. A semantic color conveys its purpose rather than its appearance or color values. For example, iOS defines colors for use in background areas and for foreground content, such as labels, separators, and fill.

iOS defines two sets of background colors — system and grouped — each of which contains primary, secondary, and tertiary variants that help you convey a hierarchy of information. In general, use the grouped set of background colors when you have a grouped table view; otherwise, use the system set of background colors. For developer guidance, see UI Element Colors.

With both sets of background colors, you generally use the variants to indicate hierarchy in the following ways:

• Primary for the overall view
• Secondary for grouping content or elements within the overall view
• Tertiary for grouping content or elements within secondary elements

For foreground content, iOS defines the following colors:

Color	Used for	API
Label	A text label that contains primary content.	label
Secondary label	A text label that contains secondary content.	secondaryLabel
Tertiary label	A text label that contains tertiary content.	tertiaryLabel
Quaternary label	A text label that contains quaternary content.	quaternaryLabel
Placeholder text	Placeholder text in controls or text views.	placeholderText
Separator	A separator that allows some underlying content to be visible.	separator
Opaque separator	A separator that doesn't allow any underlying content to be visible.	opaqueSeparator
Link	Text that functions as a link.	link

Don’t redefine the semantic meanings of dynamic system colors. To give people a consistent experience and ensure that your interface looks great in all contexts, use dynamic system colors as intended.

Don't try to replicate dynamic system colors. Dynamic system colors may fluctuate from release to release, based on a variety of environmental variables. Instead of trying to create custom colors that match the system colors, use the dynamic system colors.

.
When I'm in the Designer in b4i, I don't see any way to select system colors for labels or headings or backgrounds. If I need to do this in code instead, I'm not sure how to set colors to one of these dynamic system color values for label text or background instead of a hard coded color from the defined list of colors in b4i.

If I can't use the dynamic system colors but have to design two different views in designer for light or dark with hard coded colors, is there a way in b4i to determine what the user selected as their userinterfacestyle so I would know which designer view to load?

I've seen some mentions in the forum that Dark Mode support might be forthcoming but those posts were from 2019. Have I missed where there is a guide to using these system colors or to otherwise support a user's choice in the system settings of dark versus light mode?

Sorry if this is too much of a newbie question but if anyone can direct me to a thread where this is already discussed that I missed in my searching, I would appreciate it.

PS: I am using a local Mac Builder where the current Xcode 11 is installed rather than the hosted builders if that still matters.

 

[Erel]

As Apple is requiring all new apps (in April 2020) to support iOS 13 at a minimum, I'd like to update my app to support the user's system choice of light or dark mode as part of the iOS 13 compatibility. However, I'm not sure how to implement this in b4i.

This requirement is not related to dark theme. Your app meets the new requirements.

I've actually built an almost complete solution for cross platform dark / light theme. You can see some of the work here: https://www.b4x.com/android/forum/threads/dark-light-color-palette.114513/

However I met an issue which appears to be an iOS bug which made the approach I chose not stable enough. It will need to be implemented differently.
I recommend you to wait with this unless it is very important for your app.

You can check whether the device is in dark mode with:

Public Sub IsDarkMode As Boolean
    Dim app As Application
    If app.OSVersion < 13 Then Return False
    Dim no As NativeObject = app.KeyController
    Return no.GetField("traitCollection").GetField("userInterfaceStyle").AsNumber = 2
End Sub