Being more friendly to user’s eyes, battery saving or just a matter of taste, no matter what’s the reason behind, as a mobile developer, probably you have already considered providing dark mode of your app.
As always, we’re here to help be more productive, so with the first release for the year (R1 2021) we introduced dark mode support for our Telerik Xamarin controls. In short, this means that now our controls will respond to light/dark mode changes both on iOS and Android devices without the need to style them separately.
Let me start from the beginning—dark mode feature of iOS and Android basically is an additional mode to the standard system appearance where all the elements of the operating system are styled in a professionally designed, darker color palette. The mobile platform vendors have designed the dark theme so that the foreground content is perfectly outlined, and all accessibility features are supported as well. Some of the benefits of using the dark theme might be:
It turned out there’s much interest in using dark theme among mobile users and we decided that our controls supporting it would be a valuable addition to the suite. Starting with R1 2021 release, our Telerik UI for Xamarin controls will automatically use a darker theme palette when the device mode is switched.
Let’s check the dark mode feature in more details on both iOS and Android.
For iOS the functionality was introduced in version 13. There is an option in the Settings of the mobile device, so users can choose the dark theme—this will set the darker color palette to the system as well as all running applications. Generally, people expect all apps to respect their system preferences.
On Android the feature for applying the dark theme for the whole device is available since Android 10 (API Level 29). Older Android versions wouldn’t have the option to switch between Light/Dark mode, however, you can add such a switch on app level. Contrary to iOS, when you set the dark mode in Android, the currently running applications are reloaded to apply the new look.
In order to support Dark theme in your application on Android, there is one additional step you would need to take. You must set your app’s theme to inherit from a DayNight theme—go to Resources/values/styles.xml file located in the Android project and app the theme like this:
To illustrate better the Telerik Xamarin controls capability of responding to Light/Dark theme changes, I will use the quick example below. In short, it is a simple reservation form which uses some of our components, namely DatePicker, NumericInput, AutoCompleteView and Button:
In the sample I used AppThemeBinding for Xamarin.Forms Labels TextColor and Grid BackgroundColor, so they to be updated according to the Dark/Light theme changes. For more details on this, you can take a look at the Respond to system theme changes in Xamarin.Forms applications topic on Microsoft Docs.
Here is the result on Android and iOS using the regular system appearance (without switching to Dark mode):
If the app users prefer the dark mode appearance, the same reservation form will be switched to the darker color palette without any additional effort on your side:
We hope the Dark mode support in Telerik UI for Xamarin controls will enhance your app features and will be loved by your users. As always, we encourage you to share your ideas or opinions on the controls and thus play a role for shaping our roadmap. You can write in the Telerik UI for Xamarin Feedback portal or simply raise a ticket.
Yana Kerpecheva is a Senior Technical Support Engineer on the Telerik UI for Xamarin team. She has been working with Telerik products since 2008, when she joined the company. Apart from work, she likes skiing and travelling to new places.
Subscribe to be the first to get our expert-written articles and tutorials for developers!