1. Home
  2. Forum
  3. Xamarin.Forms
  4. Dark Mode Support

Dark Mode Support

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

9 Replies 1 reply marked as answer
SS SaiGanesh Sakthivel Syncfusion Team June 2, 2020 03:08 PM UTC

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 
 
Please refer to the following UG Documentation. 
 
We hope this helps. Please let us know if you need any further assistance. 
 
Regards, 
SaiGanesh Sakthvel

GE George June 3, 2020 05:05 PM UTC

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

SS SaiGanesh Sakthivel Syncfusion Team June 4, 2020 02:35 PM UTC

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. 
 
We hope this helps. Please let us know if you need any further assistance. 
 
Regards, 
SaiGanesh Sakthvel

GE George June 4, 2020 07:14 PM UTC

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

SS SaiGanesh Sakthivel Syncfusion Team June 5, 2020 03:21 PM UTC

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 
 
We hope this helps. 
 
Regards, 
SaiGanesh Sakthivel

Marked as answer
GE George June 18, 2020 08:04 PM UTC

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 ?

SS SaiGanesh Sakthivel Syncfusion Team June 19, 2020 06:26 AM UTC

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. 
 
 
We hope this helps. 
 
Regards, 
SaiGanesh Sakthivel

HS Harsh Shah September 14, 2020 04:35 AM UTC

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

Hope it will help you. 

SS SaiGanesh Sakthivel Syncfusion Team September 15, 2020 09:57 AM UTC

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

Loader.
Up arrow icon