アプリケーションのシステム テーマの変更に Xamarin.Forms 対応する

Download Sample サンプルをダウンロードします

通常、デバイスには明るいテーマと暗いテーマが含まれます。これは、それぞれがオペレーティング システム レベルで設定できる幅広い外観設定を指します。 アプリケーションでは、これらのシステム テーマを尊重し、システム テーマが変更されたときにすぐに対応する必要があります。

システムテーマは、デバイスの構成に応じてさまざまな理由で変更される場合があります。 これには、ユーザーによって明示的に変更されているシステム テーマ、時刻による変更、低光量などの環境要因による変更が含まれます。

Xamarin.Formsアプリケーションは、マークアップ拡張機能と拡張メソッドを使用してリソースをAppThemeBinding使用することで、システム テーマの変更にSetAppThemeColorSetOnAppTheme<T>対応できます。

システム テーマの変更に対応するには、次の Xamarin.Forms 要件を満たす必要があります。

  • Xamarin.Forms 4.6.0.967 以上。
  • iOS 13 以降。
  • Android 10 (API 29) 以降。
  • UWP ビルド 14393 以降。
  • macOS 10.14 以降。

次のスクリーンショットは、iOS および Android 上の明るいシステム テーマと濃色のシステム テーマのテーマ付きページを示しています。

Screenshot of the main page of a themed app, on iOS and AndroidScreenshot of the detail page of a themed app, on iOS and Android

テーマ リソースを定義して使用する

明るいテーマと濃いテーマのリソースは、マークアップ拡張、および拡張メソッドとSetOnAppTheme<T>AppThemeBindingSetAppThemeColor使用できます。 これらの方法では、現在のシステム テーマの値に基づいてリソースが自動的に適用されます。 さらに、アプリの実行中にシステム テーマが変更された場合、これらのリソースを使用するオブジェクトは自動的に更新されます。

AppThemeBinding マークアップ拡張

AppThemeBindingマークアップ拡張機能を使用すると、現在のシステム テーマに基づいて、イメージや色などのリソースを使用できます。

<ContentPage ...>
    <StackLayout Margin="20">
        <Label Text="This text is green in light mode, and red in dark mode."
               TextColor="{AppThemeBinding Light=Green, Dark=Red}" />
        <Image Source="{AppThemeBinding Light=lightlogo.png, Dark=darklogo.png}" />
    </StackLayout>
</ContentPage>

この例では、デバイスが明るいテーマを使用している場合、最初 Label のテキストの色は緑に設定され、デバイスがダーク テーマを使用している場合は赤に設定されます。 同様に、現在の Image システム テーマに基づいて異なるイメージ ファイルが表示されます。

また、a で定義されているリソースは ResourceDictionary 、マークアップ拡張機能と共に StaticResource 使用できます。

<ContentPage ...>
    <ContentPage.Resources>

        <!-- Light colors -->
        <Color x:Key="LightPrimaryColor">WhiteSmoke</Color>
        <Color x:Key="LightSecondaryColor">Black</Color>

        <!-- Dark colors -->
        <Color x:Key="DarkPrimaryColor">Teal</Color>
        <Color x:Key="DarkSecondaryColor">White</Color>

        <Style x:Key="ButtonStyle"
               TargetType="Button">
            <Setter Property="BackgroundColor"
                    Value="{AppThemeBinding Light={StaticResource LightPrimaryColor}, Dark={StaticResource DarkPrimaryColor}}" />
            <Setter Property="TextColor"
                    Value="{AppThemeBinding Light={StaticResource LightSecondaryColor}, Dark={StaticResource DarkSecondaryColor}}" />
        </Style>

    </ContentPage.Resources>

    <Grid BackgroundColor="{AppThemeBinding Light={StaticResource LightPrimaryColor}, Dark={StaticResource DarkPrimaryColor}}">
      <Button Text="MORE INFO"
              Style="{StaticResource ButtonStyle}" />
    </Grid>    
</ContentPage>    

この例では、デバイスが Grid 明るいテーマと濃いテーマのどちらを使用しているかに基づいて、背景色と Button スタイルが変わります。

マークアップ拡張機能の AppThemeBinding 詳細については、「 AppThemeBinding マークアップ拡張機能」を参照してください。

拡張メソッド

Xamarin.Formsには、オブジェクトがシステム テーマの変更に応答できるようにするVisualElement拡張メソッドがSetOnAppTheme<T>含まれていますSetAppThemeColor

この SetAppThemeColor メソッドを使用すると、 Color 現在のシステム テーマに基づいてターゲット プロパティに設定されるオブジェクトを指定できます。

Label label = new Label();
label.SetAppThemeColor(Label.TextColorProperty, Color.Green, Color.Red);

この例では、デバイスが明るいテーマを Label 使用している場合、テキストの色は緑に設定され、デバイスがダーク テーマを使用している場合は赤に設定されます。

この SetOnAppTheme<T> メソッドを使用すると、現在のシステム テーマに基づいてターゲット プロパティに設定される型 T のオブジェクトを指定できます。

Image image = new Image();
image.SetOnAppTheme<FileImageSource>(Image.SourceProperty, "lightlogo.png", "darklogo.png");

この例では、デバイスがImageライト テーマを使用している場合とdarklogo.png、デバイスがダーク テーマを使用している場合に表示lightlogo.pngされます。

現在のシステム テーマを検出する

現在のシステム テーマは、プロパティの Application.RequestedTheme 値を取得することで検出できます。

OSAppTheme currentTheme = Application.Current.RequestedTheme;

このプロパティは RequestedTheme 、列挙メンバーを OSAppTheme 返します。 OSAppTheme 列挙体を使って、次のメンバーを定義できます。

  • Unspecifiedこれは、デバイスが指定されていないテーマを使用していることを示します。
  • Lightこれは、デバイスがライト テーマを使用していることを示します。
  • Darkこれは、デバイスがダーク テーマを使用していることを示します。

現在のユーザー テーマを設定する

アプリケーションで使用されるテーマは、現在動作しているシステム テーマに Application.UserAppTheme 関係なく、種類 OSAppThemeのプロパティで設定できます。

Application.Current.UserAppTheme = OSAppTheme.Dark;

この例では、アプリケーションは、現在動作しているシステム テーマに関係なく、システム ダーク モード用に定義されたテーマを使用するように設定されています。

Note

プロパティOSAppTheme.UnspecifiedUserAppTheme既定の操作システム テーマに設定します。

テーマの変更にReactする

デバイスのシステム テーマは、デバイスの構成方法に応じて、さまざまな理由で変更される場合があります。 Xamarin.Forms イベントを処理することで、システム テーマが変更されたときにアプリに通知を受 Application.RequestedThemeChanged け取ることができます。

Application.Current.RequestedThemeChanged += (s, a) =>
{
    // Respond to the theme change
};

イベントに付随RequestedThemeChangedするオブジェクトにはAppThemeChangedEventArgs、型OSAppThemeという名前RequestedThemeの 1 つのプロパティがあります。 このプロパティを調べて、要求されたシステム テーマを検出できます。

重要

Android のテーマの変更に対応するには、クラスの属性MainActivityConfigChanges.UiModeフラグをActivity含める必要があります。