Rank 1
Iron
Hi Telerik,
In MAUI android app I am restricting the dark theme on my app from getting applied, for all the controls except for the RadDatePicker it works fine.
NOTE:
The RadDatePicker is not restricting the dark theme from getting applied in MAUI.
Whereas in Xamarin it works fine.
Below is the screen shot how it looks:
Xamarin:
MAUI:
Thanks,
Mohammed Rameez Raza.
1 Answer, 1 is accepted
Hello Mohammed,
Thank you for the images and the provided explanation.
Currently, Telerik UI for .NET MAUI does not support a dark theme. There is logged feature request about this in our public feedback portal. Here is the link to the item: Dark Mode Support. You can vote for the implementation of the feature and subscribe to the item in order to track its progress and get notified by email for any status changes.
As a solution, I could suggest applying the BackgroundColor property to the Popup of the DatePicker control:
Here is a code snippet of how to achieve the desired result:
<telerik:RadDatePicker PickerMode="Popup"
SpinnerFormat="yyy/MMM/dd"
DisplayStringFormat="yyyy/MMM/dd"
AutomationId="datePicker">
<telerik:RadDatePicker.PopupSettings>
<telerik:PickerPopupSettings PopupOutsideBackgroundColor="#D9D9D9CC"
PopupViewStyle="{StaticResource popupViewStyle}"
HeaderStyle="{StaticResource headerStyle}"
HeaderLabelText="Date Picker"
HeaderLabelStyle="{StaticResource headerLabelStyle}"
FooterStyle="{StaticResource footerStyle}"
AcceptButtonStyle="{StaticResource acceptButtonStyle}"
CancelButtonStyle="{StaticResource cancelButtonStyle}"
AcceptButtonText="{StaticResource acceptButtonText}"
CancelButtonText="{StaticResource cancelButtonText}"/>
</telerik:RadDatePicker.PopupSettings>
</telerik:RadDatePicker>And the definition of the explicit style in XAML:
<Style TargetType="telerik:PickerPopupContentView" x:Key="popupViewStyle">
<Setter Property="BackgroundColor" Value="White"/>
<Setter Property="WidthRequest" Value="270"/>
</Style>I hope this helps. Do not hesitate to write back if you have any additional questions.
Regards,
Maria
Progress Telerik
Rank 1
Iron
Hi Maria,
Thanks for the reply.
I had tried this approach, it changes the background color to white but the texts are in white as well, how to change the text color.
Looks like below:
Hello Mohammed,
To change the text color of the text in the dropdown you need to apply the TextColor property to the Spinner of the DatePicker control. You can refer to our documentation article for additional information: How to use the styling properties of the DatePicker. Here is a code snippet how to achieve the desired result:
<Style TargetType="telerik:RadSpinner" x:Key="spinnerStyle">
<Setter Property="ItemStyle">
<Setter.Value>
<Style TargetType="telerik:SpinnerItemView">
<Setter Property="TextColor" Value="Red"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="SelectedItemStyle">
<Setter.Value>
<Style TargetType="telerik:SpinnerItemView">
<Setter Property="TextColor" Value="Red"/>
<Setter Property="FontAttributes" Value="Bold"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="HeightRequest" Value="240"/>
</Style>
<telerik:RadDatePicker BorderColor="#8660C5"
SpinnerHeaderStyle="{StaticResource spinnerHeaderStyle}"
SpinnerStyle="{StaticResource spinnerStyle}"/>
Rank 1
Iron
Hi Maria,
Thanks for the reply.
The above style you provided that really works to much extend, still unable to achieve exactly like in Light mode.
Requirement:
1. How to make the Month, Date & Yea labels in black.
2. The lines (Above the Cancel & Ok buttons) and the border across the popup have Black lines, how to make it in gray.
Below is the screenshot:
Hello Mohammed,
I am going straight to the questions.
1. To make Month, Date & Yea labels in black you need to set the explicit style for the SpinnerHeaderStyle of the DatePicker control. Here is a code snippet on how to achieve the desired result:
<telerik:RaDatePicker BorderColor="#8660C5"
SpinnerHeaderStyle="{StaticResource spinnerHeaderStyle}"/> <Style TargetType="Label" x:Key="spinnerHeaderStyle">
<Setter Property="TextColor" Value="Black"/>
<Setter Property="FontAttributes" Value="Bold"/>
<Setter Property="HorizontalOptions" Value="FillAndExpand"/>
<Setter Property="VerticalOptions" Value="FillAndExpand"/>
<Setter Property="HorizontalTextAlignment" Value="Center"/>
<Setter Property="VerticalTextAlignment" Value="Center"/>
</Style>
2. To make the border across the popup in Gray color. You need to set the SelectionHighlightStyle of the DatePicker control. Here is a code snippet on how to achieve the desired result:
<telerik:RadDatePicker BorderColor="#8660C5"
SpinnerHeaderStyle="{StaticResource spinnerHeaderStyle}"
SpinnerStyle="{StaticResource spinnerStyle}"
SelectionHighlightStyle="{StaticResource selectionHighlightStyle}" <Style TargetType="telerik:RadBorder" x:Key="selectionHighlightStyle">
<Setter Property="BorderColor" Value="Gray"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="BackgroundColor" Value="Transparent" />
</Style>I hope this helps you to achieve the desired result.
Let me know if I can assist you further.