The Windows 11 taskbar styling guide

Table of contents

• Introduction
  • Finding targets
  • Missing customizations
  • Contributing
• Themes
• General
  • Taskbar size
  • Taskbar background
  • Taskbar border
• Task list
  • Start button image
  • Hide the start button
  • Task list buttons size
  • Task list buttons corner radius
  • Task list labels
  • Task list labels font
  • Task list running indicator
• Notification area (system tray)
  • Tray icons size
  • Tray icons size (system icons)
  • Tray icons spacing
  • Tray icons padding
  • Tray icons padding (system icons)
  • Hide the network icon
  • Hide the volume icon
  • Chevron icon width
  • Clock
  • Hide the notification bell icon
  • Copilot button image
  • Hide the "Show Desktop" button
• Colors
  • Solid color
  • Accent colors
  • Transparent color
  • Acrylic effect as color
  • Mica effect as color
  • Gradient as color
  • Image as color

Introduction

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.

Finding Targets

How to find targets using UWPSpy.

Missing customizations

If you're looking for a customization that is not listed here, please open an issue.

Contributing

If you have a taskbar styling customization or theme that you would like to share, please submit a pull request.

Themes

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

General

Taskbar size

Use the Taskbar height and icon size mod.

Taskbar background

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).

Taskbar border

Target:

Rectangle#BackgroundStroke

It can be customized in the same way as the background, see Taskbar background.

Task list

Start button image

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 with Stretch="None").

Hide the start button

Target:

Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton]

Style:

Visibility=Collapsed

Task list buttons size

Use the Taskbar height and icon size mod.

Task list buttons corner radius

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.

Task list labels

Various task list label customizations are available in the Taskbar Labels for Windows 11 mod.

Task list labels font

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.

Task list running indicator

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.

Notification area (system tray)

Tray icons size

Target:

SystemTray.ImageIconContent > Grid#ContainerGrid > Image

Styles:

Width=<size>

Height=<size>

Replace <size> with the desired size. Default: 16.

Tray icons size (system icons)

Target:

SystemTray.TextIconContent > Grid#ContainerGrid > SystemTray.AdaptiveTextBlock#Base > TextBlock#InnerTextBlock

Style:

FontSize=<size>

Replace <size> with the desired size. Default: 32.

Tray icons spacing

Target:

SystemTray.NotifyIconView#NotifyItemIcon

Style:

MinWidth=<width>

Replace <width> with the desired width for the icon and the spacing. Default: 32.

Tray icons padding

Target:

SystemTray.ImageIconContent > Grid#ContainerGrid

Style:

Padding=<padding>

To reduce the spacing even more, replace <padding> with the desired padding. Default: 4,0.

Tray icons padding (system icons)

Target:

SystemTray.TextIconContent > Grid#ContainerGrid

Style:

Padding=<padding>

Replace <padding> with the desired padding. Default: 4,0.

Hide the network icon

Target:

SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[1] > SystemTray.IconView > Grid > Grid

Style:

Visibility=Collapsed

Hide the volume icon

Target:

SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[2] > SystemTray.IconView > Grid > Grid

Style:

Visibility=Collapsed

Chevron icon width

Target:

SystemTray.ChevronIconView

Style:

MinWidth=<width>

Replace <width> with the desired width. Default: 32.

Clock

Clock customizations are available in the Taskbar Clock Customization mod.

Hide the notification bell icon

Target:

SystemTray.OmniButton#NotificationCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter > SystemTray.IconView#SystemTrayIcon > Grid > Grid > SystemTray.TextIconContent

Style:

Visibility=Collapsed

Copilot button image

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.

Hide the "Show Desktop" button

Target:

SystemTray.Stack#ShowDesktopStack

Style:

Visibility=Collapsed

Colors

In the following examples we're gonna use Fill as an example, but this also works for other properties that accept colors like Background.

Solid color

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.

Accent colors

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" />

Transparent color

To have a fully transparent background, use the following style:

Fill=Transparent

Acrylic effect as color

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" />

Mica effect as color

[!NOTE]
Unfortunately I haven't figured this out yet. If you have any info please contribute by making a pull request.

Gradient as color

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>

Image as color

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.