Dark Mode Support in Telerik UI for Xamarin Controls

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:

• Lower power usage
• Better experience for users with vision impairment
• Better vision for all users in a low-environment

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.

Dark Mode Support on iOS

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.

Dark Theme Support on Android

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:

Let’s See It in Action

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:

Share Your Feedback

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.