Update acrylic theme resources

Proposal: Update acrylic theme resources

Summary

Update some existing AcrylicBrush theme resources, add a few more, and update controls to reference correct resources.

Proposed changes

1. Update SystemControlTransientBackgroundBrush To take advantage of the (not so new) TintLuminosityOpacity property, update the existing SystemControlTransientBackgroundBrush to use new values.

| TintColor | TintOpacity | TintLuminosityOpacity | FallbackColor | BackgroundSource – | – | – | – | – | – Light theme | #FCFCFC | 0.0 | 0.85 | #FCFCFC | HostBackdrop Dark theme | #2C2C2C | 0.15 | 0.96 | #2C2C2C | HostBackdrop

1. Add new theme resources 2.1 Create SystemControlTransientAcrylicElementBrush using the following properties (all values are the same as above with the exception of BackgroundSource).

| TintColor | TintOpacity | TintLuminosityOpacity | FallbackColor | BackgroundSource – | – | – | – | – | – Light theme | #FCFCFC | 0.0 | 0.85 | #FCFCFC | Backdrop Dark theme | #2C2C2C | 0.15 | 0.96 | #2C2C2C | Backdrop

2.1.1 Update NavigationViewDefaultPaneBackground, DefaultCommandBarFlyoutCommandBarStyle.Background, NavigationViewTopPaneBackground to all use the new SystemControlTransientAcrylicElementBrush instead of their current acrylic resources.

2.2 Create SystemControlTransientBackgroundInverseBrush using the following properties (same as above but reversed per theme).

| TintColor | TintOpacity | TintLuminosityOpacity | FallbackColor | BackgroundSource – | – | – | – | – | – Light theme | #2C2C2C | 0.15 | 0.96 | #2C2C2C | HostBackdrop Dark theme | #FCFCFC | 0.0 | 0.85 | #FCFCFC | HostBackdrop

2.3 Create SystemControlBaseAcrylicBrush

| TintColor | TintOpacity | TintLuminosityOpacity | FallbackColor | BackgroundSource – | – | – | – | – | – Light theme | #F3F3F3 | 0.0 | 0.9 | #F3F3F3 | HostBackdrop Dark theme | #202020 | 0.0 | 0.96 | #202020 | HostBackdrop

2.4 Create a new SolidColorBrush named SystemControlDefaultBrighteningBrush

| Fill color | Opacity – | – | – Light theme | #FFFFFF | 0.5 Dark theme | #FFFFFF | 0.0419

Down-level behavior

The updated values described above rely on the TintLuminocityOpacity property, which was added in 19H1. Therefore, we will need to introduce a new AcrylicBrush_19h1_themeresources.xaml (or similar name) with new resources. We’ll also need to add new resources into the existing AcrylicBrush_rs2_themeresources.xaml and AcrylicBrush_rs1_themeresources.xaml files. For the RS2 dictionary, we’ll need to provide alternative values for these AcrylicBrush resources.

Proposed RS2 alternative values:

<!-- Light theme -->
        <muxm:AcrylicBrush x:Key="SystemControlTransientBackgroundBrush" TintColor="#FCFCFC" TintOpacity="0.8" FallbackColor="#FCFCFC" BackgroundSource="HostBackdrop"/>
        <muxm:AcrylicBrush x:Key="SystemControlBaseAcrylicBrush" TintColor="#F3F3F3" TintOpacity="0.8" FallbackColor="#F3F3F3" BackgroundSource="HostBackdrop"/>

<!-- Dark theme -->
        <muxm:AcrylicBrush x:Key="SystemControlTransientBackgroundBrush" TintColor="#1C1C1C" TintOpacity="0.8" FallbackColor="#2C2C2C" BackgroundSource="HostBackdrop" />
        <muxm:AcrylicBrush x:Key="SystemControlBaseAcrylicBrush" TintColor="#1C1C1C" TintOpacity="0.8" FallbackColor="#202020" BackgroundSource="HostBackdrop" />

[chingucoding]

Updated the description with what I believe to be reasonable RS2 alternatives. They don’t look as great as the new values but remain usable.

Awesome! Since there don’t seem to be any open questions on this proposal, I’ll start working on this.

[msftbot[bot]]

🎉This issue was addressed in #3498, which has now been successfully released as Microsoft.UI.Xaml v2.6.0.🎉

Handy links:

• Release Notes
• Official Nuget Release