You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Split color page: design guidance vs theming implementation
Consolidate Color Modes and Themes sections on the design color page,
remove light/dark theme images (hero image remains), and remove all
implementation content (changing theme, theme brushes, accent color
overrides, color API).
Create new 'Colors and themes' page under Develop > User Interface
with all the implementation content: changing themes, theme brushes,
accent color customization, accent color palette, and color API.
Co-authored-by: Copilot <[email protected]>
Copy file name to clipboardExpand all lines: hub/apps/design/signature-experiences/color.md
+5-209Lines changed: 5 additions & 209 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,14 +15,16 @@ Windows employs color to help users focus on their tasks by indicating a visual
15
15
> [!TIP]
16
16
> This article describes how the [Fluent Design language](https://fluent2.microsoft.design/) is applied to Windows apps. For more information, see [**Fluent Design - Color**](https://fluent2.microsoft.design/color).
17
17
18
-
## Color modes
18
+
## Color modes and themes
19
19
20
20
21
21
22
-
Windows supports two color modes, or themes: light and dark. Each mode consists of a set of neutral color values that are automatically adjusted to ensure optimal contrast.
22
+
Windows supports two color modes, or themes: light and dark. Each mode consists of a set of neutral color values that are automatically adjusted to ensure optimal contrast. Windows apps can use a light or dark application theme, which affects the colors of the app's background, text, icons, and [common controls](../controls/index.md).
23
23
24
24
In both light and dark color modes, darker colors indicate background surfaces of less importance. Important surfaces are highlighted with lighter and brighter colors. See [layering & elevation](layering.md) for more information.
25
25
26
+
By default, your Windows app's theme is the user's theme preference from Windows Settings or the device's default theme. However, you can set the theme specifically for your app. To learn how to change themes, use theme brushes, and customize accent colors in code, see [Theming in Windows apps](../../develop/ui/theming.md).
27
+
26
28
## Accent color
27
29
28
30
:::row:::
@@ -43,14 +45,6 @@ Accent color is used to emphasize important elements in the user interface and t
Color provides an intuitive way of communicating information to users in your app: it can be used to indicate interactivity, give feedback to user actions, and give your interface a sense of visual continuity.
51
-
52
-
In Windows apps, colors are primarily determined by accent color and theme. In this article, we'll discuss how you can use color in your app, and how to use accent color and theme resources to make your Windows app usable in any theme context.
53
-
54
48
## Color principles
55
49
56
50
:::row:::
@@ -75,205 +69,6 @@ Consider how the colors you use will be interpreted by people from different cul
75
69
:::column-end:::
76
70
:::row-end:::
77
71
78
-
## Themes
79
-
80
-
Windows apps can use a light or dark application theme. The theme affects the colors of the app's background, text, icons, and [common controls](../controls/index.md).
By default, your Windows app's theme is the user’s theme preference from Windows Settings or the device's default theme. However, you can set the theme specifically for your Windows app.
91
-
92
-
### Changing the theme
93
-
94
-
You can change themes by changing the **RequestedTheme** property in your `App.xaml` file.
Removing the **RequestedTheme** property means that your application will use the user’s system settings.
107
-
108
-
Users can also select the [high contrast theme](../accessibility/high-contrast-themes.md), which uses a small palette of contrasting colors that makes the interface easier to see. In that case, the system will override your RequestedTheme.
109
-
110
-
### Testing themes
111
-
112
-
If you don't request a theme for your app, make sure to test your app in both light and dark themes to ensure that your app will be legible in all conditions.
113
-
114
-
## Theme brushes
115
-
116
-
Common controls automatically use [theme brushes](../../develop/platform/xaml/xaml-theme-resources.md#the-xaml-color-ramp-and-theme-dependent-brushes) to adjust contrast for light and dark themes.
117
-
118
-
For example, here's an illustration of how the [AutoSuggestBox](../controls/auto-suggest-box.md) uses theme brushes:
119
-
120
-
121
-
122
-
### Using theme brushes
123
-
124
-
:::row:::
125
-
:::column:::
126
-
When creating templates for custom controls, use theme brushes rather than hard code color values. This way, your app can easily adapt to any theme.
127
-
128
-
For example, these [item templates for ListView](../controls/item-templates-listview.md) demonstrate how to use theme brushes in a custom template.
129
-
:::column-end:::
130
-
:::column:::
131
-
For more information about how to use theme brushes in your app, see [Theme Resources](../../develop/platform/xaml/xaml-theme-resources.md).
156
-
157
-
## Accent colors
158
-
159
-
Common controls use an accent color to convey state information. By default, the accent color is the `SystemAccentColor` that users select in their Settings. However, you can also customize your app's accent color to reflect your brand.
To change your app's accent color, place the following code in `app.xaml`.
177
-
178
-
```xaml
179
-
<Application.Resources>
180
-
<ResourceDictionary>
181
-
<Colorx:Key="SystemAccentColor">#107C10</Color>
182
-
</ResourceDictionary>
183
-
</Application.Resources>
184
-
```
185
-
186
-
### Choosing an accent color
187
-
188
-
If you select a custom accent color for your app, please make sure that text and backgrounds that use the accent color have sufficient contrast for optimal readability. To test contrast, you can use the color picker tool in Windows Settings, or you can use these [online contrast tools](https://www.w3.org/TR/WCAG20-TECHS/G18.html#G18-resources).
189
-
190
-
191
-
192
-
## Accent color palette
193
-
194
-
An accent color algorithm in the Windows shell generates light and dark shades of the accent color.
195
-
196
-
197
-
198
-
These shades can be accessed as [theme resources](../../develop/platform/xaml/xaml-theme-resources.md):
199
-
200
-
-`SystemAccentColorLight3`
201
-
-`SystemAccentColorLight2`
202
-
-`SystemAccentColorLight1`
203
-
-`SystemAccentColorDark1`
204
-
-`SystemAccentColorDark2`
205
-
-`SystemAccentColorDark3`
206
-
207
-
<!-- check this is true -->
208
-
You can also access the accent color palette programmatically with the [**UISettings.GetColorValue**](/uwp/api/windows.ui.viewmanagement.uisettings.getcolorvalue) method and [**UIColorType**](/uwp/api/windows.ui.viewmanagement.uicolortype) enum.
209
-
210
-
You can use the accent color palette for color theming in your app. Below is an example of how you can use the accent color palette on a button.
211
-
212
-
When using colored text on a colored background, make sure there is enough contrast between text and background. By default, hyperlink or hypertext will use the accent color. If you apply variations of the accent color to the background, you should use a variation of the original accent color to optimize the contrast of colored text on a colored background.
231
-
232
-
The chart below illustrates an example of the various light/dark shades of accent color, and how colored type can be applied on a colored surface.
233
-
234
-
235
-
236
-
For more information about styling controls, see [XAML styles](../../develop/platform/xaml/xaml-styles.md).
237
-
238
-
## Color API
239
-
240
-
There are several APIs that can be used to add color to your application. First, the [**Colors**](/uwp/api/windows.ui.colors) class, which implements a large list of predefined colors. These can be accessed automatically with XAML properties. In the example below, we create a button and set the background and foreground color properties to members of the **Colors** class.
The letters "Argb" stands for Alpha (opacity), Red, Green, and Blue, which are the four components of a color. Each argument can range from 0 to 255. You can choose to omit the first value, which will give you a default opacity of 255, or 100% opaque.
262
-
263
-
> [!Note]
264
-
> If you're using C++, you must create colors by using the [**ColorHelper**](/uwp/api/windows.ui.colorhelper) class.
265
-
266
-
The most common use for a **Color** is as an argument for a [**SolidColorBrush**](/uwp/api/windows.ui.xaml.media.solidcolorbrush), which can be used to paint UI elements a single solid color. These brushes are generally defined in a [**ResourceDictionary**](/uwp/api/Windows.UI.Xaml.ResourceDictionary), so they can be reused for multiple elements.
0 commit comments