This is a collection of commonly requested taskbar styling customizations for Windows 11. It is intended to be used with the Windows 11 Taskbar Styler Windhawk mod.
If you're not familiar with Windhawk, here are the steps for installing the mod:
- Download Windhawk from windhawk.net and install it.
- Go to "Mods" in the upper right menu.
- Find and install the "Windows 11 Taskbar Styler" mod.
After installing the mod, open its Settings tab and adjust the styles according to your preferences.
Some customizations are best to be adjusted with other Windhawk mods. Links to those mods are provided where applicable.
See also: The Windows 11 start menu styling guide, The Windows 11 notification center styling guide.
If you're looking for a customization that is not listed here, please open an issue.
If you have a taskbar styling customization or theme that you would like to share, please submit a pull request.
Themes are collections of styles that can be imported into the Windows 11 Taskbar Styler mod. The following themes are available:
Link | Screenshot |
---|---|
WinXP | |
Bubbles | |
TranslucentTaskbar | |
Squircle | |
RosePine |
Use the Taskbar height and icon size mod.
Target:
Rectangle#BackgroundFill
To set a solid color background, use the following style:
Fill=<color>
Replace <color>
with the desired color.
A color can be a name (e.g. Red
) or a hex code (e.g. #FF0000
).
The color can be semi-transparent (e.g. #80FF0000
). To have a fully
transparent background, use Transparent
.
The background can also be a gradient. For example, to have a gradient from yellow to red to blue to lime green, use the following style:
Fill:=<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"><GradientStop Color="Yellow" Offset="0.0" /><GradientStop Color="Red" Offset="0.25" /><GradientStop Color="Blue" Offset="0.75" /><GradientStop Color="LimeGreen" Offset="1.0" /></LinearGradientBrush>
The background can also be an image:
Fill:=<ImageBrush Stretch="UniformToFill" ImageSource="<image>" />
Replace <image>
with your own image, a URL or a local file path.
Target:
Rectangle#BackgroundStroke
It can be customized in the same way as the background, see Taskbar background.
Target:
Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Border#BackgroundElement
Style:
Background:=<ImageBrush Stretch="Uniform" ImageSource="<image>" />
Target:
Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer#Icon
Style:
Visibility=Collapsed
Replace <image>
with your own image, a local file path or a URL, for example:
- Windows 10:
https://i.imgur.com/lEvZStx.png
. - Windows XP:
https://i.imgur.com/RX5DqT3.png
(use withStretch="None"
).
Target:
Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton]
Style:
Visibility=Collapsed
Use the Taskbar height and icon size mod.
Targets:
Taskbar.ExperienceToggleButton
Taskbar.SearchBoxButton
Taskbar.TaskListButton
Style:
CornerRadius=<radius>
Replace <radius>
with the desired radius. A larger value will make the corners
more rounded. Default: 4.
Various task list label customizations are available in the Taskbar Labels for Windows 11 mod.
Target:
TextBlock#LabelControl
Style:
FontFamily=<font>
Replace <font>
with the desired font. For a list of fonts that are shipped
with Windows 11, refer to this page.
Target:
Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Rectangle#RunningIndicator
Various styles can be applied to the running indicator. Here are some examples:
Styles:
Fill=#FFED7014
Height=2
Width=12
Fill@ActiveRunningIndicator=Red
Width@ActiveRunningIndicator=20
The following visual states can be used:
ActiveRunningIndicator
InactiveRunningIndicator
RequestingAttentionRunningIndicator
Some customizations for the running indicator are available in the Taskbar Labels for Windows 11 mod.
Target:
SystemTray.ImageIconContent > Grid#ContainerGrid > Image
Styles:
Width=<size>
Height=<size>
Replace <size>
with the desired size. Default: 16.
Target:
SystemTray.TextIconContent > Grid#ContainerGrid > SystemTray.AdaptiveTextBlock#Base > TextBlock#InnerTextBlock
Style:
FontSize=<size>
Replace <size>
with the desired size. Default: 32.
Target:
SystemTray.NotifyIconView#NotifyItemIcon
Style:
MinWidth=<width>
Replace <width>
with the desired width for the icon and the spacing. Default:
32.
Target:
SystemTray.ImageIconContent > Grid#ContainerGrid
Style:
Padding=<padding>
To reduce the spacing even more, replace <padding>
with the desired padding.
Default: 4,0
.
Target:
SystemTray.TextIconContent > Grid#ContainerGrid
Style:
Padding=<padding>
Replace <padding>
with the desired padding. Default: 4,0
.
Target:
SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[1] > SystemTray.IconView > Grid > Grid
Style:
Visibility=Collapsed
Target:
SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[2] > SystemTray.IconView > Grid > Grid
Style:
Visibility=Collapsed
Target:
SystemTray.ChevronIconView
Style:
MinWidth=<width>
Replace <width>
with the desired width. Default: 32.
Clock customizations are available in the Taskbar Clock Customization mod.
Target:
SystemTray.OmniButton#NotificationCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter > SystemTray.IconView#SystemTrayIcon > Grid > Grid > SystemTray.TextIconContent
Style:
Visibility=Collapsed
Target:
ContentPresenter#ContentPresenter > Grid#ContentGrid > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer#LottieIcon
Style:
Visibility=Collapsed
Target:
SystemTray.CopilotIcon#CopilotIcon > Grid#ContainerGrid > Border#BackgroundBorder
Style:
Background:=<ImageBrush Stretch="None" ImageSource="<image>" />
- Copilot icon without preview label:
https://i.imgur.com/lfwEWzI.png
. - Old Copilot icon:
https://i.imgur.com/Z6eCNH3.png
.
Target:
SystemTray.Stack#ShowDesktopStack
Style:
Visibility=Collapsed