Dark mode is none other than the dark theme which is introduced by apple in their latest release of iOS 13.0. Dark mode is designed to be easier on the eyes by providing less harsh display brightness in situations where ambient lighting is lower, while maintaining contrast and vibrancy.
If you have an OLED iPhone, such as an iPhone X, iPhone XS, or iPhone XS Max, enabling Dark Mode may also conserve battery life whenever true blacks are on screen, since black pixels in an OLED panel basically switch off and consume far less power.We further discuss the coding part to manage different modes in below points.
Use of Dark mode
Now we’ll check the steps and functionalities which is included in dark mode functionality.
Steps to enable dark mode
In below images we can see the steps to enable dark mode in iOS devices.
We can have automatic switch button below the theme selection option which provides the functionality from which device can manage the dark and light theme automatically.
When we enable automatic switch on, then on option field will appear, which shows the default option dark until sunrise.
By tapping on that you can have two more options in the next screen, one is for sunset to sunrise and the other is for custom timing.
From this custom timing user can able to add day start time or sunrise time and day end time or sunset time according to their choice.
Now we all wondered how come the device can fetch the time of sunrise and sunset in the first option, so the device will fetch the time data of user’s bed timing from the Health application analysis.
In iOS device Health application is installed by default and that application analyze the timing of users screen usage and from that analysis it can create approximate bed time for that particular user. This was the interface part which we can use in our iOS devices, now in the next few points we will discuss about the development part of the dart mode integration in our iOS application.
Adaptive Colors for Your UI
Choose colors that adapt automatically to the underlying interface style. Light and dark interfaces use very different color palettes. Colors that work well in a light appearance may be hard to see in a dark appearance, and vice versa. An adaptive color object returns different color values for different interface styles.
There are two ways to create adaptive color objects:
Choose semantic colors instead of fixed color values. When configuring UI elements, choose colors with names like labelColor. These semantic colors convey the intended use of the color, rather than specific color values. When you use them for their intended purpose, they render with color values appropriate for the current settings. For a complete list of semantic color names, see NSColor and UIColor.
Define custom colors in your asset catalog. When you need a specific color, create it as a color asset. In your asset, specify different color values for both light and dark appearances. You can also specify high-contrast versions of your colors.
You configure custom color assets using Xcode’s asset editor. Add a Color Set asset to your project and configure the appearance variants you want to modify. Use the Any Appearance variant to specify the color value to use on older systems that do not support Dark Mode.
Let see how we can able to use different colors for different modes of the iOS devices.
From the above image you can see how we can user color set which can help us to manage colors in light and dark mode of device.
Now we can see how we can use this color set in our coding, its similar to images which we are setting in our code from the application assets.
// macOS
Check below ref link for further details.
Apple Developer Dark mode interface
Create Images for All Appearances
Make sure the images in your interface look good in both light and dark appearances. Interfaces use images in many places, including in buttons, image views, and custom views and controls. If an image is difficult to see when changing appearances, provide a new image asset that looks good in the other appearance. Better yet, use a symbol image or template image, which define only the shape to render and therefore do not require separate images for light, dark, and
high-contrast environments.
For information about configuring images for both light and dark interfaces, see below image
As per the previous image we can see that we can add different images for different mode from assets same live color which we have seen in the above topic.
We just need to select dark and light mode from the appearance for selected image set, and need to add different images for different modes of the devices.
Image from assets will automatically managed same like the image size like @1x, @2x, @3x.
So now this way we can manage images in different modes.
Check below ref link for further details.
Apple Developer Images for different Appearance
Update Custom Views Using Specific Methods
When the user changes the system appearance, the system automatically asks each window and view to redraw itself. During this process, the system calls several well-known methods for both macOS and iOS, listed in the following table, to update your content.
The system updates the trait environment before calling these methods, so if you make all of your appearance-sensitive changes in them, your app updates itself correctly.
Now we see the different methods to be used to update the UI part with the change of mode of the devices.
About Author
ManekTech Team
ManekTech is a well-known software development and IT consulting company, providing custom software, website, and mobile app development services. ManekTech has own content writing and development team who writes content on various and trending technology that it serves currently.
