Dark And Light Can't Take Dmg

-->

Jan 07, 2020 The ocean is divided into three zones based on depth and light level. Although some sea creatures depend on light to live, others can do without it. Sunlight entering the water may travel about 1,000 meters (3,280 feet) into the ocean under the right conditions, but there is rarely any significant light beyond 200 meters (656 feet).

Theme resources in XAML are a set of resources that apply different values depending on which system theme is active. There are 3 themes that the XAML framework supports: 'Light', 'Dark', and 'HighContrast'.

Prerequisites: This topic assumes that you have read ResourceDictionary and XAML resource references.

Theme resources v. static resources

There are two XAML markup extensions that can reference a XAML resource from an existing XAML resource dictionary: {StaticResource} markup extension and {ThemeResource} markup extension.

Evaluation of a {ThemeResource} markup extension occurs when the app loads and subsequently each time the theme changes at runtime. This is typically the result of the user changing their device settings or from a programmatic change within the app that alters its current theme.

In contrast, a {StaticResource} markup extension is evaluated only when the XAML is first loaded by the app. It does not update. It’s similar to a find and replace in your XAML with the actual runtime value at app launch.

Theme resources in the resource dictionary structure

Each theme resource is part of the XAML file themeresources.xaml. For design purposes, themeresources.xaml is available in the (Program Files)Windows Kits10DesignTimeCommonConfigurationNeutralUAP<SDK version>Generic folder from a Windows Software Development Kit (SDK) installation. The resource dictionaries in themeresources.xaml are also reproduced in generic.xaml in the same directory.

The Windows Runtime doesn't use these physical files for runtime lookup. That's why they are specifically in a DesignTime folder, and they aren't copied into apps by default. Instead, these resource dictionaries exist in memory as part of the Windows Runtime itself, and your app's XAML resource references to theme resources (or system resources) resolve there at runtime.

Guidelines for custom theme resources

Follow these guidelines when you define and consume your own custom theme resources:

  • Specify theme dictionaries for both 'Light' and 'Dark' in addition to your 'HighContrast' dictionary. Although you can create a ResourceDictionary with 'Default' as the key, it’s preferred to be explicit and instead use 'Light', 'Dark', and 'HighContrast'.

  • Use the {ThemeResource} markup extension in: Styles, Setters, Control templates, Property setters, and Animations.

  • Don't use the {ThemeResource} markup extension in your resource definitions inside your ThemeDictionaries. Use {StaticResource} markup extension instead.

    EXCEPTION: You can use the {ThemeResource} markup extension to reference resources that are agnostic to the app theme in your ThemeDictionaries. Examples of these resources are accent color resources like SystemAccentColor, or system color resources, which are typically prefixed with 'SystemColor' like SystemColorButtonFaceColor.

Caution

If you don’t follow these guidelines, you might see unexpected behavior related to themes in your app. For more info, see the Troubleshooting theme resources section.

The XAML color ramp and theme-dependent brushes

The combined set of colors for 'Light', 'Dark', and 'HighContrast' themes make up the Windows color ramp in XAML. Whether you want to modify the system themes, or apply a system theme to your own XAML elements, it’s important to understand how the color resources are structured.

For additional information about how to apply color in your UWP app, please see Color in UWP apps.

Light and Dark theme colors

The XAML framework provides a set of named Color resources with values that are tailored for the 'Light' and 'Dark' themes. The keys you use to reference these follow the naming format: System[Simple Light/Dark Name]Color.

This table lists the key, simple name, and string representation of the color (using the #aarrggbb format) for the 'Light' and 'Dark' resources provided by the XAML framework. The key is used to reference the resource in an app. The 'Simple light/dark name' is used as part of the brush naming convention that we explain later.

KeySimple light/dark nameLightDark
SystemAltHighColorAltHigh#FFFFFFFF#FF000000
SystemAltLowColorAltLow#33FFFFFF#33000000
SystemAltMediumColorAltMedium#99FFFFFF#99000000
SystemAltMediumHighColorAltMediumHigh#CCFFFFFF#CC000000
SystemAltMediumLowColorAltMediumLow#66FFFFFF#66000000
SystemBaseHighColorBaseHigh#FF000000#FFFFFFFF
SystemBaseLowColorBaseLow#33000000#33FFFFFF
SystemBaseMediumColorBaseMedium#99000000#99FFFFFF
SystemBaseMediumHighColorBaseMediumHigh#CC000000#CCFFFFFF
SystemBaseMediumLowColorBaseMediumLow#66000000#66FFFFFF
SystemChromeAltLowColorChromeAltLow#FF171717#FFF2F2F2
SystemChromeBlackHighColorChromeBlackHigh#FF000000#FF000000
SystemChromeBlackLowColorChromeBlackLow#33000000#33000000
SystemChromeBlackMediumLowColorChromeBlackMediumLow#66000000#66000000
SystemChromeBlackMediumColorChromeBlackMedium#CC000000#CC000000
SystemChromeDisabledHighColorChromeDisabledHigh#FFCCCCCC#FF333333
SystemChromeDisabledLowColorChromeDisabledLow#FF7A7A7A#FF858585
SystemChromeHighColorChromeHigh#FFCCCCCC#FF767676
SystemChromeLowColorChromeLow#FFF2F2F2#FF171717
SystemChromeMediumColorChromeMedium#FFE6E6E6#FF1F1F1F
SystemChromeMediumLowColorChromeMediumLow#FFF2F2F2#FF2B2B2B
SystemChromeWhiteColorChromeWhite#FFFFFFFF#FFFFFFFF
SystemListLowColorListLow#19000000#19FFFFFF
SystemListMediumColorListMedium#33000000#33FFFFFF

Dark theme

Base

Alt

List

Chrome

Windows system high-contrast colors

In addition to the set of resources provided by the XAML framework, there's a set of color values derived from the Windows system palette. These colors are not specific to the Windows Runtime or Universal Windows Platform (UWP) apps. However, many of the XAML Brush resources consume these colors when the system is operating (and the app is running) using the 'HighContrast' theme. The XAML framework provides these system-wide colors as keyed resources. The keys follow the naming format: SystemColor[name]Color.

This table lists the system-wide colors that XAML provides as resource objects derived from the Windows system palette. The 'Ease of Access name' column shows how color is labeled in the Windows settings UI. The 'Simple HighContrast name' column is a one word description of how the color is applied across the XAML common controls. It's used as part of the brush naming convention that we explain later. The 'Initial default' column shows the values you'd get if the system is not running in high contrast at all.

KeyEase of Access nameSimple HighContrast nameInitial default
SystemColorButtonFaceColorButton Text (background)Background#FFF0F0F0
SystemColorButtonTextColorButton Text (foreground)Foreground#FF000000
SystemColorGrayTextColorDisabled TextDisabled#FF6D6D6D
SystemColorHighlightColorSelected Text (background)Highlight#FF3399FF
SystemColorHighlightTextColorSelected Text (foreground)HighlightAlt#FFFFFFFF
SystemColorHotlightColorHyperlinksHyperlink#FF0066CC
SystemColorWindowColorBackgroundPageBackground#FFFFFFFF
SystemColorWindowTextColorTextPageText#FF000000

Windows provides different high-contrast themes, and enables the user to set the specific colors to for their high-contrast settings through the Ease of Access Center, as shown here. Therefore, it's not possible to provide a definitive list of high-contrast color values.

For more info about supporting high-contrast themes, see High-contrast themes.

System accent color

In addition to the system high-contrast theme colors, the system accent color is provided as a special color resource using the key SystemAccentColor. At runtime, this resource gets the color that the user has specified as the accent color in the Windows personalization settings.

Note

While it’s possible to override the system color resources, it’s a best practice to respect the user’s color choices, especially for high-contrast settings.

Theme-dependent brushes

The color resources shown in the preceding sections are used to set the Color property of SolidColorBrush resources in the system theme resource dictionaries. You use the brush resources to apply the color to XAML elements. The keys for the brush resources follow the naming format: SystemControl[Simple HighContrast name][Simple light/dark name]Brush. For example, SystemControlBackroundAltHighBrush.

Let’s look at how the color value for this brush is determined at run-time. In the 'Light' and 'Dark' resource dictionaries, this brush is defined like this:

<SolidColorBrush x:Key='SystemControlBackgroundAltHighBrush' Color='{StaticResource SystemAltHighColor}'/>

In the 'HighContrast' resource dictionary, this brush is defined like this:

<SolidColorBrush x:Key='SystemControlBackgroundAltHighBrush' Color='{ThemeResource SystemColorButtonFaceColor}'/>

Light

When this brush is applied to a XAML element, its color is determined at run-time by the current theme, as shown in this table.

ThemeColor simple nameColor resourceRuntime value
LightAltHighSystemAltHighColor#FFFFFFFF
DarkAltHighSystemAltHighColor#FF000000
HighContrastBackgroundSystemColorButtonFaceColorThe color specified in settings for the button background.

You can use the SystemControl[Simple HighContrast name][Simple light/dark name]Brush naming scheme to determine which brush to apply to your own XAML elements.

Note

Not every combination of [Simple HighContrast name][Simple light/dark name] is provided as a brush resource.

The XAML type ramp

The themeresources.xaml file defines several resources that define a Style that you can apply to text containers in your UI, specifically for either TextBlock or RichTextBlock. These are not the default implicit styles. They are provided to make it easier for you to create XAML UI definitions that match the Windows type ramp documented in Guidelines for fonts.

These styles are for text attributes that you want applied to the whole text container. If you want styles applied just to sections of the text, set attributes on the text elements within the container, such as on a Run in TextBlock.Inlines or on a Paragraph in RichTextBlock.Blocks.

The styles look like this when applied to a TextBlock:

For guidance on how to use the UWP type ramp in your app, see Typography in UWP apps.

BaseTextBlockStyle

TargetType: TextBlock

Supplies the common properties for all the other TextBlock container styles.

Dark And Light Can't Take Dmg 1

HeaderTextBlockStyle

SubheaderTextBlockStyle

TitleTextBlockStyle

SubtitleTextBlockStyle

BodyTextBlockStyle

CaptionTextBlockStyle

BaseRichTextBlockStyle

TargetType: RichTextBlock

Supplies the common properties for all the other RichTextBlock container styles.

BodyRichTextBlockStyle

Note: The RichTextBlock styles don't have all the text ramp styles that TextBlock does, mainly because the block-based document object model for RichTextBlock makes it easier to set attributes on the individual text elements. Also, setting TextBlock.Text using the XAML content property introduces a situation where there is no text element to style and thus you'd have to style the container. That isn't an issue for RichTextBlock because its text content always has to be in specific text elements like Paragraph, which is where you might apply XAML styles for page header, page subheader and similar text ramp definitions.

Miscellaneous Named styles

There's an additional set of keyed Style definitions you can apply to style a Button differently than its default implicit style.

Dark And Light Can't Take Dmg File

TextBlockButtonStyle

TargetType: ButtonBase

Apply this style to a Button when you need to show text that a user can click to take action. The text is styled using the current accent color to distinguish it as interactive and has focus rectangles that work well for text. Unlike the implicit style of a HyperlinkButton, the TextBlockButtonStyle does not underline the text.

The template also styles the presented text to use SystemControlHyperlinkBaseMediumBrush (for 'PointerOver' state), SystemControlHighlightBaseMediumLowBrush (for 'Pressed' state) and SystemControlDisabledBaseLowBrush (for 'Disabled' state).

Here's a Button with the TextBlockButtonStyle resource applied to it.

It looks like this:

NavigationBackButtonNormalStyle

Dark And Light Can't Take Dmg Free

TargetType: Button

This Style provides a complete template for a Button that can be the navigation back button for a navigation app. The default dimensions are 40 x 40 pixels. To tailor the styling you can either explicitly set the Height, Width, FontSize, and other properties on your Button or create a derived style using BasedOn.

Here's a Button with the NavigationBackButtonNormalStyle resource applied to it.

It looks like this:

NavigationBackButtonSmallStyle

TargetType: Button

This Style provides a complete template for a Button that can be the navigation back button for a navigation app. It's similar to NavigationBackButtonNormalStyle, but its dimensions are 30 x 30 pixels.

Here's a Button with the NavigationBackButtonSmallStyle resource applied to it.

Dark And Light Can't Take Dmg Free

Troubleshooting theme resources

If you don’t follow the guidelines for using theme resources, you might see unexpected behavior related to themes in your app.

For example, when you open a light-themed flyout, parts of your dark-themed app also change as if they were in the light theme. Or if you navigate to a light-themed page and then navigate back, the original dark-themed page (or parts of it) now looks as though it is in the light theme.

Typically, these types of issues occur when you provide a 'Default' theme and a 'HighContrast' theme to support high-contrast scenarios, and then use both 'Light' and 'Dark' themes in different parts of your app.

For example, consider this theme dictionary definition:

Dark And Light Can't Take Dmg Download

Intuitively, this looks correct. You want to change the color pointed to by myBrush when in high-contrast, but when not in high-contrast, you rely on the {ThemeResource} markup extension to make sure that myBrush points to the right color for your theme. If your app never has FrameworkElement.RequestedTheme set on elements within its visual tree, this will typically work as expected. However, you run into problems in your app as soon as you start to re-theme different parts of your visual tree.

The problem occurs because brushes are shared resources, unlike most other XAML types. If you have 2 elements in XAML sub-trees with different themes that reference the same brush resource, then as the framework walks each sub-tree to update its {ThemeResource} markup extension expressions, changes to the shared brush resource are reflected in the other sub-tree, which is not your intended result.

To fix this, replace the 'Default' dictionary with separate theme dictionaries for both 'Light' and 'Dark' themes in addition to 'HighContrast':

However, problems still occur if any of these resources are referenced in inherited properties like Foreground. Your custom control template might specify the foreground color of an element using the {ThemeResource} markup extension, but when the framework propagates the inherited value to child elements, it provides a direct reference to the resource that was resolved by the {ThemeResource} markup extension expression. This causes problems when the framework processes theme changes as it walks your control's visual tree. It re-evaluates the {ThemeResource} markup extension expression to get a new brush resource but doesn’t yet propagate this reference down to the children of your control; this happens later, such as during the next measure pass.

As a result, after walking the control visual tree in response to a theme change, the framework walks the children and updates any {ThemeResource} markup extension expressions set on them, or on objects set on their properties. This is where the problem occurs; the framework walks the brush resource and because it specifies its color using a {ThemeResource} markup extension, it's re-evaluated.

At this point, the framework appears to have polluted your theme dictionary because it now has a resource from one dictionary that has its color set from another dictionary.

To fix this problem, use the {StaticResource} markup extension instead of {ThemeResource} markup extension. With the guidelines applied, the theme dictionaries look like this:

Notice that the {ThemeResource} markup extension is still used in the 'HighContrast' dictionary instead of {StaticResource} markup extension. This situation falls under the exception given earlier in the guidelines. Most of the brush values that are used for the 'HighContrast' theme are using color choices that are globally controlled by the system, but exposed to XAML as a specially-named resource (those prefixed with ‘SystemColor’ in the name). The system enables the user to set the specific colors that should be used for their high contrast settings through the Ease of Access Center. Those color choices are applied to the specially-named resources. The XAML framework uses the same theme changed event to also update these brushes when it detects they’ve changed at the system level. This is why the {ThemeResource} markup extension is used here.