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 |  |
| DockLike |  |
| WinVista |  |
| CleanSlate |  |
| Lucent |  |
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. See colors section for all
options (e.g. if you want blurred background effect).
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:
ActiveRunningIndicatorInactiveRunningIndicatorRequestingAttentionRunningIndicator
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
In the following examples we're gonna use Fill as an example, but this also
works for other properties that accept colors like Background.
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.
A Color can also be a ThemeResource or StaticResource. There are many such
styles built into Windows.
Fill:=<SolidColorBrush Color="{ThemeResource SystemAccentColor}" Opacity="0.8" />
Accent colors have different lightness available, like SystemAccentColorLight2
or SystemAccentColorDark1. The word Light or Dark is appended at end with
a number ranging from 1-3. Check out the official Microsoft
docs
for all variations.
Fill:=<SolidColorBrush Color="{ThemeResource SystemAccentColorDark2}" Opacity="0.5" />
To have a fully transparent background, use the following style:
Fill=Transparent
In order to have an acrylic effect (a blurred background) you can use
AcrylicBrush, this comes with TintOpacity which defines how much of the
color needs to be applied.
Fill:=<AcrylicBrush TintColor="Black" TintOpacity="0.8" />
You can also mix Acrylic with a variation of an accent color for a more dynamic look that fits current theme.
Fill:=<AcrylicBrush TintColor="{ThemeResource SystemAccentColorDark2}" TintOpacity="0.3" />
Note
Unfortunately I haven't figured this out yet. If you have any info please contribute by making a pull request.
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.
