Windows アプリでのテーマ設定

Windowsアプリは明るいテーマと濃色のテーマをサポートし、ユーザーのテーマの設定に対するアプリの応答方法をカスタマイズできます。この記事では、テーマの変更、テーマブラシの使用、アクセントカラーのカスタマイズ、およびカラー API の操作方法について説明します。

色の効果的な使用に関する設計ガイダンスについては、「WindowsColor」を参照>。

WinUI ギャラリーアプリを開き、色の動作を確認する

テーマの変更

テーマを変更するには、ファイルで App.xaml プロパティを変更します。

<Application
    x:Class="App9.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App9"
    RequestedTheme="Dark">
</Application>

RequestedTheme プロパティを削除すると、アプリケーションでユーザーのシステム設定が使用されます。

ユーザーはまたハイコントラストテーマを使用することができます。これはインターフェイスを見やすくするために、コントラストの大きい、少数の色のパレットを使ったテーマです。この場合、RequestedTheme はシステムによって上書きされます。

テーマのテスト

アプリのテーマを指定しない場合は、必ず淡色テーマと濃色テーマの両方でアプリをテストして、あらゆる条件でアプリが判読できることを確認します。

テーマブラシ

コモンコントロールでは、テーマブラシが自動的に作動して、淡色テーマと濃色テーマのコントラストが調整されます。

たとえば、AutoSuggestBox でテーマブラシが使用される方法を以下に示します。

テーマブラシコントロールの例

テーマブラシの使用

カスタムコントロールのテンプレートを作成する際は、ハードコードで色の値を設定するのではなく、テーマブラシを使用することをお勧めします。これにより、アプリによってあらゆるテーマに容易に適応できるようになります。

たとえば、これらの ListView 用の項目テンプレートは、カスタムテンプレートでテーマブラシを使用する方法を示しています。

アイコンが付いた 2 行のリスト項目の例

<ListView ItemsSource="{x:Bind ViewModel.Recordings}">
    <ListView.ItemTemplate>
        <DataTemplate x:Name="DoubleLineDataTemplate" x:DataType="local:Recording">
            <StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{x:Bind CompositionName}">
                <Ellipse Height="48" Width="48" VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="Placeholder.png"/>
                    </Ellipse.Fill>
                </Ellipse>
                <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
                    <TextBlock Text="{x:Bind CompositionName}" Style="{ThemeResource BodyStrongTextBlockStyle}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
                    <TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

アプリでテーマブラシを使用する方法について詳しくは、テーマリソースに関するページをご覧ください。

アクセントカラー

コモンコントロールでは、アクセントカラーを使用して、状態情報を伝達します。アクセントカラーは、既定では、ユーザーが設定で選択した SystemAccentColor です。ただし、組織のブランドを反映するように、アプリのアクセントカラーをカスタマイズすることもできます。

Windows コントロール

ユーザーが選択したアクセントヘッダーユーザーが選択したアクセントカラー

カスタムアクセントヘッダー

アクセントカラーの上書き

アプリのアクセントカラーを変更するには、次のコードを app.xaml に追加します。

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="SystemAccentColor">#107C10</Color>
    </ResourceDictionary>
</Application.Resources>

アクセントカラーの選択

アプリに対してカスタムのアクセントカラーを選択した場合は、アクセントカラーを使用したテキストと背景との間に十分なコントラストがあり、テキストを適切に判読できることを確認してください。コントラストをテストするには、Windows設定でカラーピッカーツールを使用するか、これらのオンラインコントラストツールを使用できます。

Windows 設定カスタムアクセントカラーピッカー

アクセントカラーパレット

Windows シェルのアクセントカラーアルゴリズムは、アクセントカラーの明るい濃淡を生成します。

アクセントカラーパレット

これらの色調には、以下のテーマリソースとしてアクセスできます。

SystemAccentColorLight3
SystemAccentColorLight2
SystemAccentColorLight1
SystemAccentColorDark1
SystemAccentColorDark2
SystemAccentColorDark3

また UISettings.GetColorValue メソッドと UIColorType 列挙型を使って、プログラムによってアクセントカラーパレットにアクセスすることもできます。

アクセントカラーパレットを使用して、アプリの色のテーマを設定できます。以下では、ボタンに対してアクセントカラーパレットを使用する方法の例を示します。

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAccentColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAccentColorDark1}"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

<Button Content="Button"></Button>

テキスト色と背景色の両方を設定する場合は、テキストと背景の間に十分なコントラストがあることを確認します。既定では、ハイパーリンクまたはハイパーテキストにはアクセントカラーが使用されます。背景にアクセントカラーのバリエーションを適用する場合は、元のアクセントカラーのバリエーションを使用して、背景色とテキスト色のコントラストを最適化します。

次のチャートは、アクセントのカラーのさまざまな色の明暗の例と、色付きの表面に色の付いた文字を適用する方法を示しています。

上端の薄い青から下端の濃い青まで変化する色のグラデーションを示すカラーチャートの色のスクリーンショット。

コントロールのスタイルについて詳しくは、「XAML スタイル」をご覧ください。

カラーAPI

アプリケーションに色を追加できる API は複数存在します。まず、Colors クラスを使用すると、多数の色があらかじめ定義された一覧を実装できます。これらは、XAML プロパティを使用して自動的にアクセスできます。以下の例では、ボタンを作成して、Color クラスのメンバーに背景色プロパティと前景色プロパティを設定しています。

<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>

XAML で Color 構造体を使用すると、RGB または 16 進数値によって独自の色を作成できます。

<Color x:Key="LightBlue">#FF36C0FF</Color>

また FromArgb メソッドを使用すると、コード内で同じ色を作成できます。

Color LightBlue = Color.FromArgb(255,54,192,255);

Windows::UI::Color LightBlue = Windows::UI::ColorHelper::FromArgb(255,54,192,255);

"Argb" という文字は、色の 4 つの構成要素であるアルファ (Alpha、不透明度)、赤 (Red)、緑 (Green)、青 (Blue) の頭文字です。各引数の設定可能な範囲は、0 - 255 です。最初の値は省略可能です。その場合、透明度が既定値の 255、つまり 100% 不透明に設定されます。

注

C++ を使用している場合、ColorHelper クラスを使って色を作成する必要があります。

Color は、UI 要素を単色で塗りつぶす SolidColorBrush の引数として使用されるのが最も一般的です。このようなブラシは、通常、ResourceDictionary で定義されているため、複数の要素に再利用できます。

<ResourceDictionary>
    <SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
    <SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>

ブラシの使用方法について詳しくは、XAML ブラシに関するページをご覧ください。

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-03-11

次の方法で共有

Windows アプリでのテーマ設定

テーマの変更

テーマのテスト

テーマ ブラシ

テーマ ブラシの使用

アクセントカラー

アクセント カラーの上書き

アクセント カラーの選択

アクセント カラー パレット

カラーAPI

関連項目

フィードバック

その他のリソース

テーマブラシ

テーマブラシの使用

アクセントカラーの上書き

アクセントカラーの選択

アクセントカラーパレット