WindhawkWindows 11 Start Menu Styler
Customize the start menu with themes contributed by others or create your own.
Also check out the Windows 11 Taskbar 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:
More themes can be found in the Themes section of The Windows 11 start menu 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 start menu'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: StartResources.xbf.
The UWPSpy tool can be used to inspect the start menu control elements in real time, and experiment with various styles.
For a collection of commonly requested start menu styling customizations, check out The Windows 11 start menu 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
StartMenu.StartInnerFrame 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.
Search WebView styles
While the start menu uses WinUI for its user interface, most of the search
content (all but the top search bar) is a WebView element. To style the search
WebView, CSS targets and styles can be used. For example, to set a red
background, the target body and the style background: red !important can be
used.
Search WebView custom JavaScript code
Custom JavaScript code can be injected into the search content WebView. One use case example is loading the DOM Inspector script to inspect the search content elements:
The following JavaScript code can be used to load a bundled version of DOM Inspector:
const s=document.createElement('script');s.setAttribute('src','https://m417z.github.io/DOM-inspector/acid-dom/bundled.js');document.head.appendChild(s);
To reset all side-effects of the injected scripts, clear the custom code in the mod settings and then terminate the search host process. It will be relaunched automatically by Windows.
Resource variables
Some variables, such as size and padding for various controls, are defined as resource variables.
Implementation notes
The VisualTreeWatcher implementation is based on the ExplorerTAP code from the TranslucentTB project.