RadDatePicker not preventing the dark mode from applying, even for android the dark theme is restricted from app mainactivity - MAUI.

1 Answer 102 Views
DatePicker
Mohammed Rameez
Top achievements
Rank 1
Iron
Mohammed Rameez asked on 02 Aug 2023, 03:31 PM

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

Sort by
0
Maria
Telerik team
answered on 04 Aug 2023, 11:23 AM

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

A brand new .NET MAUI course was just added to the Virtual Classroom. The training course is developed to help you get started with the Telerik UI for .NET MAUI components and features. It aims to put you in the shoes of an engineer who adds new features to an existing application. You can check it out at https://learn.telerik.com
Mohammed Rameez
Top achievements
Rank 1
Iron
commented on 07 Aug 2023, 05:11 AM

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:

Maria
Telerik team
commented on 08 Aug 2023, 01:20 PM

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}"/>
Mohammed Rameez
Top achievements
Rank 1
Iron
commented on 10 Aug 2023, 10:41 AM

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:

Maria
Telerik team
commented on 11 Aug 2023, 12:20 PM

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.

Tags
DatePicker
Asked by
Mohammed Rameez
Top achievements
Rank 1
Iron
Answers by
Maria
Telerik team
Share this question
or