Trying to implement DarkMode with adjusted colors

I have successfully integrated syncfusion darkmode theme to my exisitng darkmode by merging the dictionary
<ResourceDictionary.MergedDictionaries>
        <!-- Theme resource dictionary -->
        <syncTheme:DarkTheme/>
        <!-- Control style resource dictionaries -->
    </ResourceDictionary.MergedDictionaries>
<syncTheme:SyncfusionThemeDictionary>
        <syncTheme:SyncfusionThemeDictionary.MergedDictionaries>
            <ResourceDictionary>
                <x:String x:Key="SfDataFormTheme">CommonTheme</x:String>
                <Color x:Key="SfDataFormEditorTextColor">#8CBDDB</Color>
                <Color x:Key="SfDataFormLabelTextColor">#8CBDDB</Color>
            </ResourceDictionary>
        </syncTheme:SyncfusionThemeDictionary.MergedDictionaries>
    </syncTheme:SyncfusionThemeDictionary>
But now I'm trying to overwrite specific colors on the dataform and I tried the docuemnted approach but it doesn't work

What am I missing? unfortunately the description is not very conclusive in this regard.


17 Replies 1 reply marked as answer

SS SaiGanesh Sakthivel Syncfusion Team November 23, 2020 12:25 PM UTC

Hi Michael, 
 
Thank you for using syncfusion support. 
 
#Regarding implement darkmode with adjusted colors 
We would like to inform you that you can achieve your requirement by setting the SyncfusionThemeDictionary in the App.xml page. Please refer to the code snippet for your reference. 
 
Code Snippet 
<Application.Resources> 
    <syncTheme:SyncfusionThemeDictionary> 
        <syncTheme:SyncfusionThemeDictionary.MergedDictionaries> 
            <syncTheme:DarkTheme /> 
            <ResourceDictionary> 
                <Color x:Key="SfDataFormEditorTextColor">#8CBDDB</Color> 
                <Color x:Key="SfDataFormLabelTextColor">#8CBDDB</Color> 
            </ResourceDictionary> 
        </syncTheme:SyncfusionThemeDictionary.MergedDictionaries> 
    </syncTheme:SyncfusionThemeDictionary> 
</Application.Resources> 
 
Please refer to the demo sample in the following link for your reference. 
 
We hope this helps. 
 
Regards,
SaiGanesh Sakthivel



MI Michael November 23, 2020 12:59 PM UTC

Thanks for the reply, but this does not work in my scenario. 
In the App.xaml I have a resource dictionary with a merged dictionary for light or darkmode

the merged dictionary is toggled through code by removing light and adding then adding the dark. 

So I can't just use your example resource. 
mergedDictionaries.Clear();

                switch (AppTheme)
                {
                    case Theme.Dark:
                        mergedDictionaries.Add(new DarkTheme());
                        mergedDictionaries.Add(new Syncfusion.XForms.Themes.DarkTheme());
                        break;
                    case Theme.Light:
                    default:
                        mergedDictionaries.Add(new LightTheme());
                        mergedDictionaries.Add(new Syncfusion.XForms.Themes.LightTheme());
                        break;
                }

So now I just need to find a way to define my dynamic Colors for the syncfusion controls


SS SaiGanesh Sakthivel Syncfusion Team November 24, 2020 12:20 PM UTC

Hi Michael, 
 
Thank you for the update. 
 
#Regarding implement darkmode with adjusted colors 
We would like to inform you that you can achieved your requirement by removing old resource value and add the new resource key value to the ResourceDictionary. Please refer to the following code snippet for your reference. 
 
Code snippet 
private void Click_Clicked(object sender, EventArgs e) 
{ 
    ResourceDictionary resources =Application.Current.Resources; 
    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()); 
        resources.Remove("SfDataFormEditorTextColor"); 
        resources.Add("SfDataFormEditorTextColor",Color.Red); 
        resources.Remove("SfDataFormLabelTextColor"); 
        resources.Add("SfDataFormLabelTextColor", Color.Red); 
    } 
    else 
    { 
        mergedDictionaries.Remove(lightTheme); 
        mergedDictionaries.Add(new DarkTheme()); 
        resources.Remove("SfDataFormEditorTextColor"); 
        resources.Add("SfDataFormEditorTextColor", Color.Yellow); 
        resources.Remove("SfDataFormLabelTextColor"); 
        resources.Add("SfDataFormLabelTextColor", Color.Yellow); 
    } 
} 
 
Please refer to the tested sample in the following link for your reference. 
 
 
We hope this helps. 
 
Regards,
SaiGanesh Sakthivel



MI Michael December 12, 2020 03:08 AM UTC

Thank you for the response. 
Even though it was incorrect, as the keys have to be removed from the corresponding light or darktheme
I was able to resolve it and I leave it here for anyone else struggling with this.

switch (AppTheme)
                {
                    case Theme.Dark:
                        mergedDictionaries.Add(new DarkTheme());
                        var syncTheme = new Syncfusion.XForms.Themes.DarkTheme();
                        success = resources.TryGetValue("TextPrimaryColor", out textPrimaryColor);
                        if (success)
                        {
                            syncTheme.Remove("SfDataFormEditorTextColor");
                            syncTheme.Add("SfDataFormEditorTextColor", textPrimaryColor);
                            syncTheme.Remove("SfDataFormLabelTextColor");
                            syncTheme.Add("SfDataFormLabelTextColor", textPrimaryColor);
                        }
                        mergedDictionaries.Add(syncTheme);
                        break;
                    case Theme.Light:
                    default:
                        mergedDictionaries.Add(new LightTheme());
                        var syncLightTheme = new Syncfusion.XForms.Themes.LightTheme();
                        success = resources.TryGetValue("TextPrimaryColor", out textPrimaryColor);
                        if (success)
                        {
                            syncLightTheme.Remove("SfDataFormEditorTextColor");
                            syncLightTheme.Add("SfDataFormEditorTextColor", textPrimaryColor);
                            syncLightTheme.Remove("SfDataFormLabelTextColor");
                            syncLightTheme.Add("SfDataFormLabelTextColor", textPrimaryColor);
                        }
                        mergedDictionaries.Add(syncLightTheme);
                        break;
                }


MI Michael December 12, 2020 04:17 AM UTC

After further investigation, the following Items don't seem to work

SfDataFormLabelDisabledTextColor
SfDataFormEditorDisabledTextColor
SfDataFormEditorPlaceholderColor
SfPickerUnselectedItemTextColor
SfPickerColumnHeaderTextColor
SfChartAxisTitleTextColor
SfChartAnnotationAxisLabelTextColor
SfChartLegendTitleTextColor

especially problematic is, that the standard dark theme doesn't seem to work properly here either, as it shows mainly dark text...



SS SaiGanesh Sakthivel Syncfusion Team December 15, 2020 04:01 AM UTC

Hi Michael, 
 
Thank you for the update. 
 
#Regarding SfPicker query
We have analyzed the reported issue in SfPicker. We have prepared a sample based on the information provided. We have checked SfPickerUnselectedItemTextColor and SfPickerColumnHeaderTextColor keys in both dark and light themes. We have tried to replicate the reported issue at our end, we are afraid that we are not able to reproduce the issue at our end. We have attached sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfPicker_Theme-200097611

 
#Regarding SfChart query 
Currently, we are validating the reported query and we will update the further details on December 15,2020. We appreciate your patience until then. 
 
#Regarding SfDataForm query 
Currently, we are validating the reported query and we will update the further details on or before the December 16,2020. We appreciate your patience until then. 
 
Regards, 
SaiGanesh Sakthivel 



SS SaiGanesh Sakthivel Syncfusion Team December 17, 2020 03:20 AM UTC

Hi Michael,  
 
Sorry for the inconvenience Caused. 
 
#Regarding SfDataForm query  
We regret to inform you that we have forward your query to our development team after analysis with them. We will update the further detail on December 18, 2020. We appreciate your patience until then.  
 
Regards, 
SaiGanesh Sakthivel 



SS SaiGanesh Sakthivel Syncfusion Team December 17, 2020 01:32 PM UTC

Hi Michael, 
 
Thank you for the patience. 
 
#Regarding SfChart query 
We have checked the reported query in dark and light themes. SfChartAnnotationAxisLabelTextColor key only not working in UWP platform. otherwise, the remaining keys are working fine on all platforms.  
 
Keys 

                               Platforms
 
Android  
iOS 
UWP 
SfChartAxisTitleTextColor 
Working 
Working 
Working 
SfChartLegendTitleTextColor  
Working 
Working 
Working 
SfChartAnnotationAxisLabelTextColor 
Working 
Working 
Not working 
 
We confirm this as a bug and logged a defect report. You can keep track of the bug from the feedback portal below.

Link: https://www.syncfusion.com/feedback/20710
 

The provided feedback link is private, and you need to login to view this feedback.

The fix for the reported issue will be available on 29th December 2020.

If you have any more specifications/precise replication procedures or a scenario to be tested, you can add it as a comment in the portal.

Regards,
SaiGanesh Sakthivel
 



SS SaiGanesh Sakthivel Syncfusion Team December 18, 2020 01:14 PM UTC

Hi Michael, 
 
Thank you for the Patience.

#Regarding SfDataFormEditorPlaceholderColor
 
We would like to inform you that you can achieve your requirement by using key SfDataFormEditorPlaceholderColor and SfTextInputLayoutHelperTextColor for default layout and TextInputLayout in SfDataForm. Please refer to the following code snippet for your reference. 
 
Code Snippet 
private void Click_Clicked(object sender, EventArgs e)
{
ResourceDictionary resources = Application.Current.Resources;
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);
lightTheme = new LightTheme();
mergedDictionaries.Add(lightTheme);
lightTheme["SfDataFormEditorPlaceholderColor"] = Color.Red;
lightTheme["SfTextInputLayoutHelperTextColor"] = Color.Red;
}
else if (lightTheme != null)
{
mergedDictionaries.Remove(lightTheme);
darkTheme = new DarkTheme();
mergedDictionaries.Add(darkTheme);
darkTheme["SfDataFormEditorPlaceholderColor"] = Color.Green;
darkTheme["SfTextInputLayoutHelperTextColor"] = Color.Green;

}
}
 
 
#Regarding SfDataFormLabelDisabledTextColor and SfDataFormEditorDisabledTextColor is not working 
We would like to inform you that we have logged issue report for the same. We will fix the issue and include the issue fix in our upcoming Weekly Nuget release which is expected to roll out on January 12, 2021. We appreciate your patience until then. 
 
You can track the status of this report through the following feedback link, 
 
Note: The provided feedback link is private, you need to login to view this feedback. 
 
Regards, 
SaiGanesh Sakthivel 



HM Hemalatha Marikumar Syncfusion Team December 30, 2020 07:42 AM UTC

Hi Michael, 
 
We are glad to announce that our weekly NuGet was rolled out and fix for the reported issue  [UWP] Annotation axis label text color key is not working while dynamically change the theme” was included in the weekly NuGet. 
 
NuGet Version: 18.4.0.32 
 
Regards,
Hemalatha M. 



SS SaiGanesh Sakthivel Syncfusion Team January 12, 2021 01:15 PM UTC

Hi Michael,    
 
Sorry for the inconvenience caused. 
 
#Regarding SfDataFormLabelDisabledTextColor and SfDataFormEditorDisabledTextColor is not working  
We regret to inform you that due to the complexity in fixing the issue, we could not include the fix in our weekly nuget release as promised. We will fix the reported issue and include it in our upcoming Volume 4 SP release which is expected to roll out at the end of January 2021 
  
We will let you once release rolled out.   
  
Regards,    
SaiGanesh Sakthivel


SS SaiGanesh Sakthivel Syncfusion Team January 29, 2021 09:36 AM UTC

Hi Michael,     
  
Sorry for the inconvenience caused.  
  
#Regarding SfDataFormLabelDisabledTextColor and is not working   
We deeply regret to let you know that we have fixed the reported issue but it takes more time for testing is longer than we expected. Also due to the stability of the control, we are not including this in our 2020 Volume 4 SP release. But assuredly, we will include it in our upcoming weekly nuget February 2, 2021. We will let you once nuget gets published and appreciate your patience until then. 
 
#Regarding SfDataFormEditorDisabledTextColor is not working  
We have already logged an issue report for the same with Xamarin, kindly refer the following link for the same, 
 
 
We are having following the reported bug, once we got the solution from the Xamarin team, we will update you the further details. We appreciate your patience until then.   
 
Regards, 
SaiGanesh Sakthivel 



SS SaiGanesh Sakthivel Syncfusion Team February 2, 2021 11:50 AM UTC

Hi Michael, 
 
Thank you for your patience. 
 
We have checked the mentioned issue “SfDataFormLabelDisabledTextColor and is not working” and fixed the issue. We have prepared patch including the fix. Before installing the patch, kindly remove bin and obj folders from all the projects of solution and clear NuGet cache. 
 
Please refer our following KB document to clear nuget cache. 
    
 
 
 
Installation Direction:       
{Syncfusion Installed location}\Essential Studio\18.4.0.39\Xamarin\lib\netstandard\Syncfusion.SfDataForm.XForms.dll             
{Syncfusion Installed location}\Essential Studio\18.4.0.39\Xamarin\lib\android\Syncfusion. SfDataForm.XForms.Android.dll             
{Syncfusion Installed location}\Essential Studio\18.4.0.39\Xamarin\lib\ios\Syncfusion. SfDataForm.XForms.iOS.dll             
{Syncfusion Installed location}\Essential Studio\18.4.0.39\Xamarin\lib\uwp\Syncfusion. SfDataForm.XForms.UWP.dll 
 
Disclaimer:     
Please note that we have created this patch for version 18.4.0.39 specifically to include the issue. 
We will include the issue fix in our upcoming Weekly NuGet release. We appreciate your patience until then.   
 
Regards,    
SaiGanesh Sakthivel   



MI Michael February 2, 2021 02:09 PM UTC

Thanks for creating the patch, but I can wait one more week for the weekly nuget. Thanks for solving the issue. 


SS SaiGanesh Sakthivel Syncfusion Team February 3, 2021 09:33 AM UTC

Hi Michael, 
 
Thank you for the update. 
 
We will let you once the release is rolled out and appreciate your patience until then. 
 
Regards, 
SaiGanesh Sakthivel 



SS SaiGanesh Sakthivel Syncfusion Team February 9, 2021 02:06 PM UTC

Hi Michael,      
   
Sorry for the inconvenience caused.   
 
#Regarding SfDataFormLabelDisabledTextColor is not working    
We deeply regret to let you know that we are not including this in our weekly nuget release. But assuredly, we will include it in our 2021 Volume 1 release which is expected to roll out in the end of March, 2021. We will let you once nuget gets published and appreciate your patience until then. 
 
Regards, 
SaiGanesh Sakthivel 



MS Muniappan Subramanian Syncfusion Team April 1, 2021 08:35 AM UTC

Hi Michael,  
 
We are glad to announce that our Essential Studio 2021 Volume 1 Release v19.1.0.54 is rolled out and is available for download under the following link. 
 
 
The mentioned issue with” SfDataFormLabelDisabledTextColor is not working” Issue has been fixed and included in this release. 
 
  
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
 
Regards, 
Muniappan S 


Marked as answer
Loader.
Up arrow icon