Dark Mode Support

[George]

Hi,

I am trying to implement the Dark Mode functionality in my project(Android and iOS).

Is there a way to apply a dark theme to the scheduler when user turns on Dark Mode ?

Thank you

[SaiGanesh Sakthivel]

Hi George, 

 

Thank you for contacting Syncfusion support. 

 

We have checked the reported query “Dark Mode Support” from our end. We would like to inform you that you can achieved your requirement by setting Syncfusion dark themes in the Application resources. Please refer to the following code snippet. 

 

Code snippet 

<Application.Resources> 

        <syncTheme:SyncfusionThemeDictionary> 

            <syncTheme:SyncfusionThemeDictionary.MergedDictionaries> 

                <syncTheme:DarkTheme /> 

            </syncTheme:SyncfusionThemeDictionary.MergedDictionaries> 

        </syncTheme:SyncfusionThemeDictionary> 

</Application.Resources> 

 

Please refer to the tested sample in the following link 

Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScheduleXamarin-582276977 

 

Please refer to the following UG Documentation. 

Link: https://help.syncfusion.com/xamarin/themes/themes 

 

We hope this helps. Please let us know if you need any further assistance. 

 

Regards, 

SaiGanesh Sakthvel

[George]

Thank you for your answer,but this is the half solution to my problem.

As i wrote i am trying to implement the Dark Mode functionality in my project(Android and iOS).

That means that the theme has to switch from light mode to dark when the user is changing from light mode to Dark.

Now i am using in app.xaml code like

<OnAppTheme x:Key="LogOutIcon"

                    x:TypeArguments="FileImageSource"

                    Light="ic_logout_light.png"

                    Dark="ic_logout_dark.png" />

 <Style x:Key="SearchBarStyle"

               TargetType="SearchBar">

            <Setter Property="TextColor"

                    Value ="{DynamicResource PrimaryTextColor}"  />

            <Setter Property="BackgroundColor"

                    Value ="{DynamicResource SearchBarBackgroundColor}"  />

        </Style>

and use these resources as needed. like  "IconImageSource="{DynamicResource LogOutIcon}""

or

Style="{DynamicResource SearchBarStyle}"

So, How can i switch themes upon user light or dark mode selection ?

Thank you for your effort

[SaiGanesh Sakthivel]

Hi George, 

 

Thank you for the update. 

 

We have checked the reported query “Dark Mode Support” from our end. We would like to inform you that you can achieved your requirement of changing themes at run time by removing the ark themes and add the light themes with of button clicked. Please refer to the following code snippet for your reference. 

 

Code Snippet 

private void Theme_Clicked(object sender, EventArgs e) 

{ 

    ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries; 

    var darkTheme = mergedDictionaries.OfType<DarkTheme>().FirstOrDefault(); 

    var lightTheme = mergedDictionaries.OfType<LightTheme>().FirstOrDefault(); 

    if(darkTheme != null) 

    { 

        mergedDictionaries.Remove(darkTheme); 

        mergedDictionaries.Add(new LightTheme()); 

    } 

    else 

    { 

        mergedDictionaries.Remove(lightTheme); 

        mergedDictionaries.Add(new DarkTheme()); 

    } 

} 

 

 

We have prepared the sample as per your requirement and attached in the following link for your reference. 

Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SCHEDU~1968224958 

 

We hope this helps. Please let us know if you need any further assistance. 

 

Regards, 

SaiGanesh Sakthvel

[George]

Thank you for your answer.

Maybe i was not clear enough.

As of latest android and iOS user can switch from light mode to dark mode on their devices.

I need to switch the scheduler theme according to user selection of dark mode or light mode on their device.

Please see previous message.

Also please take a look at https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/theming/system-theme-changes

Thank you

George

[SaiGanesh Sakthivel]

Hi Geroge, 

 

Thank you for the update. 

 

#Regarding change the theme of the SfSchedule according to the system theme  

We would like to inform you that you can achieved your requirement by using RequestTheme property in the Application class to obtain the system themes and change the schedule theme at runtime. Please refer to the following code snippet how to change the themes at a runtime. 

 

Code snippet 

public partial class App : Application 

{ 

    public App() 

    { 

        InitializeComponent(); 

        ICollection<ResourceDictionary> mergedDictionaries = Resources.MergedDictionaries; 

        var darkTheme = mergedDictionaries.OfType<DarkTheme>().FirstOrDefault(); 

        var lightTheme = mergedDictionaries.OfType<LightTheme>().FirstOrDefault(); 

        OSAppTheme currentTheme = RequestedTheme; 

        if (currentTheme == OSAppTheme.Light) 

        { 

            mergedDictionaries.Remove(darkTheme); 

            mergedDictionaries.Add(new LightTheme()); 

        } 

        else 

        { 

            mergedDictionaries.Remove(lightTheme); 

            mergedDictionaries.Add(new DarkTheme()); 

        } 

        MainPage = new MainPage(); 

    } 

} 

 

Please refer to the sample in the following link 

Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScheduleXamarin690897907 

 

We hope this helps. 

 

Regards, 

SaiGanesh Sakthivel

[George]

Hi,

I applied this solution on my app but i am stucked.

Do you have any idea why its working on android emulator

but not on real devices ?

[SaiGanesh Sakthivel]

Hi Geroge,  

  

Thank you for the update.  

  

#Regarding change the theme of the SfSchedule according to the system theme   

We would like to inform you that the following requirements must be meet for Xamarin.Forms to respond to a system theme change: 

·       Xamarin.Forms 4.6.0.967 or greater. 

·       iOS 13 or greater. 

·       Android 10 (API 29) or greater. 

·       UWP build 14393 or greater. 

 

We have tested the sample in Android 10 device and attached the tested sample video in the following link. 

 

Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Theme-413379351 

 

We hope this helps. 

 

Regards, 

SaiGanesh Sakthivel

[Harsh Shah]

Hi, refer this  articles may this helps you to implement Dark mode.

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/theming/system-theme-changes

https://www.sharpnado.com/dark-light-mode/.

Hope it will help you. 

[SaiGanesh Sakthivel]

Hi George,  

  

Thank you for the update.  

  

We are glad to know that you have achieved your requirement. Please let us know if you need any further assistance.  

  

Regards,  

SaiGanesh Sakthivel