Xamarin Themes Switch dark and light

Question

I updated to Xamarin.Forms and Xamarin.Forms.Pages V2.3.5.233-pre1 and my dynamic theme changes quit working on current screen. Previously it would change the screen I'm on when I change it and any open screen. Now it seems to require me to close any open screen and reopen it. I'm not sure how to refresh the screens, as that's really not a desired option.

Here is how I change the themes. Any advice would be helpful. If I go back to previous version, it works fine, but then I lose new features I needed.

I'm just using the dark and light themes given I have a simple picker to select them.

    <StackLayout Orientation="Horizontal" >
    <Label Text="Theme"  HorizontalOptions="Start" VerticalOptions="Center" />
    <Picker SelectedIndex="{Binding Theme,Mode=TwoWay}" HorizontalOptions="EndAndExpand" VerticalOptions="Center">
        <Picker.Items>
            <x:String>Light</x:String>
            <x:String>Dark</x:String>
        </Picker.Items>
    </Picker>
    </StackLayout>

I change it with the following by binding picker to Theme below:

      public int Theme
        {
            get { return _theme; }
            set
            {
                _theme = value;
                App.SetTheme = (MySettings.Theme)value;
            }
        }

in App:

            public static MySettings.Theme SetTheme {
            set
            {
                if (value == MySettings.Theme.Light)
                {
                    App.Current.Resources = new ResourceDictionaryLight();
                }
                else if (value == MySettings.Theme.Dark)
                {
                    App.Current.Resources = new ResourceDictionaryDark();
                }
            }
        }

The ResourceDictionaryLight xaml like this:

    <?xml version="1.0" encoding="utf-8"?>
    <ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                 x:Class="ChurchApp.ResourceDictionaryLight" 
                 MergedWith="light:LightThemeResources"
                 xmlns:light="clr-namespace:Xamarin.Forms.Themes;assembly=Xamarin.Forms.Theme.Light">
    </ResourceDictionary>

Feels like a bug (either in old or new) since it changed how it worked without me changing any code.

Cfun Cfun · Accepted Answer · 2020-11-29T13:58:11

Starting from Xamarin.Forms 4.7, AppThemeBinding was introduced which makes theme management very easy for user as it is built-in inside the framework.

Here is an example on ow to define your attributes in both Light and Dark theme:

<Label Text="Hellow World" TextColor="{AppThemeBinding Dark=White, Light=Black}"/>

It is not the main goal but note that you are not limited to colors you can define the values for any attributes that will be set for Light and for Dark theme. It may not be a practical example but just for demo:

<Label Text="Hellow World" FontSize={AppThemeBinding Dark=12, Light=15} TextColor="{AppThemeBinding Dark=White, Light=Black}"/>

More important you can select and change the Theme by setting the property App.Current.UserAppTheme (wherever in your app and without restart or closing any page) to either:

Dark: OSAppTheme.Dark.
Light: OSAppTheme.Light.
Unspecified: OSAppTheme.Unspecified. If Android version supports dark theme (Android 10 (API level 29) and higher), then your app will follow Android current selected theme when this property is set like so.

Xamarin Themes Switch dark and light

1 Answers

Helpful documentation