Xamarin.FormsでLight Theme, Dark Themeに応じてスタイルを切り替える

Experimentalですが,OSのLightテーマ,Darkテーマの切り替えに応じてUIの見た目を切り替える仕組みが提供されています.

それがOnAppThemeマークアップ拡張です.

以下のように記述することで,OSのLightテーマ,Darkテーマに応じて,それぞれに指定した値が適用されます.

        <Label
            HorizontalOptions="CenterAndExpand"
            Text="インラインで指定"
            TextColor="{OnAppTheme Light=Green,
                                   Dark=Red}"
            VerticalOptions="CenterAndExpand" />

または,StyleとしてResourceDictionaryに登録して使用することもできます.ただし,Styleを使用する場合はDynamicResourceとして使用する必要があるので注意が必要です.

        <Style x:Key="labelStyle" TargetType="Label">
            <Setter Property="TextColor" Value="{OnAppTheme Black, Light=Blue, Dark=Teal}" />
            <Setter Property="BackgroundColor" Value="{OnAppTheme Light='#00FFFF', Dark='#999999'}" />
        </Style>

        <Label
            HorizontalOptions="CenterAndExpand"
            Style="{DynamicResource labelStyle}"
            Text="Styleで指定(DynamicResourceを使う)"
            VerticalOptions="CenterAndExpand" />

現時点ではExperimentalのため,OnAppThemeを使用するためにはDevice.SetFlags()メソッドがアプリケーション開始時に実行されるようにする必要があります. App.xaml.csのコンストラクタに追加すると良いでしょう.

        public App()
        {
            //ここ
            Device.SetFlags(new List<string> {
                "AppTheme_Experimental"
            });

            InitializeComponent();

            MainPage = new MainPage();
        }

サンプルコードはこちら

github.com