Theme Documentation

[Dean Martin]

Hi,

In the announcement for Essential Studio 2018 Volume 4 you mentioned theme support:

....any idea where I can find documentation on implementing this?

Thanks,

Dean

[Divya Venkatesan]

Hi Dean, 

  

We are in progress of updating the documentation for theming support and it will be updated online before the end of January 2019. However, you can follow the below steps to apply theme for the Syncfusion controls. 

  

You can apply the predefined common theme for all the Syncfusion controls using SyncfusionThemeDictionary by creating the instance for SyncfusionThemeDictionary and merge the common theme resources as in the following code snippet. 

  

Code snippet for common theme: 

  

<Application.Resources> 

    <syncTheme:SyncfusionThemeDictionary> 

        <syncTheme:SyncfusionThemeDictionary.MergedDictionaries> 

            <syncTheme:LightTheme /> 

        </syncTheme:SyncfusionThemeDictionary.MergedDictionaries> 

    </syncTheme:SyncfusionThemeDictionary> 

</Application.Resources> 

  

You can also override the values for the predefined keys as needed after merging the common theme resources as shown below. 

  

<Application.Resources> 

    <syncTheme:SyncfusionThemeDictionary> 

        <syncTheme:SyncfusionThemeDictionary.MergedDictionaries> 

            <syncTheme:LightTheme /> 

                <ResourceDictionary> 

                    <Color x:Key="SyncPrimaryColor">Green</Color> 

                    <Color x:Key="SyncErrorColor">#FF9000</Color> 

                    <Color x:Key="SfTextInputLayoutHintColor">Maroon</Color> 

                </ResourceDictionary> 

            </syncTheme:SyncfusionThemeDictionary.MergedDictionaries> 

    </syncTheme:SyncfusionThemeDictionary> 

</Application.Resources> 

  

Please find the list of available keys in the attached file which can be used to override the default values. 

  

LightTheme file: https://www.syncfusion.com/downloads/support/forum/141776/ze/LightTheme1135409146  

  

It contains common keys such as SyncPrimaryColor, SyncPrimaryLightColor, SyncPrimaryDarkColor, SyncPrimaryForegroundColor, SyncPrimaryLightForegroundColor, SyncPrimaryDarkForegroundColor, SyncSuccessColor, SyncErrorColor, SyncWarningColor and SyncInfoColor for all Syncfusion UI controls which are mapped to specific UI element of the controls. Other than these items, there are other keys specific to every control like SfTextInputLayoutHintColor for SfTextInputLayout. You can use these keys to override the default values. 

  

We have prepared a sample with SfTextInputLayout by overriding primary color and error color and hint color of SfTextInputLayout. Please download the sample from the following link. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/141776/ze/ThemeSample1359105211  

  

Screenshot: 

  

Regards, 

Divya Venkatesan 

 

[Michael Prabhu M]

Hi Urs Geser,

It was a known Xamarin.Forms framework issue in v2.4.0. To know more about it refer the below link, 

Bugzilla link: https://bugzilla.xamarin.com/show_bug.cgi?id=60788

It can be resolved by upgrading the Xamarin.Forms package to v3.1 or latest.

Please get back to us if you need any other assistance from us. 

Regards, 

Michael

 

[Urs Geser]

Hi, 

This doesn't work with Xamarin Forms V2.5.1.527436.

An exception occurred: 

System.ArgumentException: 'A resource with the key 'SyncPrimaryColor' is already present in the ResourceDictionary.'

Thanks

Urs