question

JassimAlRahma-9056 avatar image
0 Votes"
JassimAlRahma-9056 asked JarvanZhang-MSFT edited

Set Color based on Theme in Codebehind

Hi,

I have below code to set the Source of bookmarkImage.Source.

 bookmarkImage.Source = new FontImageSource() { FontFamily = "FontSolid", Glyph = Application.Current.Resources["IconBookmark"].ToString(), Color = Color.FromHex(Application.Current.Resources["IconBookmarkedLightColor"].ToString()) };


How can I set the color based on the App Theme? In the above example the color is set this way:

 Color = Color.FromHex(Application.Current.Resources["IconBookmarkedLightColor"].ToString())

I want if the App is on Light theme then it should use IconBookmarkedLightColor and if it's on Dark theme then IconBookmarkedDarkColor


Thanks,
Jassim

dotnet-csharpdotnet-xamarin
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Can you explain with image?

0 Votes 0 ·

What do you mean?

my image is like this:

 <Image Grid.Column="3" ClassId="BK" VerticalOptions="Center" Margin="20,0,0,0">
 <Image.Source>
     <FontImageSource FontFamily="FontRegular" Glyph="{StaticResource IconBookmark}" Color="LightGray" />
 </Image.Source>
 <Image.GestureRecognizers>
     <TapGestureRecognizer Tapped="BookmarkPostTapGestureRecognizer_Tapped" />
 </Image.GestureRecognizers>
 <Image.Triggers>
     <DataTrigger TargetType="Image" Binding="{Binding zeera_post_bookmarked}" Value="1">
         <Setter Property="Source">
         <Setter.Value>
             <FontImageSource FontFamily="FontSolid" Glyph="{StaticResource IconBookmark}" Color="{AppThemeBinding Dark={StaticResource FontIconDark}, Light={StaticResource FontIconLight}}" />
         </Setter.Value>
         </Setter>
     </DataTrigger>
 </Image.Triggers>
 </Image>


and the above C# code is inside the BookmarkPostTapGestureRecognizer_Tapped


0 Votes 0 ·

1 Answer

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT edited

Hello @JassimAlRahma-9056 ,​

Welcome to our Microsoft Q&A platform!

If your project meets the following requirements, try using AppThemeBinding 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.

<BoxView HeightRequest="150" BackgroundColor="{AppThemeBinding Light={StaticResource LightPrimaryColor},Dark={StaticResource LightSecondaryColor}}"/>


If you plan the project also work on the previous build versions, try creating two theme xaml and load the corresponding theme by detecting the device theme. Here is sample code, you could refer to it.

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage = new NavigationPage(new MainPage());

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

        if (mergedDictionaries != null)
        {
            mergedDictionaries.Clear();

            switch (current_theme)
            {
                case OSAppTheme.Dark:
                    mergedDictionaries.Add(new DarkTheme());
                    break;
                case OSAppTheme.Light:
                default:
                    mergedDictionaries.Add(new LightTheme());
                    break;
            }
        }
    }
}


Here are the related docs, you could refer to:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/theming/system-theme-changes#react-to-theme-changes
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/theming/theming#load-a-theme-at-runtime

Best Regards,

Jarvan Zhang


If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hello @JassimAlRahma-9056
May I know if you have got any chance to check my answer? I am glad to help if you have any other questions.

0 Votes 0 ·