docs/documentation/accent.md
Accent colors provide visual emphasis and brand identity in WPF UI applications. The library manages accent color resources that automatically adapt to light and dark themes.
[!TIP] Use
SystemThemeWatcher.Watch(this)in your main window constructor to automatically sync accent colors with Windows personalization settings.
Use the system's personalization accent color:
using Wpf.Ui.Appearance;
ApplicationAccentColorManager.ApplySystemAccent();
Apply theme and accent together:
using Wpf.Ui.Appearance;
using Wpf.Ui.Controls;
ApplicationThemeManager.Apply(
ApplicationTheme.Dark,
WindowBackdropType.Mica,
updateAccent: true // Automatically applies system accent
);
Available backdrop types: None, Auto, Mica, Acrylic, Tabbed.
[!IMPORTANT] Always use
DynamicResource(notStaticResource) for accent color bindings to receive runtime updates when accent changes.
Set a custom accent color:
ApplicationAccentColorManager.Apply(
Color.FromArgb(0xFF, 0xEE, 0x00, 0xBB),
ApplicationTheme.Dark
);
Retrieve the Windows colorization color programmatically:
Color colorizationColor = ApplicationAccentColorManager.GetColorizationColor();
ApplicationAccentColorManager.Apply(colorizationColor, ApplicationTheme.Dark);
WPF UI provides these accent color resources:
Base accent colors that update when you call ApplicationAccentColorManager.Apply():
SystemAccentColor - Primary system accentSystemAccentColorPrimary - Lighter/darker variant for light/dark themesSystemAccentColorSecondary - More prominent variant (most commonly used)SystemAccentColorTertiary - Strongest variant<Border Background="{DynamicResource SystemAccentColorSecondaryBrush}" />
[!TIP]
SystemAccentColorSecondaryis the most commonly used variant for interactive elements and provides optimal contrast in both light and dark themes.
For text and interactive elements like links:
AccentTextFillColorPrimaryBrush - Primary accent text (rest/hover state)AccentTextFillColorSecondaryBrush - Secondary accent textAccentTextFillColorTertiaryBrush - Tertiary accent text (pressed state)AccentTextFillColorDisabledBrush - Disabled accent text<ui:Anchor
Content="WPF UI Documentation"
NavigateUri="https://wpfui.lepo.co/"
Foreground="{DynamicResource AccentTextFillColorPrimaryBrush}" />
For button backgrounds and filled surfaces:
AccentFillColorDefaultBrush - Default accent fillAccentFillColorSecondaryBrush - Secondary fill (90% opacity)AccentFillColorTertiaryBrush - Tertiary fill (80% opacity)AccentFillColorDisabledBrush - Disabled state fill<Button Background="{DynamicResource AccentFillColorDefaultBrush}" />
For text displayed on accent-colored backgrounds. These resources automatically adjust to black or white based on accent brightness:
TextOnAccentFillColorPrimary - Primary text color on accent backgroundsTextOnAccentFillColorSecondary - Secondary text on accent backgroundsTextOnAccentFillColorDisabled - Disabled text on accent backgrounds[!NOTE] Text colors automatically switch between black and white when accent brightness exceeds 80% HSV to maintain readability.
Accent variants adjust automatically based on the application theme:
Dark Theme:
Light Theme:
[!NOTE] Brightness adjustments are calculated in HSV color space. Negative values darken the color, positive values lighten it.
Specify all accent variants manually:
ApplicationAccentColorManager.Apply(
systemAccent: Color.FromArgb(0xFF, 0x00, 0x78, 0xD4),
primaryAccent: Color.FromArgb(0xFF, 0x00, 0x67, 0xC0),
secondaryAccent: Color.FromArgb(0xFF, 0x00, 0x3E, 0x92),
tertiaryAccent: Color.FromArgb(0xFF, 0x00, 0x1A, 0x68)
);
[!CAUTION] Manually specified accent variants won't automatically adjust when theme changes. Consider using automatic variant generation unless you need precise color control.
Read current accent colors from ApplicationAccentColorManager:
Color currentSystemAccent = ApplicationAccentColorManager.SystemAccent;
Color currentPrimaryAccent = ApplicationAccentColorManager.PrimaryAccent;
Color currentSecondaryAccent = ApplicationAccentColorManager.SecondaryAccent;
Color currentTertiaryAccent = ApplicationAccentColorManager.TertiaryAccent;
Brush accentBrush = ApplicationAccentColorManager.SystemAccentBrush;
Monitor accent changes when theme is applied:
ApplicationThemeManager.Changed += (theme, accent) =>
{
Debug.WriteLine($"Theme changed to {theme}, accent: {accent}");
};
Use SystemThemeWatcher to automatically update theme and accent when Windows settings change:
using Wpf.Ui.Appearance;
public partial class MainWindow : Window
{
public MainWindow()
{
// Watch system theme changes with Mica backdrop and accent updates
SystemThemeWatcher.Watch(this);
InitializeComponent();
}
}
With custom backdrop and accent settings:
SystemThemeWatcher.Watch(
this,
WindowBackdropType.Acrylic,
updateAccents: true
);
Stop watching for theme changes:
SystemThemeWatcher.UnWatch(this);
[!NOTE]
SystemThemeWatchermonitorsWM_WININICHANGEmessages and automatically applies system theme and accent when Windows personalization settings change.