Windows 中的颜色

Windows 通过指示用户界面元素之间的可视层次结构和结构，帮助用户专注于其任务。 颜色取决于上下文，用于呈现一种平和的基调，巧妙地增强用户交互，仅在必要时突出重要项。

提示

本文介绍如何 将 Fluent Design 语言 应用于 Windows 应用。 有关详细信息，请参阅 Fluent Design - Color。

颜色模式

Windows 支持两种颜色模式，或主题：浅色和深色。 每种模式都由一组中性颜色值组成，这些值会自动调整以确保最佳对比度。

在浅色和深色模式下，较深的颜色指示背景图面不太重要。 重要图面会突出显示，颜色较浅且较亮。 有关详细信息，请参阅分层和提升。

主题色

主题色用来强调用户界面中的重要元素，以及指示交互式对象或控件的状态。 主题色值会自动生成并优化，以便在浅色和深色模式下进行对比。 主题色用于突出显示重要元素并传达交互式元素状态的相关信息，请谨慎使用。

示例

打开 WinUI 3 库应用并查看操作中的颜色原则。

WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码

Windows 应用中的颜色

使用颜色可在应用中向用户直观传达信息：颜色可用于指示交互性、针对用户操作提供反馈并保证应用界面的视觉连续性。

在 Windows 应用中，颜色主要由主题色和主题决定。 本文介绍如何在应用中使用颜色，同时介绍如何使用主题色和主题资源来让 Windows 应用可用于任何主题上下文。

颜色使用原则

有效地使用颜色。 谨慎地使用颜色突出显示重要元素时，颜色可帮助创建流畅直观的用户界面。

使用颜色指示交互性。 可选择一种颜色来指示应用程序中处于交互状态的元素。 例如，许多网页使用蓝色文本表示超链接。

可自定义颜色。 在 Windows 中，用户可选择要在其整个体验中显示的主题色和浅色/深色主题。 可选择按何种方式将用户的主题色及主题纳入应用程序，为用户提供个性化体验。

颜色具有文化性。 请考虑来自不同文化的人们对所用颜色的解读方式。 例如，蓝色在一些文化中象征着美德和保护，而在另一些文化中代表着哀悼。

主题

Windows 应用可使用浅色或深色应用程序主题。 主题将对应用背景、文本、图标和常见控件的颜色造成影响。

浅色主题

深色主题

默认情况下，Windows 应用的主题是 Windows 设置中的用户首选主题或设备的默认主题。 不过，你也可为你的 Windows 应用专门设置主题。

更改主题

可通过更改 App.xaml 文件中的 RequestedTheme 属性更改主题。

<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 的项模板演示了如何在自定义模板中使用主题画笔。

<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。 但是，还可自定义应用的主题色来彰显你的品牌。

替代主题色

若要更改应用的主题色，请将以下代码放入 app.xaml。

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

选择主题色

为应用选择自定义主题色时，请确保使用主题色的文本和背景拥有合适的对比度，以获得最佳的可读性。 若要测试对比度，可使用 Windows 设置中的颜色选取器工具，也可使用在线对比度工具。

主题色调色板

Windows Shell 中的主题色算法可生成主题色的浅色和深色底纹。

可访问用作主题资源的以下底纹：

• 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 属性自动访问这些预定义颜色。 在以下示例中，我们创建了一个按钮并将背景色属性和前景色属性设置为 Colors 类的成员。

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

可使用 XAML 中的 Color 结构通过 RGB 或十六进制值自行创建颜色。

<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”中的各字母分别代表 Alpha（不透明度）、红、绿和蓝，这四个部分共同组成一种颜色。 每个参数的值可介于 0 至 255 之间。 可选择忽略第一个值，此操作将默认选定 255 或 100% 的透明度。

注意

如果使用 C++，则必须使用 ColorHelper 类创建颜色。

Color 最常用作 SolidColorBrush 的参数，该参数可用于以单一纯色绘制 UI 元素。 通常在 ResourceDictionary 中定义这些画笔，以便画笔可重复用于多个元素。

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

若要详细了解如何使用画笔，请参阅 XAML 画笔。

可用性

对比度

确保元素和图像有足够的对比度来区分它们，不管主题色或主题如何。

考虑在应用程序中使用什么颜色时，应主要考虑可访问性。 请遵循以下指南，确保应用程序可供尽可能多的用户访问。

照明

请注意，环境照明的变化可能影响应用的可用性。 例如，黑色背景的页面在室外可能因屏幕眩光而变得不可读，而白色背景的页面则可能在黑暗的房间中难以阅读。

色盲

请注意色盲因素对应用程序的可用性造成的影响。 例如，红绿色盲用户将难以辨别红色和绿色元素。 大约 8% 的男性和 0.5% 的女性是红绿色盲，因此请避免单独使用此类颜色组合来区分应用程序元素。

相关

• XAML 样式
• XAML 主题资源
• WinUI 3 库 - 颜色