Telerik UI for Xamarin能幫助開發人員快速構建跨平臺移動應用的原生UI。Telerik UI for Xamarin使用Xamarin.Forms技術，它可以讓開發人員從一個單一的共享C#代碼庫中創建原生的iOS、Android和Windows Phone應用程序。不僅如此，UI for Xamarin建立在iOS和Android的原生控件之上的，為Xamarin用戶的應用程序提供真正的原生UI。

對用戶的眼睛更加友好、節省電量或僅是偏好，無論是什么原因，身為移動開發人員，您可能已經考慮過為應用提供黑暗模式。

Telerik技術團隊旨在提高工作效率，因此在本年度的第一個發行版（R1 2021）中，為Telerik Xamarin控件引入對暗黑模式的支持。簡而言之，這意味著現在我們的控件將響應iOS和Android設備上的明暗模式更改，而無需分別設置樣式。

iOS和Android的暗黑模式功能基本上是標準系統外觀的一種附加模式，在該系統中，操作系統的所有元素均以專業設計的深色調色板設置樣式。 移動平臺供應商已設計了深色主題，因此可以完美地勾勒出前臺內容的輪廓，并且還支持所有輔助功能。 使用深色主題的好處是：

• 降低功耗
• 為視力障礙用戶提供更好的體驗
• 在低配置環境下為所有用戶提供更好的可視化

事實證明，移動用戶對使用深色主題有很大的興趣，我們認為支持該主題的控件將是對該套件的寶貴補充。 從R1 2021版本開始，切換設備模式時，Telerik UI for Xamarin控件將自動使用較暗的主題調色板。

在iOS和Android上更詳細地檢查暗黑模式功能。

iOS上的暗黑模式支持

對于iOS，此功能是在v 13中引入的。移動設備的“設置”中有一個選項，因此用戶可以選擇深色主題 - 這將為系統以及所有正在運行的應用程序設置深色調色板，通常用戶希望所有應用程序都尊重其系統偏好。

Android上的暗黑主題支持

自Android 10（API級別29）起，在Android上可以使用將深色主題應用于整個設備的功能。 較舊的Android版本無法選擇在亮/暗模式之間切換，但是您可以在應用級別上添加此類切換。 與iOS相反，當您在Android中設置暗模式時，將重新加載當前正在運行的應用程序以應用新外觀。

為了在Android上的應用程序中支持Dark主題，您需要采取另外的步驟。 您必須將應用程序的主題設置為繼承自DayNight主題，然后轉到位于Android項目中的Resources / values / styles.xml文件，然后將應用程序的主題設置如下：

<style name="MainTheme" parent="Theme.AppCompat.DayNight">

為了更好地說明Telerik Xamarin控件響應淺色/深色主題更改的能力，我將使用下面的快速示例。 簡而言之，這是一個簡單的預訂表格，其中使用了我們的一些組件，即DatePicker、NumericInput、AutoCompleteView和Button：

<Grid BackgroundColor="{AppThemeBinding Light=White, Dark=Black}">
<StackLayout Margin="16, 40, 16, 0">
<Label Text="Welcome back, Joe" 
TextColor="#B73562"
FontSize="20"
Margin="0,0,0,24" />
<Label Text="Schedule a Trip:"
TextColor="{AppThemeBinding Light=Black, Dark=Default}"
FontSize="15"
FontAttributes="Bold"
Margin="0, 0, 0, 21" />
<Label Text="When do you want your vacation to start?" TextColor="{AppThemeBinding Light=Black, Dark=Default}" Margin="0,6" />
<telerikInput:RadDatePicker x:Name="FromDate"
MinimumDate="{Binding MinDate}"
MaximumDate="{Binding MaxDate}"
Date="{Binding StartDate}"
Placeholder="Select a date"
Margin="0,10"/>
<Label Text="How long do you plan your vacation to be?" TextColor="{AppThemeBinding Light=Black, Dark=Default}" Margin="0,6" />
<StackLayout Orientation="Horizontal" HeightRequest="25" Margin="0,10">
<telerikInput:RadNumericInput x:Name="daysNumber" WidthRequest="200" />
<Label Text="days" TextColor="{AppThemeBinding Light=Black, Dark=Default}" />
</StackLayout>
<Label Text="Where would you like to travel?" TextColor="{AppThemeBinding Light=Black, Dark=Default}" Margin="0,6" />
<telerikInput:RadAutoCompleteView Watermark="Choose a destination"
ItemsSource="{Binding Destinations}" 
Margin="0,10" />
<telerikInput:RadButton Text="Search"
CornerRadius="20"
Padding="10,5,10,5"
BorderColor="#B73562"
BorderWidth="1"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
WidthRequest="200"
HeightRequest="40"
TextColor="#B73562"
FontSize="15"
BackgroundColor="Transparent" />
</StackLayout>
</Grid>

在示例中，為Xamarin使用了AppThemeBinding。Forms標簽為TextColor和Grid BackgroundColor，因此它們將根據Dark / Light主題更改進行更新。

這是使用常規系統外觀（不切換為暗模式）在Android和iOS上得到的結果：

如果應用程序用戶更喜歡深色模式的外觀，則相同的預訂表單將切換為深色調色板，而無需您付出任何額外的努力：