Windows 11 Taskbar Styler

Customize the taskbar with themes contributed by others or create your own.

Also check out the Windows 11 Start Menu Styler, Windows 11 Notification Center Styler mods.

Themes

Themes are collections of styles. The following themes are integrated into the mod and can be selected in the settings:

TranslucentTaskbar

DockLike

SimplyTransparent

Squircle

Matter

WinXP

Bubbles

RosePine

WinVista

CleanSlate

Lucent

21996Taskbar

BottomDensy

TaskbarXII

xdark

Windows7

Aeris

Plasma

WindowGlass

More themes can be found in the Themes section of The Windows 11 taskbar styling guide. Contributions of new themes are welcome!

Advanced styling

Aside from themes, the settings have two sections: control styles and resource variables. Control styles allow to override styles, such as size and color, for the target elements. Resource variables allow to override predefined variables. For a more detailed explanation and examples, refer to the sections below.

The taskbar's XAML resources can help find out which elements and resource variables can be customized. To the best of my knowledge, there are no public tools that are able to decode the resource files of recent Windows versions, but here are XAML resources which were obtained via other means for your convenience: TaskbarResources.xbf and SystemTrayResources.xbf.

The UWPSpy tool can be used to inspect the taskbar's control elements in real time, and experiment with various styles.

For a collection of commonly requested taskbar styling customizations, check out The Windows 11 taskbar styling guide.

Control styles

Each entry has a target control and a list of styles.

The target control is written as Class or Class#Name, i.e. the target control class name (the tag name in XAML resource files), such as Taskbar.TaskListButton or Rectangle, optionally followed by # and the target control's name (x:Name attribute in XAML resource files). The target control can also include:

• Child control index, for example: Class#Name[2] will only match the relevant control that's also the second child among all of its parent's child controls.
• Control properties, for example: Class#Name[Property1=Value1][Property2=Value2].
• Parent controls, separated by >, for example: ParentClass#ParentName > Class#Name.
• Visual state group name, for example: Class#Name@VisualStateGroupName. It can be specified for the target control or for a parent control, but can be specified only once per target. The visual state group can be used in styles as specified below.

Note: The target is evaluated only once. If, for example, the index or the properties of a control change, the target conditions aren't evaluated again.

Each style is written as Style=Value, for example: Height=5. The := syntax can be used to use XAML syntax, for example: Fill:=<SolidColorBrush Color="Red"/>. Specifying an empty value with the XAML syntax will clear the property value, for example: Fill:=. In addition, a visual state can be specified as following: Style@VisualState=Value, in which case the style will only apply when the visual state group specified in the target matches the specified visual state.

For the XAML syntax, in addition to the built-in taskbar objects, the mod provides a built-in blur brush via the WindhawkBlur object, which supports the BlurAmount, TintColor, and TintOpacity properties. For example: Fill:=<WindhawkBlur BlurAmount="10" TintColor="#80FF00FF"/>. Theme resources are also supported, for example: Fill:=<WindhawkBlur BlurAmount="18" TintColor="{ThemeResource SystemAccentColorDark1}" TintOpacity="0.5"/>.

Targets and styles starting with two slashes (//) are ignored. This can be useful for temporarily disabling a target or style.

A couple of practical examples:

Task list button corner radius

• Target: Taskbar.TaskListButton
• Style: CornerRadius=0

Running indicator size and color

• Target: Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Rectangle#RunningIndicator
• Styles:
  • Fill=#FFED7014
  • Height=2
  • Width=12
  • Fill@ActiveRunningIndicator=Red
  • Width@ActiveRunningIndicator=20

Task list button background gradient

• Targets:
  • Taskbar.TaskListButtonPanel > Border#BackgroundElement
  • Taskbar.TaskListLabeledButtonPanel > Border#BackgroundElement
• Style: Background:=<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"><GradientStop Offset="0" Color="DodgerBlue"/><GradientStop Offset="1" Color="Yellow"/></LinearGradientBrush>

Hide the start button

• Target: Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton]
• Style: Visibility=Collapsed

Hide the network notification icon

• Target: SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[1] > SystemTray.IconView > Grid > Grid
• Style: Visibility=Collapsed

Note: To hide the volume notification icon instead, use [2] instead of [1].

Resource variables

Some variables, such as size and padding for various controls, are defined as resource variables. Here are several examples:

• TaskbarContextMenuMargin: The margin between the taskbar and the start button context menu.

• ContextMenuMargin: The margin between the taskbar and the tray area context menu.

• MediumTaskbarButtonExtent: The width of the taskbar buttons.

Implementation notes

The VisualTreeWatcher implementation is based on the ExplorerTAP code from the TranslucentTB project.

The WindhawkBlur brush object implementation is based on XamlBlurBrush from the TranslucentTB project.