├── README.md └── Themes ├── 21996Taskbar ├── README.md ├── screenshot-overflow.png ├── screenshot-thumbnails.png ├── screenshot.png └── screenshot_legacy.png ├── BottomDensy ├── README.md ├── screenshot.png ├── screenshot_extend.png ├── screenshot_ind.png ├── screenshot_ind_browser.png └── screenshot_ind_extend.png ├── Bubbles ├── README.md └── screenshot.png ├── CleanSlate ├── README.md ├── screenshot-light.png └── screenshot.png ├── DockLike ├── README.md ├── screenshot.png └── screenshot_floating.png ├── Lucent ├── README.md ├── screenshot.png ├── screenshot_light.png ├── screenshot_red.png └── wide_button.png ├── Matter ├── Button.png ├── Left.png ├── README.md ├── Search.png └── screenshot.png ├── RosePine ├── README.md └── screenshot.png ├── SimplyTransparent ├── README.md └── screenshot.png ├── Squircle ├── README.md ├── screenshot-rw.png └── screenshot.png ├── TaskbarXII ├── README.md ├── screenshot.png ├── screenshot_another.png ├── screenshot_section_main.png ├── screenshot_section_systray.png ├── screenshot_widget_disabled.png └── screenshot_widget_enabled.png ├── TranslucentTaskbar ├── README.md └── screenshot.png ├── WinVista ├── README.md └── screenshot.png ├── WinXP ├── Assets │ └── orb.png ├── README.md ├── screenshot-small.png └── screenshot.png ├── Windows7 ├── README.md ├── ThemeResources │ ├── ActiveNormal.png │ ├── AeroPeek.png │ ├── InactiveNormal.png │ ├── InactivePointerOver.png │ ├── clockPointerOver.png │ ├── clockPressed.png │ ├── desktopNormal.png │ ├── desktopPointerOver.png │ ├── desktopPressed.png │ ├── notRunningPointerOver.png │ ├── notRunningPressed.png │ ├── orbHover.png │ ├── orbNormal.png │ ├── orbPressed.png │ ├── overflowNormal.png │ ├── overflowPointerOver.png │ ├── overflowPressed.png │ ├── requestingAttention.png │ ├── search.png │ ├── taskbarBackground.png │ ├── taskview.png │ ├── trayPointerOver.png │ ├── trayPressed.png │ ├── widgetsPointerOver.png │ └── widgetsPressed.png └── screenshot.png └── xdark ├── README.md └── screenshot.png /README.md: -------------------------------------------------------------------------------- 1 | # The Windows 11 taskbar styling guide 2 | 3 | ## Table of contents 4 | 5 | * [Introduction](#introduction) 6 | * [Finding targets](#finding-targets) 7 | * [Missing customizations](#missing-customizations) 8 | * [Contributing](#contributing) 9 | * [Themes](#themes) 10 | * [General](#general) 11 | * [Taskbar size](#taskbar-size) 12 | * [Taskbar background](#taskbar-background) 13 | * [Taskbar border](#taskbar-border) 14 | * [Task list](#task-list) 15 | * [Start button image](#start-button-image) 16 | * [Hide the start button](#hide-the-start-button) 17 | * [Task list buttons size](#task-list-buttons-size) 18 | * [Task list buttons corner radius](#task-list-buttons-corner-radius) 19 | * [Task list labels](#task-list-labels) 20 | * [Task list labels font](#task-list-labels-font) 21 | * [Task list running indicator](#task-list-running-indicator) 22 | * [Notification area (system tray)](#notification-area-system-tray) 23 | * [Tray icons size](#tray-icons-size) 24 | * [Tray icons size (system icons)](#tray-icons-size-system-icons) 25 | * [Tray icons spacing](#tray-icons-spacing) 26 | * [Tray icons padding](#tray-icons-padding) 27 | * [Tray icons padding (system icons)](#tray-icons-padding-system-icons) 28 | * [Hide the network icon](#hide-the-network-icon) 29 | * [Hide the volume icon](#hide-the-volume-icon) 30 | * [Chevron icon width](#chevron-icon-width) 31 | * [Clock](#clock) 32 | * [Hide the notification bell icon](#hide-the-notification-bell-icon) 33 | * [Copilot button image](#copilot-button-image) 34 | * [Hide the "Show Desktop" button](#hide-the-show-desktop-button) 35 | * [Transforms](#transforms) 36 | * [Translate](#translate) 37 | * [Rotate](#rotate) 38 | * [Scale](#scale) 39 | * [Skew](#skew) 40 | * [Other properties and attributes](#other-properties-and-attributes) 41 | * [Colors](#colors) 42 | * [Solid color](#solid-color) 43 | * [Accent colors](#accent-colors) 44 | * [Transparent color](#transparent-color) 45 | * [Acrylic effect as color](#acrylic-effect-as-color) 46 | * [WindhawkBlur effect as color](#windhawkblur-effect-as-color) 47 | * [Mica effect as color](#mica-effect-as-color) 48 | * [Gradient as color](#gradient-as-color) 49 | * [Image as color](#image-as-color) 50 | 51 | ## Introduction 52 | 53 | This is a collection of commonly requested taskbar styling customizations for 54 | Windows 11. It is intended to be used with the [Windows 11 Taskbar 55 | Styler](https://windhawk.net/mods/windows-11-taskbar-styler) Windhawk mod. 56 | 57 | If you're not familiar with Windhawk, here are the steps for installing the mod: 58 | 59 | * Download Windhawk from [windhawk.net](https://windhawk.net/) and install it. 60 | * Go to "Mods" in the upper right menu. 61 | * Find and install the "Windows 11 Taskbar Styler" mod. 62 | 63 | After installing the mod, open its Settings tab and adjust the styles according 64 | to your preferences. 65 | 66 | Some customizations are best to be adjusted with other Windhawk mods. Links to 67 | those mods are provided where applicable. 68 | 69 | **See also**: [The Windows 11 start menu styling 70 | guide](https://github.com/ramensoftware/windows-11-start-menu-styling-guide/blob/main/README.md), 71 | [The Windows 11 notification center styling 72 | guide](https://github.com/ramensoftware/windows-11-notification-center-styling-guide/blob/main/README.md). 73 | 74 | ### Finding targets 75 | 76 | [How to find targets using UWPSpy](https://github.com/bbmaster123/FWFU/blob/main/uwpspy.md). 77 | 78 | ### Missing customizations 79 | 80 | If you're looking for a customization that is not listed here, please [open an 81 | issue](https://github.com/ramensoftware/windows-11-taskbar-styling-guide/issues/new). 82 | 83 | ### Contributing 84 | 85 | If you have a taskbar styling customization or theme that you would like to 86 | share, please submit a pull request. 87 | 88 | ## Themes 89 | 90 | Themes are collections of styles that can be imported into the Windows 11 91 | Taskbar Styler mod. The following themes are available: 92 | 93 | | Link | Screenshot 94 | | ----- | ---------- 95 | | [WinXP](Themes/WinXP/README.md) | [![WinXP](Themes/WinXP/screenshot-small.png)](Themes/WinXP/screenshot.png) 96 | | [Bubbles](Themes/Bubbles/README.md) | [![Bubbles](Themes/Bubbles/screenshot.png)](Themes/Bubbles/screenshot.png) 97 | | [TranslucentTaskbar](Themes/TranslucentTaskbar/README.md) | [![TranslucentTaskbar](Themes/TranslucentTaskbar/screenshot.png)](Themes/TranslucentTaskbar/screenshot.png) 98 | | [Squircle](Themes/Squircle/README.md) | [![Squircle](Themes/Squircle/screenshot.png)](Themes/Squircle/screenshot.png) 99 | | [RosePine](Themes/RosePine/README.md) | [![RosePine](Themes/RosePine/screenshot.png)](Themes/RosePine/screenshot.png) 100 | | [DockLike](Themes/DockLike/README.md) | [![DockLike](Themes/DockLike/screenshot.png)](Themes/DockLike/screenshot.png) 101 | | [WinVista](Themes/WinVista/README.md) | [![WinVista](Themes/WinVista/screenshot.png)](Themes/WinVista/screenshot.png) 102 | | [CleanSlate](Themes/CleanSlate/README.md) | [![CleanSlate](Themes/CleanSlate/screenshot.png)](Themes/CleanSlate/screenshot.png) 103 | | [Lucent](Themes/Lucent/README.md) | [![Lucent](Themes/Lucent/screenshot.png)](Themes/Lucent/screenshot.png) 104 | | [21996Taskbar](Themes/21996Taskbar/README.md) | [![21996Taskbar](Themes/21996Taskbar/screenshot.png)](Themes/21996Taskbar/screenshot.png) 105 | | [BottomDensy](Themes/BottomDensy/README.md) | [![BottomDensy](Themes/BottomDensy/screenshot.png)](Themes/BottomDensy/screenshot.png) 106 | | [TaskbarXII](Themes/TaskbarXII/README.md) | [![TaskbarXII](Themes/TaskbarXII/screenshot.png)](Themes/TaskbarXII/screenshot.png) 107 | | [xdark](Themes/xdark/README.md) | [![xdark](Themes/xdark/screenshot.png)](Themes/xdark/screenshot.png) 108 | | [Matter](Themes/Matter/README.md) | [![Matter](Themes/Matter/screenshot.png)](Themes/Matter/screenshot.png) 109 | | [SimplyTransparent](Themes/SimplyTransparent/README.md) | [![SimplyTransparent](Themes/SimplyTransparent/screenshot.png)](Themes/SimplyTransparent/screenshot.png) 110 | | [Windows7](Themes/Windows7/README.md) | [![Windows7](Themes/Windows7/screenshot.png)](Themes/Windows7/screenshot.png) 111 | 112 | ## General 113 | 114 | ### Taskbar size 115 | 116 | Use the [Taskbar height and icon 117 | size](https://windhawk.net/mods/taskbar-icon-size) mod. 118 | 119 | ### Taskbar background 120 | 121 | Target: 122 | ``` 123 | Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill 124 | ``` 125 | 126 | To set a solid color background, use the following style: 127 | ``` 128 | Fill= 129 | ``` 130 | 131 | Replace `` with the desired color. See [colors section](#colors) for all 132 | options (e.g. if you want blurred background effect). 133 | 134 | > [!NOTE] 135 | > For some themes, a different target has to be used to customize the taskbar 136 | > background: 137 | > * The [WinXP](Themes/WinXP/README.md) theme spans the taskbar border over the 138 | > full taskbar height. To customize the background, use the 139 | > `Rectangle#BackgroundStroke` target. 140 | > * The [DockLike](Themes/DockLike/README.md) theme hides the standard taskbar 141 | > background element. To customize the background, use the `Grid#RootGrid` 142 | > target and the `Background=` style. 143 | 144 | > [!NOTE] 145 | > There's [a known 146 | > limitation](https://github.com/ramensoftware/windhawk-mods/issues/742) which 147 | > makes some styles, such as an acrylic background, only work if there's a 148 | > single taskbar. The [Taskbar Background 149 | > Helper](https://windhawk.net/mods/taskbar-background-helper) mod can be used 150 | > as a workaround. 151 | 152 | ### Taskbar border 153 | 154 | Target: 155 | ``` 156 | Rectangle#BackgroundStroke 157 | ``` 158 | 159 | It can be customized in the same way as the background, see [Taskbar 160 | background](#taskbar-background). 161 | 162 | ## Task list 163 | 164 | ### Start button image 165 | 166 | Target: 167 | ``` 168 | Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Border#BackgroundElement 169 | ``` 170 | Style: 171 | ``` 172 | Background:= 173 | ``` 174 | Target: 175 | ``` 176 | Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer#Icon 177 | ``` 178 | Style: 179 | ``` 180 | Visibility=Collapsed 181 | ``` 182 | 183 | Replace `` with your own image, a local file path or a URL, for example: 184 | * Windows 10: `https://i.imgur.com/lEvZStx.png`. 185 | * Windows XP: `https://i.imgur.com/RX5DqT3.png` (use with `Stretch="None"`). 186 | 187 | To set a different image for each Start button state - normal, hovered, pressed - 188 | refer to [this 189 | comment](https://github.com/ramensoftware/windows-11-taskbar-styling-guide/issues/153#issuecomment-2569892017). 190 | 191 | ### Hide the start button 192 | 193 | Target: 194 | ``` 195 | Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] 196 | ``` 197 | Style: 198 | ``` 199 | Visibility=Collapsed 200 | ``` 201 | 202 | ### Task list buttons size 203 | 204 | Use the [Taskbar height and icon 205 | size](https://windhawk.net/mods/taskbar-icon-size) mod. 206 | 207 | ### Task list buttons corner radius 208 | 209 | Targets: 210 | ``` 211 | Taskbar.ExperienceToggleButton 212 | ``` 213 | ``` 214 | Taskbar.SearchBoxButton 215 | ``` 216 | ``` 217 | Taskbar.TaskListButton 218 | ``` 219 | Style: 220 | ``` 221 | CornerRadius= 222 | ``` 223 | 224 | Replace `` with the desired radius. A larger value will make the corners 225 | more rounded. Default: 4. 226 | 227 | ### Task list labels 228 | 229 | Various task list label customizations are available in the [Taskbar Labels for 230 | Windows 11](https://windhawk.net/mods/taskbar-labels) mod. 231 | 232 | ### Task list labels font 233 | 234 | Target: 235 | ``` 236 | TextBlock#LabelControl 237 | ``` 238 | Style: 239 | ``` 240 | FontFamily= 241 | ``` 242 | 243 | Replace `` with the desired font. For a list of fonts that are shipped 244 | with Windows 11, refer to [this page]( 245 | https://learn.microsoft.com/en-us/typography/fonts/windows_11_font_list). 246 | 247 | ### Task list running indicator 248 | 249 | Target: 250 | ``` 251 | Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Rectangle#RunningIndicator 252 | ``` 253 | 254 | Various styles can be applied to the running indicator. Here are some examples: 255 | 256 | Styles: 257 | ``` 258 | Fill=#FFED7014 259 | ``` 260 | ``` 261 | Height=2 262 | ``` 263 | ``` 264 | Width=12 265 | ``` 266 | ``` 267 | Fill@ActiveRunningIndicator=Red 268 | ``` 269 | ``` 270 | Width@ActiveRunningIndicator=20 271 | ``` 272 | 273 | The following visual states[^1] can be used: 274 | * `ActiveRunningIndicator` 275 | * `InactiveRunningIndicator` 276 | * `RequestingAttentionRunningIndicator` 277 | 278 | Some customizations for the running indicator are available in the [Taskbar 279 | Labels for Windows 11](https://windhawk.net/mods/taskbar-labels) mod. 280 | 281 | ## Notification area (system tray) 282 | 283 | ### Tray icons size 284 | 285 | Target: 286 | ``` 287 | SystemTray.ImageIconContent > Grid#ContainerGrid > Image 288 | ``` 289 | Styles: 290 | ``` 291 | Width= 292 | ``` 293 | ``` 294 | Height= 295 | ``` 296 | 297 | Replace `` with the desired size. Default: 16. 298 | 299 | ### Tray icons size (system icons) 300 | 301 | Target: 302 | ``` 303 | SystemTray.TextIconContent > Grid#ContainerGrid > SystemTray.AdaptiveTextBlock#Base > TextBlock#InnerTextBlock 304 | ``` 305 | Style: 306 | ``` 307 | FontSize= 308 | ``` 309 | 310 | Replace `` with the desired size. Default: 32. 311 | 312 | ### Tray icons spacing 313 | 314 | Target: 315 | ``` 316 | SystemTray.NotifyIconView#NotifyItemIcon 317 | ``` 318 | Style: 319 | ``` 320 | MinWidth= 321 | ``` 322 | 323 | Replace `` with the desired width for the icon and the spacing. Default: 324 | 32. 325 | 326 | ### Tray icons padding 327 | 328 | Target: 329 | ``` 330 | SystemTray.ImageIconContent > Grid#ContainerGrid 331 | ``` 332 | Style: 333 | ``` 334 | Padding= 335 | ``` 336 | 337 | To reduce the spacing even more, replace `` with the desired padding. 338 | Default: `4,0`. 339 | 340 | ### Tray icons padding (system icons) 341 | 342 | Target: 343 | ``` 344 | SystemTray.TextIconContent > Grid#ContainerGrid 345 | ``` 346 | Style: 347 | ``` 348 | Padding= 349 | ``` 350 | 351 | Replace `` with the desired padding. Default: `4,0`. 352 | 353 | ### Hide the network icon 354 | 355 | Target: 356 | ``` 357 | SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[1] > SystemTray.IconView > Grid > Grid 358 | ``` 359 | Style: 360 | ``` 361 | Visibility=Collapsed 362 | ``` 363 | 364 | ### Hide the volume icon 365 | 366 | Target: 367 | ``` 368 | SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[2] > SystemTray.IconView > Grid > Grid 369 | ``` 370 | Style: 371 | ``` 372 | Visibility=Collapsed 373 | ``` 374 | 375 | ### Chevron icon width 376 | 377 | Target: 378 | ``` 379 | SystemTray.ChevronIconView 380 | ``` 381 | Style: 382 | ``` 383 | MinWidth= 384 | ``` 385 | 386 | Replace `` with the desired width. Default: 32. 387 | 388 | ### Clock 389 | 390 | Clock customizations are available in the [Taskbar Clock 391 | Customization](https://windhawk.net/mods/taskbar-clock-customization) mod. 392 | 393 | ### Hide the notification bell icon 394 | 395 | Target: 396 | ``` 397 | SystemTray.OmniButton#NotificationCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter > SystemTray.IconView#SystemTrayIcon > Grid > Grid > SystemTray.TextIconContent 398 | ``` 399 | Style: 400 | ``` 401 | Visibility=Collapsed 402 | ``` 403 | 404 | ### Copilot button image 405 | 406 | Target: 407 | ``` 408 | ContentPresenter#ContentPresenter > Grid#ContentGrid > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer#LottieIcon 409 | ``` 410 | Style: 411 | ``` 412 | Visibility=Collapsed 413 | ``` 414 | Target: 415 | ``` 416 | SystemTray.CopilotIcon#CopilotIcon > Grid#ContainerGrid > Border#BackgroundBorder 417 | ``` 418 | Style: 419 | ``` 420 | Background:= 421 | ``` 422 | 423 | * Copilot icon without preview label: `https://i.imgur.com/lfwEWzI.png`. 424 | * Old Copilot icon: `https://i.imgur.com/Z6eCNH3.png`. 425 | 426 | ### Hide the "Show Desktop" button 427 | 428 | Target: 429 | ``` 430 | SystemTray.Stack#ShowDesktopStack 431 | ``` 432 | Style: 433 | ``` 434 | Visibility=Collapsed 435 | ``` 436 | 437 | ## Transforms 438 | 439 | You can use transformation styles to translate, rotate, scale, or skew elements. 440 | 441 | > [!TIP] 442 | > **Should I use `RenderTransform` or `Transform3D`?** 443 | > 444 | > For 2D transformations, it is best to stick to `RenderTransform` in most cases. Using `Transform3D` for 2D transformations can cause elements to become blurry. For 3D transformations, you must use `Transform3D`. 445 | 446 | > [!TIP] 447 | > You can mix and match transformations when using `Transform3D`! You can also use `RenderTransform` and `Transform3D` together. 448 | > 449 | > For example: `Transform3D:=` 450 | 451 | ### Translate 452 | 453 | ``` 454 | RenderTransform:= 455 | ``` 456 | 457 | -- or -- 458 | 459 | ``` 460 | Transform3D:= 461 | ``` 462 | 463 | ### Rotate 464 | 465 | ``` 466 | RenderTransform:= 467 | ``` 468 | 469 | -- or -- 470 | 471 | ``` 472 | Transform3D:= 473 | ``` 474 | 475 | - `X`: 3D vertical rotation. 476 | - `Y`: 3D horizontal rotation. 477 | - `Z`: 2D rotation. 478 | 479 | ### Scale 480 | 481 | ``` 482 | RenderTransform:= 483 | ``` 484 | 485 | -- or -- 486 | 487 | ``` 488 | Transform3D:= 489 | ``` 490 | 491 | ### Skew 492 | 493 | ``` 494 | RenderTransform:= 495 | ``` 496 | 497 | ### Other properties and attributes 498 | - Applies to Rotate, Scale and Skew: 499 | - `CenterX`: Offsets the transform's origin on the X axis. 500 | - `CenterY`: Offsets the transform's origin on the Y axis. 501 | - `CenterZ`: Offsets the transform's origin on the Z axis. (Only for `Transform3D`) 502 | 503 | Example: 504 | ``` 505 | RenderTransform:= 506 | ``` 507 | - `RenderTransformOrigin` 508 | - Applies to `RenderTransform` only, `Transform3D` does not support this attribute. It is a separate attribute and is not set inside of the `RenderTransform` like `CenterX/Y/Z`. 509 | - Sets the transform origin relative to its target's width and height. Format is `X,Y` and both numbers range from 0-1. 510 | 511 | Example: 512 | 513 | ``` 514 | RenderTransformOrigin=0.5,0.5 515 | ``` 516 | This centers the transform's origin. 517 | - `TransformGroup` 518 | - Applies to `RenderTransform` only, `Transform3D` does not support this attribute. It is a separate attribute and is not set inside of the `RenderTransform` like `CenterX/Y/Z`. 519 | - Allows you to combine RenderTransforms together into one style, mimicking Transform3D's functionality. 520 | 521 | Example: 522 | ``` 523 | RenderTransform:= 524 | ``` 525 | ## Colors 526 | 527 | In the following examples we're gonna use `Fill` as an example, but this also 528 | works for other properties that accept colors like `Background`. 529 | 530 | ### Solid color 531 | 532 | ``` 533 | Fill= 534 | ``` 535 | 536 | Replace `` with the desired color. 537 | 538 | A color can be a name (e.g. `Red`) or a hex code (e.g. `#FF0000`). 539 | 540 | The color can be semi-transparent (e.g. `#80FF0000`). To have a fully 541 | transparent background, use `Transparent`. 542 | 543 | ### Accent colors 544 | 545 | A Color can also be a `ThemeResource` or `StaticResource`. There are many such 546 | styles built into Windows. 547 | 548 | ``` 549 | Fill:= 550 | ``` 551 | 552 | Accent colors have different lightness available, like `SystemAccentColorLight2` 553 | or `SystemAccentColorDark1`. The word `Light` or `Dark` is appended at end with 554 | a number ranging from 1-3. Check out [the official Microsoft 555 | docs](https://learn.microsoft.com/en-us/windows/apps/design/style/color#accent-color-palette) 556 | for all variations. 557 | 558 | ``` 559 | Fill:= 560 | ``` 561 | 562 | ### Transparent color 563 | 564 | To have a fully transparent background, use the following style: 565 | 566 | ``` 567 | Fill=Transparent 568 | ``` 569 | 570 | ### Acrylic effect as color 571 | 572 | In order to have an acrylic effect (a blurred background) you can use 573 | `AcrylicBrush`, this comes with `TintOpacity` which defines how much of the 574 | color needs to be applied. 575 | 576 | ``` 577 | Fill:= 578 | ``` 579 | 580 | You can also mix acrylic with a variation of an accent color for a more dynamic 581 | look that fits current theme. 582 | 583 | ``` 584 | Fill:= 585 | ``` 586 | 587 | ### WindhawkBlur effect as color 588 | 589 | An alternative to Acrylic is the mod's own blur implementation called `WindhawkBlur`. It differs from Acrylic because it has a customizable blur radius and has fewer bugs (e.g. https://github.com/ramensoftware/windhawk-mods/issues/742). 590 | 591 | ``` 592 | Fill:= 593 | ``` 594 | _This example sets a blur that is tinted with red at 50% opacity._ 595 | 596 | - `BlurAmount`: Radius of blur effect (set to 30 to mimic Acrylic). 597 | - `TintColor`: Hex color in `#AARRGGBB` format that is applied to the blur. 598 | - `ThemeResource` colors and color names (e.g. `Red`) are currently not supported. 599 | 600 | ### Mica effect as color 601 | 602 | > [!NOTE] 603 | > Unfortunately I haven't figured this out yet. If you have any info please 604 | > contribute by making a pull request. 605 | 606 | ### Gradient as color 607 | 608 | The background can also be a gradient. For example, to have a gradient from 609 | yellow to red to blue to lime green, use the following style: 610 | 611 | ``` 612 | Fill:= 613 | ``` 614 | 615 | ### Image as color 616 | 617 | The background can also be an image: 618 | 619 | ``` 620 | Fill:= 621 | ``` 622 | 623 | Replace `` with your own image, a URL or a local file path. 624 | 625 | [^1]: See [Finding targets](#finding-targets) on how to use UWPSpy to find all of the available visual states for an element 626 | -------------------------------------------------------------------------------- /Themes/21996Taskbar/README.md: -------------------------------------------------------------------------------- 1 | # 21996 Taskbar theme for Windows 11 Taskbar Styler 2 | 3 | This theme tries to recreate earlier versions of the Windows 11 Taskbar, which includes: 4 | * Windows 10 style system tray and tray overflow 5 | * 21H2 search icon and early version of the taskbar searchbox 6 | * Windows 10 Window thumbnails (For newer 11 builds which contain the new Window Thumbnails) 7 | * 21370-22000.9-like acrylic with accent color support 8 | # 9 | **Author**: [Tails](https://github.com/milesprower2293) 10 | # 11 | **Taskbar** 12 | 13 | [![Taskbar](screenshot.png)](screenshot.png) 14 | 15 | **Tray Overflow** 16 | 17 | [![Taskbar](screenshot-overflow.png)](screenshot-overflow.png) 18 | 19 | **Window Thumbnails** 20 | 21 | [![Taskbar](screenshot-thumbnails.png)](screenshot-thumbnails.png) 22 | # 23 | ## Theme selection 24 | 25 | The theme is integrated into the mod, and can be simply selected from the mod's 26 | settings: 27 | 28 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 29 | * Go to the "Settings" tab. 30 | * Select the theme and save the settings. 31 | 32 | ## Manual installation 33 | 34 | The theme styles can also be imported manually. To do that, follow these steps: 35 | 36 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 37 | * Go to the "Advanced" tab. 38 | * Copy the content below to the text box under "Mod settings" and click "Save". 39 | 40 |
41 | Content to import (click to expand) 42 | 43 | ```json 44 | { 45 | "controlStyles[0].target":"Taskbar.SearchBoxButton#SearchBoxButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel > Windows.UI.Xaml.Controls.Border#BackgroundElement", 46 | "controlStyles[0].styles[0]":"CornerRadius=4", 47 | "controlStyles[1].target":"Taskbar.SearchBoxButton", 48 | "controlStyles[1].styles[0]":"Height=48", 49 | "controlStyles[2].target":"SystemTray.OmniButton#NotificationCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter > SystemTray.IconView#SystemTrayIcon > Grid > Grid > SystemTray.TextIconContent > Windows.UI.Xaml.Controls.Grid > SystemTray.AdaptiveTextBlock > Windows.UI.Xaml.Controls.TextBlock", 50 | "controlStyles[2].styles[0]":"Visibility=Visible", 51 | "controlStyles[2].styles[1]":"Text=‎ ‎‎‎", 52 | "controlStyles[2].styles[2]":"FontSize=16.4", 53 | "controlStyles[2].styles[3]":"FontFamily=Segoe MDL2 Assets", 54 | "controlStyles[2].styles[4]":"Width=30", 55 | "controlStyles[2].styles[5]":"FontWeight=ExtraLight", 56 | "controlStyles[2].styles[6]":"Foreground:=", 57 | "controlStyles[3].target":"Windows.UI.Xaml.Controls.FontIcon#SearchBoxFontIcon", 58 | "controlStyles[3].styles[0]":"FontFamily=Segoe Fluent Icons", 59 | "controlStyles[3].styles[1]":"Transform3D:=", 60 | "controlStyles[4].target":"Windows.UI.Xaml.Controls.TextBlock#SearchBoxTextBlock", 61 | "controlStyles[4].styles[0]":"Text=Search", 62 | "controlStyles[4].styles[1]":"FontSize=14", 63 | "controlStyles[5].target":"SystemTray.NotifyIconView#NotifyItemIcon", 64 | "controlStyles[5].styles[0]":"CornerRadius=0", 65 | "controlStyles[5].styles[1]":"Height=61", 66 | "controlStyles[5].styles[2]":"Margin=0,-5,0,0", 67 | "controlStyles[6].target":"SystemTray.ChevronIconView", 68 | "controlStyles[6].styles[0]":"CornerRadius=0", 69 | "controlStyles[6].styles[1]":"Height=61", 70 | "controlStyles[6].styles[2]":"Margin=-7,-6,0,0", 71 | "controlStyles[6].styles[3]":"Width=24", 72 | "controlStyles[6].styles[4]":"FontFamily=Segoe MDL2 Assets", 73 | "controlStyles[7].target":"Taskbar.SearchBoxButton#SearchBoxButton[AutomationProperties.AutomationId=SearchButton] > Taskbar.TaskListButtonPanel > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer#Icon", 74 | "controlStyles[7].styles[0]":"FlowDirection=1", 75 | "controlStyles[8].target":"Windows.UI.Xaml.Controls.Grid > Windows.UI.Xaml.Controls.Button#GleamEntryPointButton > Windows.UI.Xaml.Controls.Border", 76 | "controlStyles[8].styles[0]":"CornerRadius=4", 77 | "controlStyles[9].target":"Windows.UI.Xaml.Controls.Grid#DynamicSearchBoxGleamContainer", 78 | "controlStyles[9].styles[0]":"CornerRadius=4", 79 | "controlStyles[10].target":"SystemTray.OmniButton#NotificationCenterButton", 80 | "controlStyles[10].styles[0]":"CornerRadius=0", 81 | "controlStyles[10].styles[1]":"Padding=0,0,0,0", 82 | "controlStyles[10].styles[2]":"Margin=0,0,0,0", 83 | "controlStyles[11].target":"SystemTray.Stack#NonActivatableStack", 84 | "controlStyles[11].styles[0]":"Height=61", 85 | "controlStyles[11].styles[1]":"CornerRadius=0", 86 | "controlStyles[11].styles[2]":"Margin=0,-7.5,-6,0", 87 | "controlStyles[12].target":"Rectangle#ShowDesktopPipe@CommonStates", 88 | "controlStyles[12].styles[0]":"Width=9", 89 | "controlStyles[12].styles[1]":"Margin=0,0,-10,0", 90 | "controlStyles[12].styles[2]":"Height=500", 91 | "controlStyles[12].styles[3]":"Fill@Active:=", 92 | "controlStyles[12].styles[4]":"Stroke:=", 93 | "controlStyles[13].target":"SystemTray.OmniButton#ControlCenterButton", 94 | "controlStyles[13].styles[0]":"Padding=0", 95 | "controlStyles[13].styles[1]":"CornerRadius=0", 96 | "controlStyles[13].styles[2]":"Margin=0,0,0,0", 97 | "controlStyles[14].target":"SystemTray.AdaptiveTextBlock#LanguageInnerTextBlock > TextBlock#InnerTextBlock", 98 | "controlStyles[14].styles[0]":"FontFamily=Segoe UI", 99 | "controlStyles[14].styles[1]":"Margin=-8,0,0,0", 100 | "controlStyles[14].styles[2]":"FontSize=12", 101 | "controlStyles[15].target":"SystemTray.SystemTrayFrame > Windows.UI.Xaml.Controls.Grid#SystemTrayFrameGrid > SystemTray.Stack#NotifyIconStack > Windows.UI.Xaml.Controls.Grid#Content > SystemTray.StackListView#IconStack > Windows.UI.Xaml.Controls.ItemsPresenter > Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.ContentPresenter > SystemTray.ChevronIconView > Windows.UI.Xaml.Controls.Grid#ContainerGrid > Windows.UI.Xaml.Controls.ContentPresenter#ContentPresenter > Windows.UI.Xaml.Controls.Grid#ContentGrid > SystemTray.TextIconContent > Windows.UI.Xaml.Controls.Grid#ContainerGrid > SystemTray.AdaptiveTextBlock#Base > Windows.UI.Xaml.Controls.TextBlock#InnerTextBlock", 102 | "controlStyles[15].styles[0]":"FontFamily=Segoe MDL2 Assets", 103 | "controlStyles[15].styles[1]":"FontSize=12.4", 104 | "controlStyles[15].styles[2]":"Width=22", 105 | "controlStyles[16].target":"SystemTray.SystemTrayFrame > Windows.UI.Xaml.Controls.Grid#SystemTrayFrameGrid > SystemTray.Stack#NotifyIconStack > Windows.UI.Xaml.Controls.Grid#Content > SystemTray.StackListView#IconStack > Windows.UI.Xaml.Controls.ItemsPresenter > Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.ContentPresenter", 106 | "controlStyles[16].styles[0]":"Width=30", 107 | "controlStyles[17].target":"SystemTray.AdaptiveTextBlock#Base > Windows.UI.Xaml.Controls.TextBlock#InnerTextBlock", 108 | "controlStyles[17].styles[0]":"FontFamily=Segoe MDL2 Assets", 109 | "controlStyles[18].target":"SystemTray.AdaptiveTextBlock#AccentOverlay > Windows.UI.Xaml.Controls.TextBlock#InnerTextBlock", 110 | "controlStyles[18].styles[0]":"FontFamily=Segoe MDL2 Assets", 111 | "controlStyles[19].target":"SystemTray.AdaptiveTextBlock#Underlay > Windows.UI.Xaml.Controls.TextBlock#InnerTextBlock", 112 | "controlStyles[19].styles[0]":"FontFamily=Segoe MDL2 Assets", 113 | "controlStyles[20].target":"SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[1] > SystemTray.IconView > Grid > Grid", 114 | "controlStyles[20].styles[0]":"Margin=-6,0,0,0", 115 | "controlStyles[21].target":"SystemTray.Stack#MainStack > Windows.UI.Xaml.Controls.Grid#Content", 116 | "controlStyles[21].styles[0]":"CornerRadius=0", 117 | "controlStyles[21].styles[1]":"Height=61", 118 | "controlStyles[21].styles[2]":"Margin=-4,-7,-4,0", 119 | "controlStyles[22].target":"Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.TextBlock#TimeInnerTextBlock", 120 | "controlStyles[22].styles[0]":"FontFamily=Segoe UI", 121 | "controlStyles[22].styles[1]":"TextAlignment=0", 122 | "controlStyles[22].styles[2]":"FontSize=12", 123 | "controlStyles[22].styles[3]":"Margin=0,-1,0,0", 124 | "controlStyles[23].target":"Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.TextBlock#DateInnerTextBlock", 125 | "controlStyles[23].styles[0]":"FontFamily=Segoe UI", 126 | "controlStyles[23].styles[1]":"TextAlignment=0", 127 | "controlStyles[23].styles[2]":"FontSize=12", 128 | "controlStyles[23].styles[3]":"Margin=0,2,0,0", 129 | "controlStyles[24].target":"SystemTray.NotificationAreaIcons#NotificationAreaIcons > Windows.UI.Xaml.Controls.ItemsPresenter > Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.ContentPresenter", 130 | "controlStyles[24].styles[0]":"Width=23", 131 | "controlStyles[24].styles[1]":"Margin=0,-2,0,0", 132 | "controlStyles[25].target":"SystemTray.NotificationAreaIcons#NotificationAreaIcons > Windows.UI.Xaml.Controls.ItemsPresenter > Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.ContentPresenter > SystemTray.NotifyIconView#NotifyItemIcon > Windows.UI.Xaml.Controls.Grid#ContainerGrid", 133 | "controlStyles[25].styles[0]":"Margin=-9,0,0,0", 134 | "controlStyles[26].target":"SystemTray.Stack#NotifyIconStack", 135 | "controlStyles[26].styles[0]":"Width=24", 136 | "controlStyles[27].target":"SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter > SystemTray.IconView#SystemTrayIcon > Grid > Grid > SystemTray.TextIconContent > Windows.UI.Xaml.Controls.Grid > SystemTray.AdaptiveTextBlock > Windows.UI.Xaml.Controls.TextBlock", 137 | "controlStyles[27].styles[0]":"FontSize=16", 138 | "controlStyles[27].styles[1]":"Margin=0,-1,-0,0", 139 | "controlStyles[27].styles[2]":"FontWeight=0", 140 | "controlStyles[28].target":"SystemTray.CopilotIcon#CopilotIcon", 141 | "controlStyles[28].styles[0]":"Visibility=Visible", 142 | "controlStyles[28].styles[1]":"Margin=0,-7,0,0", 143 | "controlStyles[28].styles[2]":"Height=61", 144 | "controlStyles[29].target":"SystemTray.NotificationAreaOverflow > Windows.UI.Xaml.Controls.Grid#OverflowRootGrid > Windows.UI.Xaml.Controls.Border#OverflowFlyoutBackgroundBorder", 145 | "controlStyles[29].styles[0]":"CornerRadius=0", 146 | "controlStyles[29].styles[1]":"Background:=", 147 | "controlStyles[30].target":"SystemTray.NotificationAreaOverflow > Windows.UI.Xaml.Controls.Grid#OverflowRootGrid > Windows.UI.Xaml.Controls.ItemsControl > Windows.UI.Xaml.Controls.ItemsPresenter > Windows.UI.Xaml.Controls.WrapGrid", 148 | "controlStyles[30].styles[0]":"Margin=0,0,0,0", 149 | "controlStyles[31].target":"SystemTray.NotifyIconView", 150 | "controlStyles[31].styles[0]":"CornerRadius=0", 151 | "controlStyles[32].target":"Windows.UI.Xaml.Controls.ScrollViewer > Windows.UI.Xaml.Controls.ScrollContentPresenter > Windows.UI.Xaml.Controls.Border > SystemTray.NotificationAreaOverflow", 152 | "controlStyles[32].styles[0]":"Transform3D:=", 153 | "controlStyles[33].target":"SystemTray.OmniButton#ControlCenterButton", 154 | "controlStyles[33].styles[0]":"Visibility=Visible", 155 | "controlStyles[34].target":"Windows.UI.Xaml.Controls.Grid#RootGrid", 156 | "controlStyles[34].styles[0]":"Background:=", 157 | "controlStyles[35].target":"Taskbar.TaskbarBackground#BackgroundControl > Grid > Windows.UI.Xaml.Shapes.Rectangle#BackgroundFill", 158 | "controlStyles[35].styles[0]":"Opacity=0.5", 159 | "controlStyles[36].target":"Windows.UI.Xaml.Shapes.Rectangle#BackgroundStroke", 160 | "controlStyles[36].styles[0]":"Visibility=Collapsed", 161 | "controlStyles[37].target":"SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[3] > SystemTray.IconView > Grid > Grid", 162 | "controlStyles[37].styles[0]":"Margin=0,0,-6,0", 163 | "controlStyles[38].target":"Windows.UI.Xaml.Controls.ContentPresenter#HoverFlyoutContent", 164 | "controlStyles[38].styles[0]":"CornerRadius=0", 165 | "controlStyles[38].styles[1]":"Margin=0,0,0,-15", 166 | "controlStyles[38].styles[2]":"Background:=", 167 | "controlStyles[39].target":"Taskbar.TaskItemThumbnailView > Grid > TextBlock", 168 | "controlStyles[39].styles[0]":"FontFamily=Segoe UI", 169 | "controlStyles[39].styles[1]":"FontSize=12", 170 | "controlStyles[39].styles[2]":"Margin=3,0,8,8", 171 | "controlStyles[40].target":"Taskbar.TaskItemThumbnailView > Windows.UI.Xaml.Controls.Grid > Microsoft.UI.Xaml.Controls.ItemsRepeater > Windows.UI.Xaml.Controls.Image", 172 | "controlStyles[40].styles[0]":"Margin=0,-7,0,0", 173 | "controlStyles[41].target":"Taskbar.TaskItemThumbnailView > Grid > Button > ContentPresenter > TextBlock", 174 | "controlStyles[41].styles[0]":"FontFamily=Segoe MDL2 Assets", 175 | "controlStyles[42].target":"Taskbar.TaskItemThumbnailView > Grid > Button", 176 | "controlStyles[42].styles[0]":"CornerRadius=0", 177 | "controlStyles[42].styles[1]":"Height=32", 178 | "controlStyles[42].styles[2]":"Margin=0,0,0,9", 179 | "controlStyles[42].styles[3]":"Width=32", 180 | "controlStyles[43].target":"Grid#DetailedViewGrid", 181 | "controlStyles[43].styles[0]":"Margin=0,-7,0,0", 182 | "controlStyles[44].target":"Taskbar.TaskItemThumbnailView > Grid > Border", 183 | "controlStyles[44].styles[0]":"BorderBrush:=", "controlStyles[44].styles[1]":"CornerRadius=0", 184 | "controlStyles[45].target":"SystemTray.OmniButton#NotificationCenterButton > Windows.UI.Xaml.Controls.Grid > Windows.UI.Xaml.Controls.ContentPresenter > Windows.UI.Xaml.Controls.ItemsPresenter > Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.ContentPresenter > SystemTray.IconView > Windows.UI.Xaml.Controls.Grid > Windows.UI.Xaml.Controls.ContentPresenter > Windows.UI.Xaml.Controls.Grid > SystemTray.TextIconContent > Windows.UI.Xaml.Controls.Grid > SystemTray.AdaptiveTextBlock#Base > Windows.UI.Xaml.Controls.TextBlock", 185 | "controlStyles[45].styles[0]":"Text=‎", 186 | "controlStyles[45].styles[1]":"FontWeight=Light", 187 | "controlStyles[45].styles[2]":"FontSize=16.4", 188 | "controlStyles[46].target":"SystemTray.OmniButton#NotificationCenterButton > Windows.UI.Xaml.Controls.Grid > Windows.UI.Xaml.Controls.ContentPresenter > Windows.UI.Xaml.Controls.ItemsPresenter > Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.ContentPresenter > SystemTray.IconView", 189 | "controlStyles[45].styles[3]":"Foreground:=", 190 | "controlStyles[45].styles[4]":"Margin=-1,0,1,0", 191 | "controlStyles[46].styles[0]":"CornerRadius=0", 192 | "controlStyles[46].styles[1]":"Padding=0,0,0,0", 193 | "controlStyles[47].target":"SystemTray.DateTimeIconContent > Windows.UI.Xaml.Controls.Grid > Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.TextBlock", 194 | "controlStyles[47].styles[0]":"FontFamily=Segoe UI", 195 | "controlStyles[47].styles[1]":"TextAlignment=Center" 196 | } 197 | ``` 198 |
199 | -------------------------------------------------------------------------------- /Themes/21996Taskbar/screenshot-overflow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/21996Taskbar/screenshot-overflow.png -------------------------------------------------------------------------------- /Themes/21996Taskbar/screenshot-thumbnails.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/21996Taskbar/screenshot-thumbnails.png -------------------------------------------------------------------------------- /Themes/21996Taskbar/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/21996Taskbar/screenshot.png -------------------------------------------------------------------------------- /Themes/21996Taskbar/screenshot_legacy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/21996Taskbar/screenshot_legacy.png -------------------------------------------------------------------------------- /Themes/BottomDensy/README.md: -------------------------------------------------------------------------------- 1 | # BottomDensy theme for Windows 11 Taskbar Styler 2 | 3 | **Author**: [es](https://github.com/eugenesvk) 4 | 5 | ![Screenshot of the taskbar with the bottom of a browser](screenshot_ind_browser.png) 6 | 7 | Or an even more dense variant by removing the inactive app indicator (useful if you only have a couple of pinned icons, so it's easier to indicate the few non-running apps): 8 | 9 | ![Screenshot of the taskbar with BottomDensyNoInd](screenshot.png) 10 | 11 | ## Notes 12 | 13 | A dense theme eliminating some of the excessive/useless taskbar UI elements for better visibility at a smaller screen area "cost": 14 | - **Icons** 15 | - Align to the bottom of the screen: padding below icons serves no useful purpose 16 | - (Via another mod) make icons bigger @`32` to match their "natural"/not downscaled size 17 | - Make **Notification icons** bigger @`20` (set width to `@21` via another mod to have a small gap) 18 | - Running app **indicators**: move above the icon to make the icons "merge" with/"extend" into the fullscreen borderless apps like a bottom tab (but only if the background color matches) 19 | 20 | ![Screenshot of taskbar extending into an app](screenshot_ind_extend.png) 21 | 22 | - Active: Full icon width for a better "merging" effect. Tip: Change active running indicator color to match your borderless app background, to make an icon "extend" into the app 23 | - Target: `Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Rectangle#RunningIndicator` 24 | - Style: `Fill@ActiveRunningIndicator=#fef9f0` 25 | - Inactive: Make them tiny, since usually you only have a few icons "pinned", so not that much need to separate running apps from pinned apps to begin with. Most of the icons will have a running indicator, so if it's big as in default style, that's just extra noise. 26 | - **Start Button**: removed since the ↙ corner already has ∞ dimensions across both horizontal and vertical axes, so it's more convenient to simply move your mouse until the very end to the corner (will never miss) instead of trying to precisely stop at the Start button. Downside: on hover at the ↙ corner you see a popup for the left-most icon 27 | - **Show Desktop indicator**: minimized to 1px for the same reason: ↘ corner has ∞ dimensions 28 | - **Taskbar**: Make transparent and (via another mod) reduce height to leave no useless space above icons (except for the space used for indicators) 29 | 30 | `BottomDensyNoInd` is based on `BottomDensy`, but 2px smaller! 31 | - Top padding used for indicators removed 32 | - Active running indicator remains, but eats into the icon size instead 33 | - Inactive running indicator removed since almost all icons in the taskbar are running 34 | - Non running apps are indicated via a smaller icon instead 35 | 36 | ### Suggested Windows settings 37 | 38 | - Set taskbar alignment to left 39 | - Use bigger icons and smaller taskbar settings for `Taskbar Height and Icon Size` (see config below) 40 | - Change active running indicator color to match the background of your most commonly used apps to make the icon "merge" with the window. 41 | 42 | ### Suggested additional mods and settings 43 | 44 | [**Taskbar height and icon size**](https://windhawk.net/mods/taskbar-icon-size) 45 | 46 |
47 | Content to import (click to expand) 48 | 49 | `BottomDensy` 50 | ```json 51 | { 52 | "IconSize" : 32, 53 | "TaskbarHeight" : 34, 54 | "TaskbarButtonWidth": 36 55 | } 56 | ``` 57 | 58 | `BottomDensyNoInd` 59 | ```json 60 | { 61 | "IconSize" : 32, 62 | "TaskbarHeight" : 32, 63 | "TaskbarButtonWidth": 36 64 | } 65 | ``` 66 |
67 | 68 | [**Taskbar tray icon spacing**](https://windhawk.net/mods/taskbar-notification-icon-spacing) 69 | 70 |
71 | Content to import (click to expand) 72 | 73 | `notificationIconWidth` and `overflowIconWidth` should be at least `21` to add space between `20` icon size, but otherwise use whatever values that look best for you. `overflowIconsPerRow` depends on the number of icons and might be best to have the smallest packed square to minimize the distance of each icon to the mouse pointer 74 | ```json 75 | { 76 | "notificationIconWidth":21, 77 | "overflowIconWidth" :34, 78 | "overflowIconsPerRow" : 5} 79 | ``` 80 |
81 | 82 | ## Theme selection 83 | 84 | The theme is integrated into the mod, and can be simply selected from the mod's 85 | settings: 86 | 87 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 88 | * Go to the "Settings" tab. 89 | * Select the theme and save the settings. 90 | 91 | ## Manual installation 92 | 93 | The theme styles can also be imported manually. To do that, follow these steps: 94 | 95 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 96 | * Go to the "Advanced" tab. 97 | * Copy the content below to the text box under "Mod settings" and click "Save". 98 | 99 |
100 | Content to import (click to expand) 101 | 102 | `BottomDensy` 103 | ```json 104 | { 105 | "controlStyles[0].target" :"Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill", 106 | "controlStyles[0].styles[0]":"Fill=Transparent", 107 | "controlStyles[1].target" :"Rectangle#BackgroundStroke", 108 | "controlStyles[1].styles[0]":"Fill=Transparent", 109 | "controlStyles[2].target" :"Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Rectangle#RunningIndicator", 110 | "controlStyles[2].styles[0]":"Fill=#8f8f8f", 111 | "controlStyles[2].styles[1]":"Fill@ActiveRunningIndicator=#fef9f0", 112 | "controlStyles[2].styles[2]":"Width=2", 113 | "controlStyles[2].styles[3]":"Height=2", 114 | "controlStyles[2].styles[4]":"Margin=0,-2,0,0", 115 | "controlStyles[2].styles[5]":"Width@ActiveRunningIndicator=32", 116 | "controlStyles[3].target" :"Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > muxc:ProgressBar#ProgressIndicator", 117 | "controlStyles[3].styles[0]":"VerticalAlignment=0", 118 | "controlStyles[4].target" :"Rectangle#RunningIndicator", 119 | "controlStyles[4].styles[0]":"VerticalAlignment=0", 120 | "controlStyles[5].target" :"Border#ProgressBarRoot", 121 | "controlStyles[5].styles[0]":"VerticalAlignment=0", 122 | "controlStyles[6].target" :"Rectangle#IndeterminateProgressBarIndicator", 123 | "controlStyles[6].styles[0]":"VerticalAlignment=0", 124 | "controlStyles[7].target" :"Rectangle#IndeterminateProgressBarIndicator2", 125 | "controlStyles[7].styles[0]":"VerticalAlignment=0", 126 | "controlStyles[8].target" :"Taskbar.TaskListLabeledButtonPanel", 127 | "controlStyles[8].styles[0]":"Padding=2,0,2,0", 128 | "controlStyles[8].styles[1]":"VerticalAlignment=2", 129 | "controlStyles[9].target" :"Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton]", 130 | "controlStyles[9].styles[0]":"Visibility=Collapsed", 131 | "controlStyles[10].target" :"SystemTray.Stack#ShowDesktopStack", 132 | "controlStyles[10].styles[0]":"Width=1", 133 | "controlStyles[11].target" :"Windows.UI.Xaml.Shapes.Rectangle#ShowDesktopPipe", 134 | "controlStyles[11].styles[0]":"HorizontalAlignment=0", 135 | "controlStyles[12].target" :"SystemTray.NotificationAreaIcons#NotificationAreaIcons > ItemsPresenter > StackPanel > ContentPresenter > SystemTray.NotifyIconView#NotifyItemIcon > Grid#ContainerGrid > ContentPresenter#ContentPresenter > Grid#ContentGrid > SystemTray.ImageIconContent > Grid#ContainerGrid > Image", 136 | "controlStyles[12].styles[0]":"Width=20", 137 | "controlStyles[12].styles[1]":"Height=20", 138 | "controlStyles[13].target" :"WrapGrid > ContentPresenter > SystemTray.NotifyIconView > Grid#ContainerGrid > ContentPresenter#ContentPresenter > Grid#ContentGrid > SystemTray.ImageIconContent > Grid#ContainerGrid > Image", 139 | "controlStyles[13].styles[0]":"Width=20", 140 | "controlStyles[13].styles[1]":"Height=20" 141 | } 142 | ``` 143 | 144 | `BottomDensyNoInd` 145 | ```json 146 | { 147 | "controlStyles[0].target" :"Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill", 148 | "controlStyles[0].styles[0]":"Fill=Transparent", 149 | "controlStyles[1].target" :"Rectangle#BackgroundStroke", 150 | "controlStyles[1].styles[0]":"Fill=Transparent", 151 | "controlStyles[2].target" :"Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Rectangle#RunningIndicator", 152 | "controlStyles[2].styles[0]":"Fill=#8f8f8f", 153 | "controlStyles[2].styles[1]":"Fill@ActiveRunningIndicator=#fef9f0", 154 | "controlStyles[2].styles[2]":"Width=0", 155 | "controlStyles[2].styles[3]":"Height=0", 156 | "controlStyles[2].styles[4]":"Margin=0,0,0,0", 157 | "controlStyles[2].styles[5]":"Width@ActiveRunningIndicator=32", 158 | "controlStyles[2].styles[6]":"Height@ActiveRunningIndicator=2", 159 | "controlStyles[2].styles[7]":"Margin@ActiveRunningIndicator=0,-2,0,0", 160 | "controlStyles[3].target" :"Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > muxc:ProgressBar#ProgressIndicator", 161 | "controlStyles[3].styles[0]":"VerticalAlignment=0", 162 | "controlStyles[4].target" :"Rectangle#RunningIndicator", 163 | "controlStyles[4].styles[0]":"VerticalAlignment=0", 164 | "controlStyles[5].target" :"Border#ProgressBarRoot", 165 | "controlStyles[5].styles[0]":"VerticalAlignment=0", 166 | "controlStyles[6].target" :"Rectangle#IndeterminateProgressBarIndicator", 167 | "controlStyles[6].styles[0]":"VerticalAlignment=0", 168 | "controlStyles[7].target" :"Rectangle#IndeterminateProgressBarIndicator2", 169 | "controlStyles[7].styles[0]":"VerticalAlignment=0", 170 | "controlStyles[8].target" :"Taskbar.TaskListLabeledButtonPanel", 171 | "controlStyles[8].styles[0]":"Padding=2,0,2,0", 172 | "controlStyles[8].styles[1]":"VerticalAlignment=2", 173 | "controlStyles[9].target" :"Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton]", 174 | "controlStyles[9].styles[0]":"Visibility=Collapsed", 175 | "controlStyles[10].target" :"SystemTray.Stack#ShowDesktopStack", 176 | "controlStyles[10].styles[0]":"Width=1", 177 | "controlStyles[11].target" :"Windows.UI.Xaml.Shapes.Rectangle#ShowDesktopPipe", 178 | "controlStyles[11].styles[0]":"HorizontalAlignment=0", 179 | "controlStyles[12].target" :"SystemTray.NotificationAreaIcons#NotificationAreaIcons > ItemsPresenter > StackPanel > ContentPresenter > SystemTray.NotifyIconView#NotifyItemIcon > Grid#ContainerGrid > ContentPresenter#ContentPresenter > Grid#ContentGrid > SystemTray.ImageIconContent > Grid#ContainerGrid > Image", 180 | "controlStyles[12].styles[0]":"Width=20", 181 | "controlStyles[12].styles[1]":"Height=20", 182 | "controlStyles[13].target" :"WrapGrid > ContentPresenter > SystemTray.NotifyIconView > Grid#ContainerGrid > ContentPresenter#ContentPresenter > Grid#ContentGrid > SystemTray.ImageIconContent > Grid#ContainerGrid > Image", 183 | "controlStyles[13].styles[0]":"Width=20", 184 | "controlStyles[13].styles[1]":"Height=20", 185 | "controlStyles[14].target" :"Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Image#Icon", 186 | "controlStyles[14].styles[0]":"Width@ActiveRunningIndicator=30", 187 | "controlStyles[14].styles[1]":"Height@ActiveRunningIndicator=30", 188 | "controlStyles[14].styles[2]":"Width@NoRunningIndicator=26", 189 | "controlStyles[14].styles[3]":"Height@NoRunningIndicator=26", 190 | "controlStyles[14].styles[4]":"Margin@NoRunningIndicator=0,6,0,0" 191 | } 192 | ``` 193 |
194 | -------------------------------------------------------------------------------- /Themes/BottomDensy/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/BottomDensy/screenshot.png -------------------------------------------------------------------------------- /Themes/BottomDensy/screenshot_extend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/BottomDensy/screenshot_extend.png -------------------------------------------------------------------------------- /Themes/BottomDensy/screenshot_ind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/BottomDensy/screenshot_ind.png -------------------------------------------------------------------------------- /Themes/BottomDensy/screenshot_ind_browser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/BottomDensy/screenshot_ind_browser.png -------------------------------------------------------------------------------- /Themes/BottomDensy/screenshot_ind_extend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/BottomDensy/screenshot_ind_extend.png -------------------------------------------------------------------------------- /Themes/Bubbles/README.md: -------------------------------------------------------------------------------- 1 | # Bubbles theme for Windows 11 Taskbar Styler 2 | 3 | This theme was created as a showcase in response to [this question on 4 | Reddit](https://www.reddit.com/r/windows/comments/1c7522o/anyone_know_if_this_taskbar_is_possible_to_get_on/). 5 | 6 | **Author**: [m417z](https://github.com/m417z) 7 | 8 | ![Screenshot](screenshot.png) 9 | 10 | ## Theme selection 11 | 12 | The theme is integrated into the mod, and can be simply selected from the mod's 13 | settings: 14 | 15 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 16 | * Go to the "Settings" tab. 17 | * Select the theme and save the settings. 18 | 19 | ## Manual installation 20 | 21 | The theme styles can also be imported manually. To do that, follow these steps: 22 | 23 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 24 | * Go to the "Advanced" tab. 25 | * Copy the content below to the text box under "Mod settings" and click "Save". 26 | 27 |
28 | Content to import (click to expand) 29 | 30 | ```json 31 | { 32 | "controlStyles[0].target": "Rectangle#BackgroundFill", 33 | "controlStyles[0].styles[0]": "Fill:=", 34 | "controlStyles[1].target": "Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Border#BackgroundElement", 35 | "controlStyles[1].styles[0]": "CornerRadius=20", 36 | "controlStyles[1].styles[1]": "Background@NoRunningIndicator:=", 37 | "controlStyles[1].styles[2]": "Background:=", 38 | "controlStyles[1].styles[3]": "BorderThickness=1.5", 39 | "controlStyles[1].styles[4]": "BorderBrush:=", 40 | "controlStyles[1].styles[5]": "BorderThickness@NoRunningIndicator=1", 41 | "controlStyles[1].styles[6]": "BorderBrush@NoRunningIndicator:=", 42 | "controlStyles[1].styles[7]": "Margin=1", 43 | "controlStyles[2].target": "Taskbar.TaskListButtonPanel@CommonStates > Border#BackgroundElement", 44 | "controlStyles[2].styles[0]": "Background:=", 45 | "controlStyles[2].styles[1]": "BorderBrush:=", 46 | "controlStyles[2].styles[2]": "Background@ActivePointerOver:=", 47 | "controlStyles[2].styles[6]": "BorderBrush@InactivePressed:=", 48 | "controlStyles[2].styles[3]": "Background@InactivePointerOver:=", 49 | "controlStyles[2].styles[4]": "Background@ActivePressed:=", 50 | "controlStyles[2].styles[5]": "Background@InactivePressed:=", 51 | "controlStyles[2].styles[7]": "CornerRadius=20", 52 | "controlStyles[2].styles[8]": "BorderThickness@InactivePressed=3", 53 | "controlStyles[2].styles[9]": "BorderThickness=2", 54 | "controlStyles[3].target": "Grid#SystemTrayFrameGrid", 55 | "controlStyles[3].styles[0]": "Background:=", 56 | "controlStyles[3].styles[1]": "CornerRadius=20", 57 | "controlStyles[3].styles[2]": "Margin=-5,5,8,5", 58 | "controlStyles[3].styles[3]": "Padding=10,0,-10,0", 59 | "controlStyles[3].styles[4]": "BorderBrush:=", 60 | "controlStyles[3].styles[5]": "BorderThickness=1.5", 61 | "controlStyles[4].target": "Taskbar.TaskListLabeledButtonPanel@CommonStates > Rectangle#RunningIndicator", 62 | "controlStyles[4].styles[0]": "Stroke@InactivePointerOver=#75A8E6", 63 | "controlStyles[4].styles[1]": "Stroke@InactivePressed=#7CB1F2", 64 | "controlStyles[4].styles[2]": "Stroke@ActiveNormal=#5F87B9", 65 | "controlStyles[4].styles[3]": "Stroke@ActivePointerOver=#75A8E6", 66 | "controlStyles[4].styles[4]": "Stroke@ActivePressed=#7CB1F2", 67 | "controlStyles[4].styles[5]": "Fill=Transparent", 68 | "controlStyles[4].styles[6]": "RadiusX=20", 69 | "controlStyles[4].styles[7]": "RadiusY=20", 70 | "controlStyles[4].styles[8]": "StrokeThickness=3", 71 | "controlStyles[4].styles[9]": "Stroke@MultiWindowPointerOver=#CCCCDD", 72 | "controlStyles[4].styles[10]": "Stroke@MultiWindowPressed=White", 73 | "controlStyles[4].styles[11]": "Stroke@MultiWindowActive=#BBBBCC", 74 | "controlStyles[4].styles[12]": "Fill@MultiWindowNormal=#88AAAABB", 75 | "controlStyles[4].styles[13]": "Fill@MultiWindowPointerOver=#88AAAABB", 76 | "controlStyles[4].styles[14]": "Fill@MultiWindowActive=#88AAAABB", 77 | "controlStyles[4].styles[15]": "Fill@MultiWindowPressed=#88AAAABB", 78 | "controlStyles[4].styles[16]": "Stroke@RequestingAttention=Crimson", 79 | "controlStyles[4].styles[17]": "Stroke@RequestingAttentionPointerOver=Red", 80 | "controlStyles[4].styles[18]": "Fill@RequestingAttention:=", 81 | "controlStyles[4].styles[19]": "Fill@RequestingAttentionPointerOver:=", 82 | "controlStyles[4].styles[20]": "StrokeThickness@RequestingAttention=2.5", 83 | "controlStyles[4].styles[21]": "StrokeThickness@RequestingAttentionPointerOver=2.5", 84 | "controlStyles[4].styles[22]": "Height=39", 85 | "controlStyles[4].styles[23]": "Width=39", 86 | "controlStyles[4].styles[24]": "MinWidth=Auto", 87 | "controlStyles[5].target": "Taskbar.TaskListLabeledButtonPanel > TextBlock#LabelControl", 88 | "controlStyles[5].styles[0]": "Margin=4,0,0,0", 89 | "controlStyles[6].target": "Taskbar.SearchBoxButton", 90 | "controlStyles[6].styles[0]": "Height=48", 91 | "controlStyles[6].styles[1]": "Margin=0,-2,0,0", 92 | "controlStyles[7].target": "Border#MultiWindowElement", 93 | "controlStyles[7].styles[0]": "Height=0", 94 | "controlStyles[8].target": "Grid#OverflowRootGrid > Border", 95 | "controlStyles[8].styles[0]": "Background:=", 96 | "controlStyles[8].styles[1]": "BorderBrush:=", 97 | "controlStyles[9].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer#Icon", 98 | "controlStyles[9].styles[0]": "Margin=1,0,0,0", 99 | "controlStyles[10].target": "SystemTray.Stack#ShowDesktopStack", 100 | "controlStyles[10].styles[0]": "Padding=5,0,5,0", 101 | "controlStyles[10].styles[1]": "Margin=2,0,10,0", 102 | "controlStyles[11].target": "Windows.UI.Xaml.Shapes.Rectangle#ShowDesktopPipe", 103 | "controlStyles[11].styles[0]": "MinWidth=4", 104 | "controlStyles[11].styles[1]": "RadiusX=2", 105 | "controlStyles[11].styles[2]": "RadiusY=2", 106 | "controlStyles[11].styles[3]": "Margin=-5,0,5,0", 107 | "controlStyles[12].target": "SystemTray.Stack#NotifyIconStack > Windows.UI.Xaml.Controls.Grid > SystemTray.StackListView > Windows.UI.Xaml.Controls.ItemsPresenter > Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.ContentPresenter > SystemTray.ChevronIconView > Windows.UI.Xaml.Controls.Grid > Windows.UI.Xaml.Controls.Border#BackgroundBorder", 108 | "controlStyles[12].styles[0]": "CornerRadius=16,5,5,16", 109 | "controlStyles[12].styles[1]": "Margin=-3,4,0,4", 110 | "controlStyles[13].target": "TextBlock#InnerTextBlock", 111 | "controlStyles[13].styles[0]": "Foreground:=", 112 | "controlStyles[14].target": "TextBlock#LabelControl", 113 | "controlStyles[14].styles[0]": "Foreground:=", 114 | "controlStyles[15].target": "TextBlock#TimeInnerTextBlock", 115 | "controlStyles[15].styles[0]": "Foreground:=", 116 | "controlStyles[15].styles[1]": "Margin=0,2.5,0,-2.5", 117 | "controlStyles[16].target": "TextBlock#DateInnerTextBlock", 118 | "controlStyles[16].styles[0]": "Foreground:=", 119 | "controlStyles[16].styles[1]": "Margin=0,-1,2,2", 120 | "controlStyles[17].target": "Grid#ContainerGrid@ > Border#BackgroundBorder ", 121 | "controlStyles[17].styles[0]": "Background@PointerOver:=", 122 | "controlStyles[17].styles[1]": "CornerRadius=20", 123 | "controlStyles[17].styles[2]": "Margin=-1", 124 | "controlStyles[17].styles[3]": "Height=28", 125 | "controlStyles[17].styles[4]": "Width=28", 126 | "controlStyles[17].styles[5]": "BorderBrush=Transparent", 127 | "controlStyles[18].target": "SystemTray.IconView > Grid#ContainerGrid@ > Border#BackgroundBorder", 128 | "controlStyles[18].styles[0]": "CornerRadius=20", 129 | "controlStyles[18].styles[1]": "Background@PointerOver:=", 130 | "controlStyles[18].styles[2]": "Height=34", 131 | "controlStyles[18].styles[3]": "Width=34", 132 | "controlStyles[19].target": "SystemTray.OmniButton#NotificationCenterButton > Grid@CommonStates > Border#BackgroundBorder", 133 | "controlStyles[19].styles[0]": "CornerRadius=20", 134 | "controlStyles[19].styles[1]": "Width=75", 135 | "controlStyles[19].styles[2]": "Margin=-2,1,-2,1", 136 | "controlStyles[19].styles[3]": "Background@PointerOver:=", 137 | "controlStyles[20].target": "SystemTray.OmniButton#ControlCenterButton > Grid@CommonStates > Border#BackgroundBorder", 138 | "controlStyles[20].styles[0]": "CornerRadius=20", 139 | "controlStyles[20].styles[1]": "Background@PointerOver:=", 140 | "controlStyles[20].styles[2]": "Margin=1", 141 | "controlStyles[21].target": "Taskbar.AugmentedEntryPointButton > Taskbar.TaskListButtonPanel@CommonStates ", 142 | "controlStyles[21].styles[0]": "Background:=", 143 | "controlStyles[21].styles[1]": "BorderBrush:=", 144 | "controlStyles[21].styles[2]": "BorderThickness=1.5", 145 | "controlStyles[21].styles[3]": "Margin=5", 146 | "controlStyles[21].styles[4]": "Background@InactivePointerOver:=", 147 | "controlStyles[21].styles[5]": "Padding=-1.5,-1,-1.5,-1", 148 | "controlStyles[21].styles[6]": "CornerRadius=20", 149 | "controlStyles[22].target": "Grid#OverflowRootGrid ", 150 | "controlStyles[22].styles[0]": "Background:=", 151 | "controlStyles[22].styles[1]": "Padding=0", 152 | "controlStyles[22].styles[2]": "Margin=0,0,0,12", 153 | "controlStyles[22].styles[3]": "CornerRadius=8", 154 | "controlStyles[23].target": "Rectangle#LeftDropInsertionMarker", 155 | "controlStyles[23].styles[0]": "Fill:=", 156 | "controlStyles[24].target": "Rectangle#RightDropInsertionMarker", 157 | "controlStyles[24].styles[0]": "Fill:=", 158 | "controlStyles[25].target": "Taskbar.ExperienceToggleButton#LaunchListButton > Taskbar.TaskListButtonPanel > Border", 159 | "controlStyles[25].styles[0]": "CornerRadius=20", 160 | "controlStyles[25].styles[1]": "Background:=", 161 | "controlStyles[25].styles[2]": "BorderBrush:=" 162 | } 163 | ``` 164 |
165 | -------------------------------------------------------------------------------- /Themes/Bubbles/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Bubbles/screenshot.png -------------------------------------------------------------------------------- /Themes/CleanSlate/README.md: -------------------------------------------------------------------------------- 1 | # CleanSlate theme for Windows 11 Taskbar Styler 2 | 3 | **Author**: [Xerios](https://github.com/Xerios) 4 | 5 | ![Screenshot of taskbar](screenshot.png) \ 6 | ![Screenshot of taskbar](screenshot-light.png) 7 | 8 | ## Notes 9 | 10 | A nice clean theme that works nicely with dynamic windows themes using accent colors, mostly tuned for dark. 11 | 12 | ### Suggested Windows settings 13 | 14 | - Set taskbar alignment to left 15 | - Use full-width settings for Taskbar Labels for Windows 11 (see config below) 16 | - Hide the widgets button 17 | 18 | ## Theme selection 19 | 20 | The theme is integrated into the mod, and can be simply selected from the mod's 21 | settings: 22 | 23 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 24 | * Go to the "Settings" tab. 25 | * Select the theme and save the settings. 26 | 27 | ## Manual installation 28 | 29 | The theme styles can also be imported manually. To do that, follow these steps: 30 | 31 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 32 | * Go to the "Advanced" tab. 33 | * Copy the content below to the text box under "Mod settings" and click "Save". 34 | * Do the same for "Taskbar Labels for Windows 11". 35 | 36 |
37 | Content to import (click to expand) 38 | 39 | ## Theme 40 | 41 | ```json 42 | { 43 | "controlStyles[0].target": "Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill", 44 | "controlStyles[0].styles[0]": "Fill:=", 45 | "controlStyles[1].target": "Taskbar.TaskListButtonPanel@CommonStates > Border#BackgroundElement", 46 | "controlStyles[1].styles[0]": "CornerRadius=100", 47 | "controlStyles[1].styles[1]": "Background:=", 48 | "controlStyles[1].styles[2]": "Background@InactivePointerOver:=", 49 | "controlStyles[1].styles[3]": "Background@ActivePointerOver:=", 50 | "controlStyles[1].styles[4]": "Background@ActiveNormal:=", 51 | "controlStyles[1].styles[5]": "Background@InactivePressed:=", 52 | "controlStyles[1].styles[6]": "Background@ActivePressed:=", 53 | "controlStyles[2].target": "Grid#SystemTrayFrameGrid", 54 | "controlStyles[2].styles[0]": "Background:=", 55 | "controlStyles[2].styles[1]": "CornerRadius=5", 56 | "controlStyles[2].styles[2]": "Margin=0,5,5,5", 57 | "controlStyles[2].styles[3]": "Padding=1,0,-10,0", 58 | "controlStyles[3].target": "Rectangle#RunningIndicator", 59 | "controlStyles[3].styles[0]": "Fill=Transparent", 60 | "controlStyles[4].target": "Taskbar.TaskListLabeledButtonPanel > TextBlock#LabelControl", 61 | "controlStyles[4].styles[0]": "Margin=8,0,0,0", 62 | "controlStyles[4].styles[1]": "Foreground=White", 63 | "controlStyles[5].target": "Taskbar.SearchBoxButton", 64 | "controlStyles[5].styles[0]": "Foreground=White", 65 | "controlStyles[5].styles[1]": "Margin=-11,0,0,0", 66 | "controlStyles[6].target": "TextBlock#SearchBoxTextBlock", 67 | "controlStyles[6].styles[0]": "FontSize=12", 68 | "controlStyles[7].target": "Rectangle#BackgroundStroke", 69 | "controlStyles[7].styles[0]": "Fill=Transparent", 70 | "controlStyles[8].target": "SystemTray.AdaptiveTextBlock", 71 | "controlStyles[8].styles[0]": "Foreground=White", 72 | "controlStyles[9].target": "Taskbar.TaskListButton#TaskListButton[AutomationProperties.Name=Copilot] > Taskbar.TaskListLabeledButtonPanel#IconPanel > Border#BackgroundElement", 73 | "controlStyles[9].styles[0]": "Background:=", 74 | "controlStyles[10].target": "SystemTray.NotifyIconView > Grid > Border#BackgroundBorder", 75 | "controlStyles[10].styles[0]": "Margin=0,3,0,3", 76 | "controlStyles[11].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel > Border#BackgroundElement@CommonStates", 77 | "controlStyles[11].styles[0]": "Background:=", 78 | "controlStyles[11].styles[1]": "CornerRadius=20", 79 | "controlStyles[11].styles[2]": "Margin=0,1,0,1", 80 | "controlStyles[12].target": "Border#MultiWindowElement", 81 | "controlStyles[12].styles[0]": "Background:=", 82 | "controlStyles[13].target": "TextBlock#TimeInnerTextBlock", 83 | "controlStyles[13].styles[0]": "Foreground=White", 84 | "controlStyles[14].target": "TextBlock#DateInnerTextBlock", 85 | "controlStyles[14].styles[0]": "Foreground=White", 86 | "controlStyles[15].target": "SystemTray.TextIconContent > Grid > SystemTray.AdaptiveTextBlock#Base > TextBlock", 87 | "controlStyles[15].styles[0]": "Foreground=White", 88 | "controlStyles[16].target": "Border#BackgroundElement", 89 | "controlStyles[16].styles[0]": "BorderThickness=0", 90 | "controlStyles[17].styles[0]": "Background@InactiveRunningIndicator:=", 91 | "controlStyles[17].target": "Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Border#BackgroundElement", 92 | "controlStyles[17].styles[1]": "Background@InactiveRunningIndicator:=", 93 | "controlStyles[17].styles[2]": "Background@ActiveRunningIndicator:=", 94 | "controlStyles[17].styles[3]": "Background@RequestingAttentionRunningIndicator:=", 95 | "controlStyles[17].styles[4]": "Margin=1", 96 | "controlStyles[17].styles[5]": "BorderThickness=1", 97 | "controlStyles[18].target": "Rectangle#ShowDesktopPipe", 98 | "controlStyles[18].styles[0]": "Width=12", 99 | "controlStyles[18].styles[1]": "Height=38", 100 | "controlStyles[18].styles[2]": "Margin=-6,0,0,0", 101 | "controlStyles[19].target": "SystemTray.Stack#ShowDesktopStack", 102 | "controlStyles[19].styles[0]": "Width=12", 103 | "controlStyles[20].target": "Taskbar.TaskListButtonPanel", 104 | "controlStyles[20].styles[0]": "Margin=-3,0,0,0", 105 | "controlStyles[21].target": "Grid#OverflowRootGrid > Border", 106 | "controlStyles[21].styles[0]": "Background:=", 107 | "controlStyles[21].styles[1]": "BorderBrush:=", 108 | "controlStyles[22].target": "Taskbar.TaskItemThumbnailView > Grid > Border", 109 | "controlStyles[22].styles[0]": "Background:=", 110 | "controlStyles[22].styles[1]": "BorderBrush:=", 111 | "controlStyles[22].styles[2]": "BorderThickness=1", 112 | "controlStyles[22].styles[3]": "CornerRadius=5", 113 | "controlStyles[23].target": "Border#ProgressBarRoot > Border > Grid > Rectangle", 114 | "controlStyles[23].styles[0]": "Fill:=", 115 | "controlStyles[24].target": "Border#ProgressBarRoot > Border > Grid > Rectangle#ProgressBarTrack", 116 | "controlStyles[24].styles[0]": "Fill:=", 117 | "controlStyles[25].target": "Taskbar.TaskListLabeledButtonPanel@CommonStates > Border#BackgroundElement", 118 | "controlStyles[25].styles[0]": "BorderBrush@InactivePointerOver:=", 119 | "controlStyles[25].styles[1]": "BorderBrush@ActiveNormal:=", 120 | "controlStyles[25].styles[2]": "BorderBrush@ActivePointerOver:=", 121 | "controlStyles[26].target": "Taskbar.TaskListLabeledButtonPanel@CommonStates[Width=44] > Border#BackgroundElement", 122 | "controlStyles[26].styles[0]": "Background=Transparent", 123 | "controlStyles[26].styles[1]": "BorderThickness=1", 124 | "controlStyles[26].styles[2]": "BorderBrush@InactivePointerOver:=", 125 | "controlStyles[27].target": "ToolTip", 126 | "controlStyles[27].styles[0]": "Background:=", 127 | "controlStyles[27].styles[1]": "Foreground=White" 128 | } 129 | ``` 130 | 131 | ## Taskbar Labels for Windows 11 132 | 133 | ```json 134 | { 135 | "taskbarItemWidth": 170, 136 | "minimumTaskbarItemWidth": 0, 137 | "maximumTaskbarItemWidth": 200, 138 | "runningIndicatorStyle": "fullWidth", 139 | "progressIndicatorStyle": "sameAsRunningIndicatorStyle", 140 | "fontSize": 12, 141 | "leftAndRightPaddingSize": 12, 142 | "spaceBetweenIconAndLabel": 8, 143 | "labelForSingleItem": "%name%", 144 | "labelForMultipleItems": "[%amount%] %name%" 145 | } 146 | ``` 147 |
148 | -------------------------------------------------------------------------------- /Themes/CleanSlate/screenshot-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/CleanSlate/screenshot-light.png -------------------------------------------------------------------------------- /Themes/CleanSlate/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/CleanSlate/screenshot.png -------------------------------------------------------------------------------- /Themes/DockLike/README.md: -------------------------------------------------------------------------------- 1 | # DockLike theme for Windows 11 Taskbar Styler 2 | 3 | **Author**: [Amber](https://github.com/AmberWat) 4 | 5 | ![Screenshot of taskbar](screenshot.png) 6 | 7 | ## Notes 8 | 9 | This theme is meant as a fairly vanilla implementation of a dock-like taskbar. It works great out of the box, but there are several tweaks that can be made. 10 | 11 | ### Suggested Windows settings 12 | 13 | - Set taskbar alignment to center 14 | - Hide the widgets button 15 | - If you have another clock, for example from a Rainmeter skin or an application like ElevenClock, you can hide the taskbar clock in Windows date & time settings 16 | 17 | ### Left align the taskbar (tweak) 18 | 19 | Do not use the Windows taskbar setting to left align. Instead, add the following control styles: 20 | 21 | Target: 22 | ``` 23 | Taskbar.TaskbarFrame 24 | ``` 25 | Styles: 26 | ``` 27 | HorizontalAlignment=Left 28 | Margin=0,0,250,0 29 | ``` 30 | 31 | Target: 32 | ``` 33 | Taskbar.TaskbarFrame > Grid#RootGrid 34 | ``` 35 | Style: 36 | ``` 37 | CornerRadius=0,8,0,0 38 | ``` 39 | 40 | ### Make the taskbar float (tweak) 41 | 42 | This gives it an appearance closer to the MacOS dock. 43 | 44 | ![Screenshot of floating taskbar](screenshot_floating.png) 45 | 46 | 1. Use the mod [Taskbar height and icon size](https://windhawk.net/mods/taskbar-icon-size) to increase the height of the taskbar by 4 (usually from 48 to 52). This compensates for the added spacing. 47 | 48 | 2. Add the following control styles: 49 | 50 | Target: 51 | ``` 52 | Taskbar.TaskbarFrame > Grid#RootGrid 53 | ``` 54 | Styles: 55 | ``` 56 | Margin=0,1,0,3 57 | ``` 58 | ``` 59 | CornerRadius=8 60 | ``` 61 | 62 | Target: 63 | ``` 64 | Grid#SystemTrayFrameGrid 65 | ``` 66 | Style: 67 | ``` 68 | Margin=8,1,8,3 69 | ``` 70 | 71 | ### Add a border (tweak) 72 | 73 | 1. Add the following control styles: 74 | 75 | Target: 76 | ``` 77 | Taskbar.TaskbarFrame > Grid#RootGrid 78 | ``` 79 | Styles: 80 | ``` 81 | BorderThickness=1 82 | ``` 83 | ``` 84 | BorderBrush:= 85 | ``` 86 | 87 | Target: 88 | ``` 89 | Grid#SystemTrayFrameGrid 90 | ``` 91 | Styles: 92 | ``` 93 | BorderThickness=1 94 | ``` 95 | ``` 96 | BorderBrush:= 97 | ``` 98 | 99 | 2. If you haven't applied the floating taskbar tweak, add the following control style: 100 | 101 | Target: 102 | ``` 103 | Taskbar.TaskbarFrame > Grid#RootGrid 104 | ``` 105 | Style: 106 | ``` 107 | Margin=0,0,0,-2 108 | ``` 109 | 110 | ## Theme selection 111 | 112 | The theme is integrated into the mod, and can be simply selected from the mod's 113 | settings: 114 | 115 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 116 | * Go to the "Settings" tab. 117 | * Select the theme and save the settings. 118 | 119 | ## Manual installation 120 | 121 | The theme styles can also be imported manually. To do that, follow these steps: 122 | 123 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 124 | * Go to the "Advanced" tab. 125 | * Copy the content below to the text box under "Mod settings" and click "Save". 126 | 127 |
128 | Content to import (click to expand) 129 | 130 | ```json 131 | { 132 | "controlStyles[0].target": "Taskbar.TaskbarFrame", 133 | "controlStyles[0].styles[0]": "Width=Auto", 134 | "controlStyles[0].styles[1]": "HorizontalAlignment=Center", 135 | "controlStyles[0].styles[2]": "Margin=250,0,250,0", 136 | 137 | "controlStyles[1].target": "Taskbar.TaskbarFrame > Grid#RootGrid", 138 | "controlStyles[1].styles[0]": "Background:=", 139 | "controlStyles[1].styles[1]": "Padding=6,0,6,0", 140 | "controlStyles[1].styles[2]": "CornerRadius=8,8,0,0", 141 | "controlStyles[1].styles[3]": "BorderBrush:=", 142 | 143 | "controlStyles[2].target": "Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill", 144 | "controlStyles[2].styles[0]": "Visibility=Collapsed", 145 | 146 | "controlStyles[3].target": "Rectangle#BackgroundStroke", 147 | "controlStyles[3].styles[0]": "Visibility=Collapsed", 148 | 149 | "controlStyles[4].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel", 150 | "controlStyles[4].styles[0]": "Margin=0", 151 | 152 | "controlStyles[5].target": "Grid#SystemTrayFrameGrid", 153 | "controlStyles[5].styles[0]": "Background:=", 154 | "controlStyles[5].styles[1]": "Margin=-4,-8,-4,-8", 155 | "controlStyles[5].styles[2]": "CornerRadius=10", 156 | "controlStyles[5].styles[3]": "BorderThickness=12,12,12,12", 157 | "controlStyles[5].styles[4]": "BackgroundSizing=InnerBorderEdge", 158 | 159 | "controlStyles[6].target": "SystemTray.ChevronIconView", 160 | "controlStyles[6].styles[0]": "Padding=0", 161 | 162 | "controlStyles[7].target": "SystemTray.NotifyIconView#NotifyItemIcon", 163 | "controlStyles[7].styles[0]": "Padding=0", 164 | 165 | "controlStyles[8].target": "SystemTray.OmniButton", 166 | "controlStyles[8].styles[0]": "Padding=0", 167 | 168 | "controlStyles[9].target": "SystemTray.CopilotIcon", 169 | "controlStyles[9].styles[0]": "Padding=0", 170 | 171 | "controlStyles[10].target": "SystemTray.OmniButton#NotificationCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter > systemtray:IconView#SystemTrayIcon > Grid", 172 | "controlStyles[10].styles[0]": "Padding=4,0,4,0", 173 | 174 | "controlStyles[11].target": "SystemTray.IconView#SystemTrayIcon > Grid#ContainerGrid > ContentPresenter#ContentPresenter > Grid#ContentGrid > SystemTray.TextIconContent > Grid#ContainerGrid", 175 | "controlStyles[11].styles[0]": "Padding=0", 176 | 177 | "controlStyles[12].target": "SystemTray.StackListView#IconStack > ItemsPresenter > StackPanel > ContentPresenter > SystemTray.IconView#SystemTrayIcon", 178 | "controlStyles[12].styles[0]": "Padding=0", 179 | 180 | "controlStyles[13].target": "SystemTray.Stack#ShowDesktopStack", 181 | "controlStyles[13].styles[0]": "Margin=0,-4,-12,-4", 182 | 183 | "controlStyles[14].target": "Taskbar.Gripper#GripperControl", 184 | "controlStyles[14].styles[0]": "Width=Auto", 185 | "controlStyles[14].styles[1]": "MinWidth=24" 186 | } 187 | ``` 188 |
189 | -------------------------------------------------------------------------------- /Themes/DockLike/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/DockLike/screenshot.png -------------------------------------------------------------------------------- /Themes/DockLike/screenshot_floating.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/DockLike/screenshot_floating.png -------------------------------------------------------------------------------- /Themes/Lucent/README.md: -------------------------------------------------------------------------------- 1 | # Lucent theme for Windows 11 Taskbar Styler 2 | 3 | A dark theme with gradients and colorful glows that use your theme color. 4 | 5 | **Author**: [twistthoseknobs](https://github.com/twistthoseknobs) 6 | 7 | ![Screenshot](screenshot.png) \ 8 | ![Screenshot](screenshot_red.png) 9 | 10 | Alternate Light Bar Style: \ 11 | ![Screenshot](screenshot_light.png) 12 | 13 | ## Suggested Windows settings 14 | 15 | * Left-aligned taskbar. 16 | * Combine taskbar buttons set to "When taskbar is full". 17 | * Dark wallpaper with matching accent color. 18 | 19 | ## Theme selection 20 | 21 | The theme is integrated into the mod, and can be simply selected from the mod's 22 | settings: 23 | 24 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 25 | * Go to the "Settings" tab. 26 | * Select the theme and save the settings. 27 | 28 | ## Manual installation 29 | 30 | The theme styles can also be imported manually. To do that, follow these steps: 31 | 32 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 33 | * Go to the "Advanced" tab. 34 | * Copy the content below to the text box under "Mod settings" and click "Save". 35 | 36 | ### Accented Bar 37 |
38 | Content to import (click to expand) 39 | 40 | ```json 41 | { 42 | "controlStyles[0].target": "Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill", 43 | "controlStyles[0].styles[0]": "Fill:=", 44 | "controlStyles[1].target": "Taskbar.TaskbarBackground#HoverFlyoutBackgroundControl > Grid > Rectangle#BackgroundFill", 45 | "controlStyles[1].styles[0]": "Fill:=", 46 | "controlStyles[2].target": "Taskbar.TaskListLabeledButtonPanel > Rectangle#RunningIndicator", 47 | "controlStyles[2].styles[0]": "Fill=Transparent", 48 | "controlStyles[3].target": "Rectangle#BackgroundStroke", 49 | "controlStyles[3].styles[0]": "Visibility=Collapsed", 50 | "controlStyles[4].target": "Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Border#BackgroundElement", 51 | "controlStyles[4].styles[0]": "Background@InactiveRunningIndicator:=", 52 | "controlStyles[4].styles[1]": "Margin=0,-1,0,-1", 53 | "controlStyles[5].target": "Taskbar.TaskListLabeledButtonPanel@CommonStates > TextBlock#LabelControl", 54 | "controlStyles[5].styles[0]": "Foreground@ActiveNormal=Black", 55 | "controlStyles[5].styles[1]": "Foreground@ActivePointerOver=Black", 56 | "controlStyles[5].styles[2]": "Margin=0,0,3,0", 57 | "controlStyles[5].styles[3]": "Foreground@ActivePressed=#BFBFBF", 58 | "controlStyles[6].styles[1]": "Margin=0,0,0,2", 59 | "controlStyles[6].styles[2]": "CornerRadius=0", 60 | "controlStyles[6].target": "SystemTray.SystemTrayFrame > Grid", 61 | "controlStyles[6].styles[0]": "Background:=", 62 | "controlStyles[7].target": "SystemTray.ChevronIconView", 63 | "controlStyles[7].styles[0]": "Padding=20", 64 | "controlStyles[8].target": "SystemTray.NotifyIconView#NotifyItemIcon", 65 | "controlStyles[8].styles[0]": "Padding=2", 66 | "controlStyles[9].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel", 67 | "controlStyles[9].styles[0]": "Background:=", 68 | "controlStyles[9].styles[1]": "Padding=0", 69 | "controlStyles[9].styles[2]": "CornerRadius=0", 70 | "controlStyles[9].styles[3]": "Margin=0", 71 | "controlStyles[10].target": "Grid", 72 | "controlStyles[10].styles[0]": "RequestedTheme=2", 73 | "controlStyles[11].target": "Grid#OverflowRootGrid > Border", 74 | "controlStyles[11].styles[0]": "Background:=", 75 | "controlStyles[12].target": "Taskbar.AugmentedEntryPointButton", 76 | "controlStyles[12].styles[0]": "Margin=12,0,0,0", 77 | "controlStyles[13].target": "Taskbar.TaskListLabeledButtonPanel@CommonStates", 78 | "controlStyles[13].styles[0]": "Background@ActiveNormal:=", 79 | "controlStyles[13].styles[1]": "Background@ActivePointerOver:=", 80 | "controlStyles[13].styles[2]": "Background@InactivePointerOver=#EBEBEB", 81 | "controlStyles[13].styles[3]": "Background@InactivePressed=#BBBBBB", 82 | "controlStyles[13].styles[4]": "Background@ActivePressed:=", 83 | "controlStyles[13].styles[5]": "Background@RequestingAttention=#FFE9AFAA", 84 | "controlStyles[13].styles[6]": "Background@RequestingAttentionPointerOver=#FFF8E7E5", 85 | "controlStyles[13].styles[7]": "Background@RequestingAttentionPressed=#FFFEEEF0", 86 | "controlStyles[14].target": "Taskbar.TaskListLabeledButtonPanel@CommonStates > Border", 87 | "controlStyles[14].styles[0]": "BorderThickness=0", 88 | "controlStyles[14].styles[1]": "Margin=-2,-4,-2,-4", 89 | "controlStyles[14].styles[2]": "CornerRadius=0" 90 | } 91 | ``` 92 |
93 | 94 | ### Light Bar 95 |
96 | Content to import (click to expand) 97 | 98 | ```json 99 | { 100 | "controlStyles[0].target": "Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill", 101 | "controlStyles[0].styles[0]": "Fill:=", 102 | "controlStyles[1].target": "Taskbar.TaskbarBackground#HoverFlyoutBackgroundControl > Grid > Rectangle#BackgroundFill", 103 | "controlStyles[1].styles[0]": "Fill:=", 104 | "controlStyles[2].target": "Taskbar.TaskListLabeledButtonPanel > Rectangle#RunningIndicator", 105 | "controlStyles[2].styles[0]": "Fill=Transparent", 106 | "controlStyles[3].target": "Rectangle#BackgroundStroke", 107 | "controlStyles[3].styles[0]": "Visibility=Collapsed", 108 | "controlStyles[4].target": "Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Border#BackgroundElement", 109 | "controlStyles[4].styles[0]": "Background@InactiveRunningIndicator:=", 110 | "controlStyles[4].styles[1]": "Margin=0,-1,0,-1", 111 | "controlStyles[5].target": "Taskbar.TaskListLabeledButtonPanel@CommonStates > TextBlock#LabelControl", 112 | "controlStyles[5].styles[0]": "Foreground@ActiveNormal=Black", 113 | "controlStyles[5].styles[1]": "Foreground@ActivePointerOver=Black", 114 | "controlStyles[5].styles[2]": "Margin=0,0,3,0", 115 | "controlStyles[5].styles[3]": "Foreground@ActivePressed=#424242", 116 | "controlStyles[6].styles[1]": "Margin=0,0,0,2", 117 | "controlStyles[6].styles[2]": "CornerRadius=0", 118 | "controlStyles[6].target": "SystemTray.SystemTrayFrame > Grid", 119 | "controlStyles[6].styles[0]": "Background:=", 120 | "controlStyles[7].target": "SystemTray.ChevronIconView", 121 | "controlStyles[7].styles[0]": "Padding=20", 122 | "controlStyles[8].target": "SystemTray.NotifyIconView#NotifyItemIcon", 123 | "controlStyles[8].styles[0]": "Padding=2", 124 | "controlStyles[9].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel", 125 | "controlStyles[9].styles[0]": "Background:=", 126 | "controlStyles[9].styles[1]": "Padding=0", 127 | "controlStyles[9].styles[2]": "CornerRadius=0", 128 | "controlStyles[9].styles[3]": "Margin=0", 129 | "controlStyles[10].target": "Grid", 130 | "controlStyles[10].styles[0]": "RequestedTheme=2", 131 | "controlStyles[11].target": "Grid#OverflowRootGrid > Border", 132 | "controlStyles[11].styles[0]": "Background:=", 133 | "controlStyles[12].target": "Taskbar.AugmentedEntryPointButton", 134 | "controlStyles[12].styles[0]": "Margin=12,0,0,0", 135 | "controlStyles[13].target": "Taskbar.TaskListLabeledButtonPanel@CommonStates", 136 | "controlStyles[13].styles[0]": "Background@ActiveNormal:=#FCFCFC", 137 | "controlStyles[13].styles[1]": "Background@ActivePointerOver:=#BBBBBB", 138 | "controlStyles[13].styles[2]": "Background@InactivePointerOver=#EBEBEB", 139 | "controlStyles[13].styles[3]": "Background@InactivePressed=#BBBBBB", 140 | "controlStyles[13].styles[4]": "Background@ActivePressed=#BBBBBB", 141 | "controlStyles[13].styles[5]": "Background@RequestingAttention=#FFE9AFAA", 142 | "controlStyles[13].styles[6]": "Background@RequestingAttentionPointerOver=#FFF8E7E5", 143 | "controlStyles[13].styles[7]": "Background@RequestingAttentionPressed=#FFFEEEF0", 144 | "controlStyles[14].target": "Taskbar.TaskListLabeledButtonPanel@CommonStates > Border", 145 | "controlStyles[14].styles[0]": "BorderThickness=0", 146 | "controlStyles[14].styles[1]": "Margin=-2,-4,-2,-4", 147 | "controlStyles[14].styles[2]": "CornerRadius=0" 148 | } 149 | ``` 150 |
151 | -------------------------------------------------------------------------------- /Themes/Lucent/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Lucent/screenshot.png -------------------------------------------------------------------------------- /Themes/Lucent/screenshot_light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Lucent/screenshot_light.png -------------------------------------------------------------------------------- /Themes/Lucent/screenshot_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Lucent/screenshot_red.png -------------------------------------------------------------------------------- /Themes/Lucent/wide_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Lucent/wide_button.png -------------------------------------------------------------------------------- /Themes/Matter/Button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Matter/Button.png -------------------------------------------------------------------------------- /Themes/Matter/Left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Matter/Left.png -------------------------------------------------------------------------------- /Themes/Matter/README.md: -------------------------------------------------------------------------------- 1 | # Matter theme for Windows 11 Taskbar Styler 2 | 3 | **Author**: [ZoraizLajwer](https://github.com/ZoraizLajwer) 4 | 5 | ![Center](screenshot.png) \ 6 | ![Left](Left.png) 7 | 8 | ![Search](Search.png) \ 9 | ![Button](Button.png) 10 | 11 | ## Note 12 | Small Icon next to weather icon in centered taskbar is not part of theme, its a separate **Rainmeter skin**, you can download it from 13 | [Spotibar](https://github.com/ZoraizLajwer/spotibar). 14 | 15 | ## Windows Settings 16 | - Dark Mode 17 | - Install Tektur font from Google font (required for clock customization) 18 | 19 | ## Required Windhawk Mods for similar results 20 | To achieve similar results, install and configure the following Windhawk mods in addition to Taskbar Styler: 21 | 22 | - Taskbar Clock Customization – for styling the clock. 23 | 24 |
25 | Click to expand JSON content 26 | 27 | ```json 28 | { 29 | "ShowSeconds": 1, 30 | "TimeFormat": "hh':'mm':'ss tt", 31 | "DateFormat": "ddd' -' MMM dd", 32 | "WeekdayFormat": "dddd", 33 | "TopLine": "%date%", 34 | "BottomLine": "%time%", 35 | "MiddleLine": "%weekday%", 36 | "Width": 180, 37 | "Height": 60, 38 | "MaxWidth": 0, 39 | "TextSpacing": -1, 40 | "WebContentsUpdateInterval": 10, 41 | "TimeStyle.Visible": 1, 42 | "TimeStyle.TextAlignment": "Center", 43 | "TimeStyle.FontSize": 0, 44 | "TimeStyle.FontFamily": "Tektur", 45 | "TimeStyle.FontWeight": "Medium", 46 | "TimeStyle.CharacterSpacing": 0, 47 | "DateStyle.TextAlignment": "Center", 48 | "DateStyle.FontSize": 0, 49 | "DateStyle.FontFamily": "Tektur", 50 | "DateStyle.FontWeight": "Medium", 51 | "DateStyle.CharacterSpacing": 0, 52 | "oldTaskbarOnWin11": 0 53 | } 54 | ``` 55 |
56 | 57 | --- 58 | 59 | - Taskbar Height and Icon Size 60 | - To make button square set `Taskbar Button Width` = 45 61 | 75 | ## Manual installation 76 | 77 | The theme styles can be imported manually. To do that, follow these steps: 78 | 79 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 80 | * Go to the "Advanced" tab. 81 | * Copy the content below to the text box under "Mod settings" and click "Save". 82 | 83 |
84 | Content to import (click to expand) 85 | 86 | ```json 87 | { 88 | "controlStyles[0].target": "Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill", 89 | "controlStyles[0].styles[0]": "Fill = Transparent", 90 | "controlStyles[1].target": "Rectangle#BackgroundStroke", 91 | "controlStyles[1].styles[0]": "Fill = Transparent", 92 | "controlStyles[2].target": "Taskbar.TaskbarBackground#HoverFlyoutBackgroundControl > Grid > Rectangle#BackgroundFill", 93 | "controlStyles[2].styles[0]": "Fill:=", 94 | "controlStyles[3].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton", 95 | "controlStyles[3].styles[0]": "Margin=-1,1,1,1", 96 | "controlStyles[4].target": "Taskbar.TaskListButtonPanel@CommonStates > Border#BackgroundElement", 97 | "controlStyles[4].styles[0]": "CornerRadius=9", 98 | "controlStyles[4].styles[1]": "Background:=", 99 | "controlStyles[4].styles[2]": "Background@InactivePointerOver:=", 100 | "controlStyles[4].styles[3]": "Background@ActivePointerOver:=", 101 | "controlStyles[4].styles[4]": "Background@ActiveNormal:=", 102 | "controlStyles[5].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.Name=Task View]", 103 | "controlStyles[5].styles[0]": "Margin=0,0,0,0", 104 | "controlStyles[6].target": "Taskbar.TaskListButton#TaskListButton[AutomationProperties.Name=Copilot] > Taskbar.TaskListLabeledButtonPanel#IconPanel > Border#BackgroundElement", 105 | "controlStyles[6].styles[0]": "Background:=", 106 | "controlStyles[7].target": "Taskbar.SearchBoxButton", 107 | "controlStyles[7].styles[0]": "Margin=0,0,0,0", 108 | "controlStyles[8].target": "Border#BackgroundElement", 109 | "controlStyles[8].styles[0]": "BorderThickness=0", 110 | "controlStyles[9].target": "Taskbar.TaskListLabeledButtonPanel@CommonStates > Border#BackgroundElement", 111 | "controlStyles[9].styles[0]": "Background@InactiveNormal:=", 112 | "controlStyles[9].styles[1]": "Background@ActiveNormal:=", 113 | "controlStyles[9].styles[2]": "Background@InactivePointerOver:=", 114 | "controlStyles[9].styles[3]": "Background@ActivePointerOver:=", 115 | "controlStyles[9].styles[4]": "CornerRadius=9", 116 | "controlStyles[9].styles[5]": "Margin =1,0,1,0", 117 | "controlStyles[9].styles[6]": "Background@MultiWindowNormal:=", 118 | "controlStyles[9].styles[7]": "Background@MultiWindowPointerOver:=", 119 | "controlStyles[9].styles[8]": "Background@MultiWindowActive:=", 120 | "controlStyles[9].styles[9]": "Background@MultiWindowPressed:=", 121 | "controlStyles[10].target": "Border#MultiWindowElement", 122 | "controlStyles[10].styles[0]": "CornerRadius = 8", 123 | "controlStyles[10].styles[1]": "Padding = 7,0,8,0", 124 | "controlStyles[10].styles[2]": "Background:=", 125 | "controlStyles[11].target": "Taskbar.TaskListLabeledButtonPanel > TextBlock#LabelControl", 126 | "controlStyles[11].styles[0]": "Margin=0,0,2,0", 127 | "controlStyles[12].target": "Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Rectangle#RunningIndicator", 128 | "controlStyles[12].styles[0]": "Fill=White", 129 | "controlStyles[12].styles[1]": "RadiusX=2", 130 | "controlStyles[12].styles[2]": "RadiusY=2", 131 | "controlStyles[12].styles[3]": "Height=4", 132 | "controlStyles[12].styles[4]": "Width=10", 133 | "controlStyles[12].styles[5]": "Fill@ActiveRunningIndicator:=", 134 | "controlStyles[12].styles[6]": "Width@ActiveRunningIndicator=20", 135 | "controlStyles[13].target": "Grid#SystemTrayFrameGrid", 136 | "controlStyles[13].styles[0]": "Background:=", 137 | "controlStyles[13].styles[1]": "CornerRadius=10", 138 | "controlStyles[13].styles[2]": "Margin=0,5,12,5", 139 | "controlStyles[13].styles[3]": "Padding=10,0,0,0", 140 | "controlStyles[14].target": "Border#BackgroundBorder", 141 | "controlStyles[14].styles[0]": "Margin=2,5,2,5", 142 | "controlStyles[14].styles[1]": "CornerRadius=8", 143 | "controlStyles[15].target": "Grid#OverflowRootGrid > Border", 144 | "controlStyles[15].styles[0]": "Background:=", 145 | "controlStyles[14].styles[2]": "BorderThickness = 0" 146 | } 147 | ``` 148 |
149 | -------------------------------------------------------------------------------- /Themes/Matter/Search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Matter/Search.png -------------------------------------------------------------------------------- /Themes/Matter/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Matter/screenshot.png -------------------------------------------------------------------------------- /Themes/RosePine/README.md: -------------------------------------------------------------------------------- 1 | # RosePine theme for Windows 11 Taskbar Styler 2 | 3 | This theme was originally [shared on 4 | Reddit](https://www.reddit.com/r/desktops/comments/1e0o08e/windows_11_rose_pine_been_messing_with_windhawk_a/). 5 | 6 | **Author**: [asev](https://github.com/lunar-os) 7 | 8 | ![Screenshot](screenshot.png) 9 | 10 | ## Notes 11 | 12 | * This theme is intended to be used with the following mods and settings. 13 | Install each mod, go to the "Advanced" tab, copy the settings to the text box 14 | under "Mod settings" and click "Save". 15 | * [Taskbar height and icon size](https://windhawk.net/mods/taskbar-icon-size): 16 | [Settings](https://github.com/lunar-os/windowsdesktop/blob/main/WindhawkConfigs/Taskbar%20height%20and%20icon%20size). 17 | * [Taskbar Clock 18 | Customization](https://windhawk.net/mods/taskbar-clock-customization): 19 | [Settings](https://github.com/lunar-os/windowsdesktop/blob/main/WindhawkConfigs/Taskbar%20Clock%20Customization). 20 | * [Taskbar Labels for Windows 11](https://windhawk.net/mods/taskbar-labels): 21 | [Settings](https://github.com/lunar-os/windowsdesktop/blob/main/WindhawkConfigs/Taskbar%20Labels). 22 | * The theme is based off of [RosePine Theme](https://rosepinetheme.com/). 23 | * It removes the start button and the network icon. If you need these, add them 24 | using the 25 | [guide](https://github.com/ramensoftware/windows-11-taskbar-styling-guide). 26 | * Font used is [JetBrainsMono Nerd 27 | Font](https://github.com/ryanoasis/nerd-fonts/releases/download/v3.2.1/JetBrainsMono.zip). 28 | 29 | ## Theme selection 30 | 31 | The theme is integrated into the mod, and can be simply selected from the mod's 32 | settings: 33 | 34 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 35 | * Go to the "Settings" tab. 36 | * Select the theme and save the settings. 37 | 38 | ## Manual installation 39 | 40 | The theme styles can also be imported manually. To do that, follow these steps: 41 | 42 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 43 | * Go to the "Advanced" tab. 44 | * Copy the content below to the text box under "Mod settings" and click "Save". 45 | 46 |
47 | Content to import (click to expand) 48 | 49 | ```json 50 | { 51 | "controlStyles[0].target": "Taskbar.TaskListButton", 52 | "controlStyles[0].styles[0]": "CornerRadius=3", 53 | "controlStyles[1].target": "SystemTray.TextIconContent > Grid#ContainerGrid > SystemTray.AdaptiveTextBlock#Base > TextBlock#InnerTextBlock", 54 | "controlStyles[1].styles[0]": "FontSize=16", 55 | "controlStyles[2].target": "SystemTray.NotifyIconView#NotifyItemIcon", 56 | "controlStyles[2].styles[0]": "MinWidth=25", 57 | "controlStyles[3].target": "SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[1] > SystemTray.IconView > Grid > Grid", 58 | "controlStyles[3].styles[0]": "Visibility=Collapsed", 59 | "controlStyles[4].target": "SystemTray.TextIconContent > Grid#ContainerGrid", 60 | "controlStyles[4].styles[0]": "Padding=2", 61 | "controlStyles[5].target": "SystemTray.ChevronIconView", 62 | "controlStyles[5].styles[0]": "MinWidth=27", 63 | "controlStyles[6].target": "SystemTray.OmniButton#NotificationCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter > SystemTray.IconView#SystemTrayIcon > Grid > Grid > SystemTray.TextIconContent", 64 | "controlStyles[6].styles[0]": "Visibility=Collapsed", 65 | "controlStyles[7].target": "Taskbar.TaskListLabeledButtonPanel > Border#BackgroundElement", 66 | "controlStyles[7].styles[0]": "Background:=#302d47", 67 | "controlStyles[8].target": "Grid#SystemTrayFrameGrid", 68 | "controlStyles[8].styles[0]": "Background:=#302d47", 69 | "controlStyles[8].styles[1]": "CornerRadius=6", 70 | "controlStyles[8].styles[2]": "Margin=0,5,4,4", 71 | "controlStyles[8].styles[3]": "Padding=3,0,-8,0", 72 | "controlStyles[7].styles[1]": "CornerRadius=6", 73 | "controlStyles[9].target": "Taskbar.TaskListLabeledButtonPanel@CommonStates > Rectangle#RunningIndicator", 74 | "controlStyles[9].styles[0]": "Height=27", 75 | "controlStyles[9].styles[1]": "RadiusX=5", 76 | "controlStyles[9].styles[2]": "RadiusY=5", 77 | "controlStyles[9].styles[3]": "StrokeThickness=2", 78 | "controlStyles[9].styles[4]": "Stroke@InactivePointerOver=#ebbcba", 79 | "controlStyles[9].styles[5]": "Stroke@InactivePressed=#ebbcba", 80 | "controlStyles[9].styles[6]": "Stroke@ActiveNormal=#ebbcba", 81 | "controlStyles[9].styles[7]": "Stroke@ActivePointerOver=#ebbcba", 82 | "controlStyles[9].styles[8]": "Stroke@ActivePressed=#ebbcba", 83 | "controlStyles[9].styles[9]": "Fill=Transparent", 84 | "controlStyles[9].styles[10]": "Width=37", 85 | "controlStyles[9].styles[11]": "VerticalAlignment=1", 86 | "controlStyles[9].styles[12]": "Canvas.ZIndex=1", 87 | "controlStyles[10].target": "SystemTray.ImageIconContent > Grid#ContainerGrid > Image", 88 | "controlStyles[10].styles[0]": "Width=13", 89 | "controlStyles[11].target": "SystemTray.TextIconContent > Grid#ContainerGrid > SystemTray.AdaptiveTextBlock#Base > TextBlock#InnerTextBlock", 90 | "controlStyles[11].styles[0]": "FontSize=14", 91 | "controlStyles[12].target": "TextBlock#LabelControl", 92 | "controlStyles[12].styles[0]": "FontFamily=JetBrainsMono NF", 93 | "controlStyles[12].styles[2]": "Padding=2,0,8,0", 94 | "controlStyles[13].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton]", 95 | "controlStyles[13].styles[0]": "Visibility=Collapsed", 96 | "controlStyles[12].styles[1]": "Foreground=#e0def4", 97 | "controlStyles[14].target": "Windows.UI.Xaml.Controls.TextBlock#InnerTextBlock[Text=]", 98 | "controlStyles[14].styles[0]": "Text=", 99 | "controlStyles[15].target": "Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill", 100 | "controlStyles[15].styles[0]": "Fill=Transparent", 101 | "controlStyles[16].target": "Taskbar.TaskbarBackground#HoverFlyoutBackgroundControl > Grid > Rectangle#BackgroundFill", 102 | "controlStyles[16].styles[0]": "Fill=#302d47", 103 | "controlStyles[17].target": "Rectangle#BackgroundStroke", 104 | "controlStyles[17].styles[0]": "Fill=Transparent", 105 | "controlStyles[18].target": "Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel > Border#BackgroundElement", 106 | "controlStyles[18].styles[0]": "Background=#302d47", 107 | "controlStyles[19].target": "TextBlock#DateInnerTextBlock", 108 | "controlStyles[19].styles[0]": "Margin=0,0,0,-2", 109 | "controlStyles[20].target": "Grid#OverflowRootGrid > Border", 110 | "controlStyles[20].styles[0]": "Background=#302d47" 111 | } 112 | ``` 113 |
114 | -------------------------------------------------------------------------------- /Themes/RosePine/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/RosePine/screenshot.png -------------------------------------------------------------------------------- /Themes/SimplyTransparent/README.md: -------------------------------------------------------------------------------- 1 | # SimplyTransparent theme for Windows 11 Taskbar Styler 2 | 3 | **Author**: [Osprey00](https://github.com/Osprey00) 4 | 5 | Makes the taskbar background transparent. For users who want that and no other customizations. 6 | 7 | ![Screenshot](screenshot.png) 8 | 9 | ## Manual installation 10 | 11 | To manually import this style, follow these steps: 12 | 13 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 14 | * Go to the "Advanced" tab. 15 | * Copy the content below to the text box under "Mod settings" and click "Save". 16 | 17 |
18 | Content to import (click to expand) 19 | 20 | ```json 21 | { 22 | "controlStyles[0].target":"Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill", 23 | "controlStyles[0].styles[0]":"Fill=Transparent", 24 | "controlStyles[1].target":"Rectangle#BackgroundStroke", 25 | "controlStyles[1].styles[0]":"Fill=Transparent" 26 | } 27 | ``` 28 |
29 | -------------------------------------------------------------------------------- /Themes/SimplyTransparent/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/SimplyTransparent/screenshot.png -------------------------------------------------------------------------------- /Themes/Squircle/README.md: -------------------------------------------------------------------------------- 1 | # Squircle theme for Windows 11 Taskbar Styler 2 | 3 | This theme was originally [shared on 4 | Reddit](https://www.reddit.com/r/desktops/comments/1dna90y/comment/la4vxw1/). 5 | 6 | **Author**: [AsvnDG](https://github.com/AsvnDG) 7 | 8 | ![Screenshot](screenshot.png) \ 9 | ![Screenshot](screenshot-rw.png) 10 | 11 | ## Notes 12 | 13 | * This theme is intended and has been designed to be used with the search box 14 | set to either "Icon only" or "Hidden". If you choose one of the other search 15 | box styles, you may need to adjust the margins slightly due to all search 16 | styles sharing the same ID's in Windows. This note will be edited should this 17 | change. 18 | * Available in 2 variants. Please choose the style that matches the location of 19 | your weather widget, regardless of if you have it enabled or not. 20 | 21 | ## Theme selection 22 | 23 | The theme is integrated into the mod, and can be simply selected from the mod's 24 | settings: 25 | 26 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 27 | * Go to the "Settings" tab. 28 | * Select the theme and save the settings. 29 | 30 | ## Manual installation 31 | 32 | The theme styles can also be imported manually. To do that, follow these steps: 33 | 34 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 35 | * Go to the "Advanced" tab. 36 | * Copy the content below to the text box under "Mod settings" and click "Save". 37 | 38 | #### Weather on Left: 39 |
40 | Content to import (click to expand) 41 | 42 | ```json 43 | { 44 | "controlStyles[0].target": "Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill", 45 | "controlStyles[0].styles[0]": "Fill=Transparent", 46 | "controlStyles[1].target": "Taskbar.TaskbarBackground#HoverFlyoutBackgroundControl > Grid > Rectangle#BackgroundFill", 47 | "controlStyles[1].styles[0]": "Fill=#CC222222", 48 | "controlStyles[2].target": "Taskbar.TaskListButtonPanel@CommonStates > Border#BackgroundElement", 49 | "controlStyles[2].styles[0]": "CornerRadius=5", 50 | "controlStyles[2].styles[1]": "Background:=", 51 | "controlStyles[2].styles[2]": "Background@InactivePointerOver:=", 52 | "controlStyles[2].styles[3]": "Background@ActivePointerOver:=", 53 | "controlStyles[2].styles[4]": "Background@ActiveNormal:=", 54 | "controlStyles[2].styles[5]": "Background@InactiveNormal:=", 55 | "controlStyles[2].styles[6]": "Background@InactivePressed:=", 56 | "controlStyles[2].styles[7]": "Background@ActivePressed:=", 57 | "controlStyles[3].target": "Grid#SystemTrayFrameGrid", 58 | "controlStyles[3].styles[0]": "Background:=", 59 | "controlStyles[3].styles[1]": "CornerRadius=5", 60 | "controlStyles[3].styles[2]": "Margin=0,5,14,5", 61 | "controlStyles[3].styles[3]": "Padding=10,0,0,0", 62 | "controlStyles[4].target": "Rectangle#RunningIndicator", 63 | "controlStyles[4].styles[0]": "Fill=Transparent", 64 | "controlStyles[4].styles[1]": "RadiusX=5", 65 | "controlStyles[4].styles[2]": "RadiusY=5", 66 | "controlStyles[4].styles[3]": "Height=38", 67 | "controlStyles[4].styles[4]": "Width=40", 68 | "controlStyles[5].target": "Taskbar.TaskListLabeledButtonPanel > TextBlock#LabelControl", 69 | "controlStyles[5].styles[0]": "Margin=4,0,0,0", 70 | "controlStyles[5].styles[1]": "Foreground=White", 71 | "controlStyles[6].target": "Taskbar.SearchBoxButton", 72 | "controlStyles[6].styles[0]": "Foreground=White", 73 | "controlStyles[6].styles[1]": "Margin=-11,0,0,0", 74 | "controlStyles[7].target": "TextBlock#SearchBoxTextBlock", 75 | "controlStyles[7].styles[0]": "FontSize=12", 76 | "controlStyles[7].styles[1]": "Foreground=White", 77 | "controlStyles[8].target": "Rectangle#BackgroundStroke", 78 | "controlStyles[8].styles[0]": "Fill=Transparent", 79 | "controlStyles[9].target": "Grid", 80 | "controlStyles[9].styles[0]": "RequestedTheme=2", 81 | "controlStyles[10].target": "Taskbar.TaskListButton#TaskListButton[AutomationProperties.Name=Copilot] > Taskbar.TaskListLabeledButtonPanel#IconPanel > Border#BackgroundElement", 82 | "controlStyles[10].styles[0]": "Background:=", 83 | "controlStyles[11].target": "Border#BackgroundBorder", 84 | "controlStyles[11].styles[0]": "Margin=0,3,0,3", 85 | "controlStyles[11].styles[1]": "CornerRadius=5", 86 | "controlStyles[12].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel > Border#BackgroundElement@CommonStates", 87 | "controlStyles[12].styles[0]": "Background@InactivePointerOver:=", 88 | "controlStyles[12].styles[1]": "Background:=", 89 | "controlStyles[13].target": "Border#MultiWindowElement", 90 | "controlStyles[13].styles[0]": "Background:=", 91 | "controlStyles[14].target": "TextBlock#TimeInnerTextBlock", 92 | "controlStyles[14].styles[0]": "Foreground=White", 93 | "controlStyles[15].target": "TextBlock#DateInnerTextBlock", 94 | "controlStyles[15].styles[0]": "Foreground=White", 95 | "controlStyles[16].target": "SystemTray.TextIconContent > Grid > SystemTray.AdaptiveTextBlock#Base > TextBlock", 96 | "controlStyles[16].styles[0]": "Foreground=White", 97 | "controlStyles[17].target": "Border#BackgroundElement", 98 | "controlStyles[17].styles[0]": "BorderThickness=0", 99 | "controlStyles[18].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton", 100 | "controlStyles[18].styles[0]": "Margin=-11,0,0,0", 101 | "controlStyles[19].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.Name=Task View]", 102 | "controlStyles[19].styles[0]": "Margin=-12,0,0,0", 103 | "controlStyles[20].target": "taskbar:TaskListLabeledButtonPanel@RunningIndicatorStates > Border", 104 | "controlStyles[20].styles[0]": "Background@ActiveRunningIndicator:=", 105 | "controlStyles[20].styles[1]": "Background@InactiveRunningIndicator:=", 106 | "controlStyles[20].styles[2]": "Background@InactiveRunningIndicatorPointerOver:=", 107 | "controlStyles[21].target": "Taskbar.TaskListLabeledButtonPanel@CommonStates > Border#BackgroundElement", 108 | "controlStyles[21].styles[0]": "Background@InactivePointerOver:=", 109 | "controlStyles[21].styles[1]": "Background@ActivePointerOver:=", 110 | "controlStyles[21].styles[2]": "Background@InactiveNormal:=", 111 | "controlStyles[21].styles[3]": "Background@ActiveNormal:=", 112 | "controlStyles[21].styles[4]": "Background@ActivePressed:=", 113 | "controlStyles[21].styles[5]": "Background@InactivePressed:=", 114 | "controlStyles[21].styles[6]": "CornerRadius=5", 115 | "controlStyles[21].styles[7]": "Margin=1" 116 | } 117 | ``` 118 |
119 | 120 | #### Weather on Right: 121 |
122 | Content to import (click to expand) 123 | 124 | ```json 125 | { 126 | "controlStyles[0].target": "Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill", 127 | "controlStyles[0].styles[0]": "Fill=Transparent", 128 | "controlStyles[1].target": "Taskbar.TaskbarBackground#HoverFlyoutBackgroundControl > Grid > Rectangle#BackgroundFill", 129 | "controlStyles[1].styles[0]": "Fill=#CC222222", 130 | "controlStyles[2].target": "Taskbar.TaskListButtonPanel@CommonStates > Border#BackgroundElement", 131 | "controlStyles[2].styles[0]": "CornerRadius=5", 132 | "controlStyles[2].styles[1]": "Background:=", 133 | "controlStyles[2].styles[2]": "Background@InactivePointerOver:=", 134 | "controlStyles[2].styles[3]": "Background@ActivePointerOver:=", 135 | "controlStyles[2].styles[4]": "Background@ActiveNormal:=", 136 | "controlStyles[2].styles[5]": "Background@InactivePressed:=", 137 | "controlStyles[2].styles[6]": "Background@ActivePressed:=", 138 | "controlStyles[3].target": "Grid#SystemTrayFrameGrid", 139 | "controlStyles[3].styles[0]": "Background:=", 140 | "controlStyles[3].styles[1]": "CornerRadius=5", 141 | "controlStyles[3].styles[2]": "Margin=0,5,12,5", 142 | "controlStyles[3].styles[3]": "Padding=10,0,0,0", 143 | "controlStyles[4].target": "Rectangle#RunningIndicator", 144 | "controlStyles[4].styles[0]": "Fill=Transparent", 145 | "controlStyles[4].styles[1]": "RadiusX=5", 146 | "controlStyles[4].styles[2]": "RadiusY=5", 147 | "controlStyles[4].styles[3]": "Height=38", 148 | "controlStyles[4].styles[4]": "Width=40", 149 | "controlStyles[5].target": "Taskbar.TaskListLabeledButtonPanel > TextBlock#LabelControl", 150 | "controlStyles[5].styles[0]": "Margin=4,0,0,0", 151 | "controlStyles[5].styles[1]": "Foreground=White", 152 | "controlStyles[6].target": "Taskbar.SearchBoxButton", 153 | "controlStyles[6].styles[0]": "Foreground=White", 154 | "controlStyles[6].styles[1]": "Margin=0,0,-10,0", 155 | "controlStyles[7].target": "TextBlock#SearchBoxTextBlock", 156 | "controlStyles[7].styles[0]": "FontSize=12", 157 | "controlStyles[7].styles[1]": "Foreground=White", 158 | "controlStyles[8].target": "Rectangle#BackgroundStroke", 159 | "controlStyles[8].styles[0]": "Fill=Transparent", 160 | "controlStyles[9].target": "Grid", 161 | "controlStyles[9].styles[0]": "RequestedTheme=2", 162 | "controlStyles[10].target": "Taskbar.TaskListButton#TaskListButton[AutomationProperties.Name=Copilot]", 163 | "controlStyles[10].styles[0]": "Background:=", 164 | "controlStyles[10].styles[1]": "Margin=12,0,12,0", 165 | "controlStyles[10].styles[2]": "CornerRadius=0", 166 | "controlStyles[11].target": "Border#BackgroundBorder", 167 | "controlStyles[11].styles[0]": "Margin=0,3,0,3", 168 | "controlStyles[11].styles[1]": "CornerRadius=5", 169 | "controlStyles[12].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel > Border#BackgroundElement@CommonStates", 170 | "controlStyles[12].styles[0]": "Background@InactivePointerOver:=", 171 | "controlStyles[12].styles[1]": "Background:=", 172 | "controlStyles[12].styles[2]": "Width=125", 173 | "controlStyles[13].target": "Border#MultiWindowElement", 174 | "controlStyles[13].styles[0]": "Background:=", 175 | "controlStyles[14].target": "TextBlock#TimeInnerTextBlock", 176 | "controlStyles[14].styles[0]": "Foreground=White", 177 | "controlStyles[15].target": "TextBlock#DateInnerTextBlock", 178 | "controlStyles[15].styles[0]": "Foreground=White", 179 | "controlStyles[16].target": "SystemTray.TextIconContent > Grid > SystemTray.AdaptiveTextBlock#Base > TextBlock", 180 | "controlStyles[16].styles[0]": "Foreground=White", 181 | "controlStyles[17].target": "Border#BackgroundElement", 182 | "controlStyles[17].styles[0]": "BorderThickness=0", 183 | "controlStyles[18].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton", 184 | "controlStyles[18].styles[0]": "Margin=20,1,-20,1", 185 | "controlStyles[19].target": "Taskbar.ExperienceToggleButton", 186 | "controlStyles[19].styles[0]": "Margin=0,0,-11,0", 187 | "controlStyles[19].styles[1]": "Background:=", 188 | "controlStyles[20].target": "Taskbar.TaskListButton", 189 | "controlStyles[20].styles[0]": "Margin=12,0,-10,0", 190 | "controlStyles[21].target": "Grid#AugmentedEntryPointContentGrid", 191 | "controlStyles[21].styles[0]": "Margin=10,0,-5,0", 192 | "controlStyles[22].target": "taskbar:TaskListLabeledButtonPanel@RunningIndicatorStates > Border", 193 | "controlStyles[22].styles[0]": "Background@ActiveRunningIndicator:=", 194 | "controlStyles[22].styles[1]": "Background@InactiveRunningIndicator:=", 195 | "controlStyles[22].styles[2]": "Background@InactiveRunningIndicatorPointerOver:=", 196 | "controlStyles[23].target": "taskbar:TaskListLabeledButtonPanel@CommonStates > Border#BackgroundElement", 197 | "controlStyles[23].styles[0]": "Background@InactivePointerOver:=", 198 | "controlStyles[23].styles[1]": "Background@ActivePointerOver:=", 199 | "controlStyles[23].styles[2]": "Background@InactiveNormal:=", 200 | "controlStyles[23].styles[3]": "Background@ActiveNormal:=", 201 | "controlStyles[23].styles[4]": "Background@ActivePressed:=", 202 | "controlStyles[23].styles[5]": "Background@InactivePressed:=", 203 | "controlStyles[23].styles[6]": "CornerRadius=5", 204 | "controlStyles[23].styles[7]": "Margin=1" 205 | } 206 | ``` 207 |
208 | -------------------------------------------------------------------------------- /Themes/Squircle/screenshot-rw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Squircle/screenshot-rw.png -------------------------------------------------------------------------------- /Themes/Squircle/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Squircle/screenshot.png -------------------------------------------------------------------------------- /Themes/TaskbarXII/README.md: -------------------------------------------------------------------------------- 1 | # ✦ TaskbarXII theme for Windows 11 Taskbar Styler :3 2 | 3 | **Author**: [ryokr](https://github.com/ryokr) 4 | 5 | ![Demonstration](screenshot.png) \ 6 | ![Demonstration](screenshot_another.png) 7 | 8 | ## Notes 9 | 10 | - Currently, this theme is in a fixed position. If you have many pinned apps, it is recommended to use the `Search pill` or `Search icon`. 11 | 12 | - If your monitor resolution differs from **1920x1080 at 100% scale**, you may need to adjust the value of `TranslateX` by adding the following styles to the mod's settings: 13 | 14 | ``` 15 | Target: 16 | Taskbar.TaskbarFrame#TaskbarFrame 17 | 18 | Styles: 19 | HorizontalAlignment=Right 20 | Transform3D:= 21 | Width=Auto 22 | Height=56 23 | ``` 24 | 25 | ![Main](screenshot_section_main.png) 26 | 27 | ``` 28 | Target: 29 | SystemTray.SystemTrayFrame 30 | 31 | Styles: 32 | HorizontalAlignment=Left 33 | Transform3D:= 34 | Width=Auto 35 | Height=56 36 | ``` 37 | ![System Tray](screenshot_section_systray.png) 38 | 39 | - If you notice the background is missing under the window button, it means the `Widget` feature is disabled. 40 | 41 | ![Before](screenshot_widget_disabled.png) 42 | 43 | To fix this, either enable the `Widget` feature, or add the following styles to the mod's settings: 44 | 45 | ``` 46 | Target: 47 | Taskbar.TaskbarBackground#BackgroundControl 48 | 49 | Styles: 50 | Height=48 51 | Transform3D:= 52 | Opacity=0.7 53 | ``` 54 | This will override the default value of TranslateX="156.5" 55 | 56 | ![After](screenshot_widget_enabled.png) 57 | 58 | ## Suggested Windows settings 59 | 60 | - Use default taskbar alignment (center). 61 | - The widget should be enabled. 62 | - The display scale should be at 100 percent. 63 | - You can hide the bell icon via Notifications in Settings. 64 | 65 | ## Theme selection 66 | 67 | The theme is integrated into the mod, and can be simply selected from the mod's 68 | settings: 69 | 70 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 71 | * Go to the "Settings" tab. 72 | * Select the theme and save the settings. 73 | 74 | ## Manual installation 75 | 76 | The theme styles can also be imported manually. To do that, follow these steps: 77 | 78 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 79 | * Go to the "Advanced" tab. 80 | * Copy the content below to the text box under "Mod settings" and click "Save". 81 | 82 |
83 | Content to import (click to expand) 84 | 85 | ```json 86 | { 87 | "controlStyles[0].target": "ScrollViewer > ScrollContentPresenter > Border > Grid", 88 | "controlStyles[0].styles[0]": "Background:=", 89 | "controlStyles[1].target": "Taskbar.TaskbarFrame#TaskbarFrame", 90 | "controlStyles[1].styles[0]": "HorizontalAlignment=Right", 91 | "controlStyles[1].styles[1]": "Transform3D:=", 92 | "controlStyles[1].styles[2]": "Width=Auto", 93 | "controlStyles[1].styles[3]": "Height=56", 94 | "controlStyles[2].target": "Taskbar.TaskbarFrame#TaskbarFrame > Grid", 95 | "controlStyles[2].styles[0]": "Height=48", 96 | "controlStyles[2].styles[1]": "CornerRadius=4", 97 | "controlStyles[3].target": "Taskbar.TaskbarBackground#BackgroundControl", 98 | "controlStyles[3].styles[0]": "Height=48", 99 | "controlStyles[3].styles[1]": "Transform3D:=", 100 | "controlStyles[3].styles[2]": "Opacity=0.7", 101 | "controlStyles[4].target": "Taskbar.TaskbarBackground > Grid", 102 | "controlStyles[4].styles[0]": "CornerRadius=4", 103 | "controlStyles[4].styles[1]": "Opacity=1", 104 | "controlStyles[5].target": "Microsoft.UI.Xaml.Controls.ItemsRepeater#TaskbarFrameRepeater", 105 | "controlStyles[5].styles[0]": "Margin=0,0,3,0", 106 | "controlStyles[6].target": "Taskbar.SearchBoxButton > Taskbar.TaskListButtonPanel", 107 | "controlStyles[6].styles[0]": "Margin=2,0,6,0", 108 | "controlStyles[7].target": "Taskbar.SearchBoxButton > Taskbar.TaskListButtonPanel > TextBlock", 109 | "controlStyles[7].styles[0]": "Text=✦ Meow", 110 | "controlStyles[8].target": "Windows.UI.Xaml.Shapes.Rectangle#BackgroundStroke", 111 | "controlStyles[8].styles[0]": "Visibility=Collapsed", 112 | "controlStyles[9].target": "Taskbar.AugmentedEntryPointButton > Taskbar.TaskListButtonPanel", 113 | "controlStyles[9].styles[0]": "Background:=", 114 | "controlStyles[9].styles[1]": "CornerRadius=4", 115 | "controlStyles[9].styles[2]": "Padding=0", 116 | "controlStyles[9].styles[3]": "Margin=0,0,7,0", 117 | "controlStyles[10].target": "Taskbar.AugmentedEntryPointButton > Taskbar.TaskListButtonPanel > Grid", 118 | "controlStyles[10].styles[0]": "Margin=8,0,0,0", 119 | "controlStyles[11].target": "Border#LargeTicker1", 120 | "controlStyles[11].styles[0]": "Margin=0,2,4,0", 121 | "controlStyles[12].target": "Border#LargeTicker1 > AdaptiveCards.Rendering.Uwp.WholeItemsPanel > Image", 122 | "controlStyles[12].styles[0]": "MaxHeight=27", 123 | "controlStyles[12].styles[1]": "MaxWidth=27", 124 | "controlStyles[13].target": "Border#LargeTicker1 > AdaptiveCards.Rendering.Uwp.WholeItemsPanel > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer", 125 | "controlStyles[13].styles[0]": "MaxHeight=27", 126 | "controlStyles[13].styles[1]": "MaxWidth=27", 127 | "controlStyles[14].target": "SystemTray.SystemTrayFrame", 128 | "controlStyles[14].styles[0]": "HorizontalAlignment=Left", 129 | "controlStyles[14].styles[1]": "Transform3D:=", 130 | "controlStyles[15].target": "Grid#SystemTrayFrameGrid", 131 | "controlStyles[15].styles[0]": "Background:=", 132 | "controlStyles[15].styles[1]": "CornerRadius=4", 133 | "controlStyles[15].styles[2]": "Padding=8,3,0,3", 134 | "controlStyles[16].target": "SystemTray.Stack#SecondaryClockStack", 135 | "controlStyles[16].styles[0]": "Grid.Column=8", 136 | "controlStyles[17].target": "SystemTray.OmniButton#ControlCenterButton", 137 | "controlStyles[17].styles[0]": "Grid.Column=4", 138 | "controlStyles[18].target": "SystemTray.OmniButton#NotificationCenterButton", 139 | "controlStyles[18].styles[0]": "Grid.Column=5", 140 | "controlStyles[19].target": "SystemTray.Stack#MainStack", 141 | "controlStyles[19].styles[0]": "Grid.Column=6", 142 | "controlStyles[20].target": "SystemTray.Stack#ShowDesktopStack", 143 | "controlStyles[20].styles[0]": "Grid.Column=7", 144 | "controlStyles[21].target": "TextBlock#InnerTextBlock[Text=]", 145 | "controlStyles[21].styles[0]": "Text=", 146 | "controlStyles[22].target": "TextBlock#TimeInnerTextBlock", 147 | "controlStyles[22].styles[0]": "Transform3D:=", 148 | "controlStyles[22].styles[1]": "FontSize=15", 149 | "controlStyles[22].styles[2]": "FontWeight=Bold", 150 | "controlStyles[22].styles[3]": "Margin=94,0,0,0", 151 | "controlStyles[23].target": "TextBlock#DateInnerTextBlock", 152 | "controlStyles[23].styles[0]": "Transform3D:=", 153 | "controlStyles[23].styles[1]": "FontSize=15", 154 | "controlStyles[23].styles[2]": "FontWeight=SemiBold", 155 | "controlStyles[23].styles[3]": "HorizontalAlignment=Left" 156 | } 157 | ``` 158 |
159 | -------------------------------------------------------------------------------- /Themes/TaskbarXII/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/TaskbarXII/screenshot.png -------------------------------------------------------------------------------- /Themes/TaskbarXII/screenshot_another.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/TaskbarXII/screenshot_another.png -------------------------------------------------------------------------------- /Themes/TaskbarXII/screenshot_section_main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/TaskbarXII/screenshot_section_main.png -------------------------------------------------------------------------------- /Themes/TaskbarXII/screenshot_section_systray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/TaskbarXII/screenshot_section_systray.png -------------------------------------------------------------------------------- /Themes/TaskbarXII/screenshot_widget_disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/TaskbarXII/screenshot_widget_disabled.png -------------------------------------------------------------------------------- /Themes/TaskbarXII/screenshot_widget_enabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/TaskbarXII/screenshot_widget_enabled.png -------------------------------------------------------------------------------- /Themes/TranslucentTaskbar/README.md: -------------------------------------------------------------------------------- 1 | # TranslucentTaskbar theme for Windows 11 Taskbar Styler 2 | 3 | **Author**: [Undisputed00x](https://github.com/Undisputed00x) 4 | 5 | ![Screenshot](screenshot.png) 6 | 7 | ## Theme selection 8 | 9 | The theme is integrated into the mod, and can be simply selected from the mod's 10 | settings: 11 | 12 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 13 | * Go to the "Settings" tab. 14 | * Select the theme and save the settings. 15 | 16 | ## Manual installation 17 | 18 | The theme styles can also be imported manually. To do that, follow these steps: 19 | 20 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 21 | * Go to the "Advanced" tab. 22 | * Copy the content below to the text box under "Mod settings" and click "Save". 23 | 24 |
25 | Content to import (click to expand) 26 | 27 | ```json 28 | { 29 | "controlStyles[0].target": "Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill", 30 | "controlStyles[0].styles[0]": "Fill=$CommonBgBrush", 31 | "controlStyles[1].target": "Taskbar.TaskbarBackground#HoverFlyoutBackgroundControl > Grid > Rectangle#BackgroundFill", 32 | "controlStyles[1].styles[0]": "Fill=$CommonBgBrush", 33 | "controlStyles[2].target": "Rectangle#BackgroundStroke", 34 | "controlStyles[2].styles[0]": "Visibility=Collapsed", 35 | "controlStyles[3].target": "MenuFlyoutPresenter > Border", 36 | "controlStyles[3].styles[0]": "Background=$CommonBgBrush", 37 | "controlStyles[3].styles[1]": "BorderThickness=0,0,0,0", 38 | "controlStyles[3].styles[2]": "CornerRadius=14", 39 | "controlStyles[3].styles[3]": "Padding=3,4,3,4", 40 | "controlStyles[4].target": "Border#OverflowFlyoutBackgroundBorder", 41 | "controlStyles[4].styles[0]": "Background=$CommonBgBrush", 42 | "controlStyles[4].styles[1]": "BorderThickness=0,0,0,0", 43 | "controlStyles[4].styles[2]": "CornerRadius=15", 44 | "controlStyles[4].styles[3]": "Margin=-2,-2,-2,-2", 45 | "styleConstants[0]": "CommonBgBrush=" 46 | } 47 | ``` 48 |
49 | -------------------------------------------------------------------------------- /Themes/TranslucentTaskbar/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/TranslucentTaskbar/screenshot.png -------------------------------------------------------------------------------- /Themes/WinVista/README.md: -------------------------------------------------------------------------------- 1 | # Windows Vista theme for Windows 11 Taskbar Styler 2 | 3 | **Author**: [Haitch-1](https://github.com/Haitch-1) 4 | 5 | ![Screenshot](screenshot.png) 6 | 7 | ## Notes 8 | 9 | This theme was intended to be used with a slim taskbar, you may achieve a slim taskbar with this mod: 10 | 11 | * [Taskbar height and icon size](https://windhawk.net/mods/taskbar-icon-size) 12 | 13 | With these settings: 14 | 15 | ```json 16 | { 17 | "IconSize": 16, 18 | "TaskbarHeight": 32, 19 | "TaskbarButtonWidth": 38 20 | } 21 | ``` 22 | 23 | ## Theme selection 24 | 25 | The theme is integrated into the mod, and can be simply selected from the mod's 26 | settings: 27 | 28 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 29 | * Go to the "Settings" tab. 30 | * Select the theme and save the settings. 31 | 32 | ## Manual installation 33 | 34 | The theme styles can also be imported manually. To do that, follow these steps: 35 | 36 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 37 | * Go to the "Advanced" tab. 38 | * Copy the content below to the text box under "Mod settings" and click "Save". 39 | 40 |
41 | Content to import (click to expand) 42 | 43 | ```json 44 | { 45 | "controlStyles[0].target": "Taskbar.ExperienceToggleButton", 46 | "controlStyles[0].styles[0]": "CornerRadius=2", 47 | "controlStyles[1].target": "Taskbar.SearchBoxButton", 48 | "controlStyles[1].styles[0]": "CornerRadius=2", 49 | "controlStyles[2].target": "Taskbar.TaskListButton", 50 | "controlStyles[2].styles[0]": "CornerRadius=2", 51 | "controlStyles[3].target": "Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Rectangle#RunningIndicator", 52 | "controlStyles[3].styles[0]": "Height=2", 53 | "controlStyles[3].styles[1]": "Width@ActiveRunningIndicator=30", 54 | "controlStyles[3].styles[2]": "Width@InactiveRunningIndicator=8", 55 | "controlStyles[3].styles[3]": "Fill@ActiveRunningIndicator=#00BEE0", 56 | "controlStyles[3].styles[4]": "Fill@InactiveRunningIndicator=#DDDDDD", 57 | "controlStyles[4].target": "Rectangle#BackgroundFill", 58 | "controlStyles[4].styles[0]": "Fill:=", 59 | "controlStyles[5].target": "Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Border", 60 | "controlStyles[5].styles[0]": "Background@ActiveRunningIndicator:=", 61 | "controlStyles[5].styles[1]": "CornerRadius=2", 62 | "controlStyles[5].styles[2]": "Background@RequestingAttentionRunningIndicator:=", 63 | "controlStyles[5].styles[3]": "BorderBrush=#33101010", 64 | "controlStyles[5].styles[4]": "BorderThickness=1", 65 | "controlStyles[5].styles[5]": "BorderBrush@NoRunningIndicator=Transparent", 66 | "controlStyles[5].styles[6]": "Background@NoRunningIndicator=Transparent", 67 | "controlStyles[5].styles[7]": "Background@ActiveRunningIndicator=#55BBBBBB", 68 | "controlStyles[5].styles[8]": "BorderBrush@ActiveRunningIndicator=#55212121", 69 | "controlStyles[6].target": "Taskbar.TaskListLabeledButtonPanel@CommonStates > Border#BackgroundElement", 70 | "controlStyles[6].styles[0]": "Margin=0,0,0,2", 71 | "controlStyles[6].styles[1]": "BorderThickness=1", 72 | "controlStyles[6].styles[2]": "Background@ActivePointerOver=#88DDDDDD", 73 | "controlStyles[6].styles[3]": "Background@ActiveNormal=#33BBBBBB", 74 | "controlStyles[6].styles[4]": "Background@InactivePointerOver=#33BBBBBB", 75 | "controlStyles[6].styles[5]": "BorderBrush@ActiveNormal=#44AAAAAA", 76 | "controlStyles[6].styles[6]": "BorderBrush@ActivePointerOver=#FF888888", 77 | "controlStyles[6].styles[7]": "BorderBrush@InactiveNormal=Transparent", 78 | "controlStyles[7].target": "Taskbar.TaskListLabeledButtonPanel > TextBlock", 79 | "controlStyles[7].styles[0]": "FontFamily=Segoe UI", 80 | "controlStyles[8].target": "SystemTray.AdaptiveTextBlock#LanguageInnerTextBlock > TextBlock#InnerTextBlock", 81 | "controlStyles[8].styles[0]": "FontFamily=Segoe UI", 82 | "controlStyles[9].target": "TextBlock#TimeInnerTextBlock", 83 | "controlStyles[9].styles[0]": "FontFamily=Segoe UI", 84 | "controlStyles[10].target": "Grid", 85 | "controlStyles[10].styles[0]": "RequestedTheme=2", 86 | "controlStyles[11].target": "Taskbar.TaskbarBackground#BackgroundControl > Grid", 87 | "controlStyles[11].styles[0]": "Background:=", 88 | "controlStyles[12].target": "Border#MultiWindowElement", 89 | "controlStyles[12].styles[0]": "Background=#BB212121", 90 | "controlStyles[12].styles[1]": "BorderThickness=0", 91 | "controlStyles[12].styles[2]": "Margin=0,2,1,4", 92 | "controlStyles[13].target": "Grid#OverflowRootGrid > Border", 93 | "controlStyles[13].styles[0]": "Background:=", 94 | "controlStyles[14].target": "Grid#OverflowRootGrid", 95 | "controlStyles[14].styles[0]": "Background:=", 96 | "controlStyles[14].styles[1]": "Padding=-1", 97 | "controlStyles[14].styles[2]": "Margin=0,6,0,6", 98 | "controlStyles[14].styles[3]": "CornerRadius=8" 99 | } 100 | ``` 101 |
102 | -------------------------------------------------------------------------------- /Themes/WinVista/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/WinVista/screenshot.png -------------------------------------------------------------------------------- /Themes/WinXP/Assets/orb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/WinXP/Assets/orb.png -------------------------------------------------------------------------------- /Themes/WinXP/README.md: -------------------------------------------------------------------------------- 1 | # WinXP theme for Windows 11 Taskbar Styler 2 | 3 | This theme was created as a showcase for the [Windows 11 Taskbar 4 | Styler](https://windhawk.net/mods/windows-11-taskbar-styler) mod, demonstrating 5 | various customizations that can be done with it. 6 | 7 | **Author**: [m417z](https://github.com/m417z) 8 | 9 | ![Screenshot](screenshot.png) 10 | 11 | ## Notes 12 | 13 | The following mods are recommended to use with this theme: 14 | 15 | * [Taskbar height and icon size](https://windhawk.net/mods/taskbar-icon-size): 16 | Can be used to reduce the height and the icon size of the taskbar. 17 | * [Taskbar Labels for Windows 11](https://windhawk.net/mods/taskbar-labels): Can 18 | be used to show labels for the taskbar buttons, and to make sure all buttons 19 | have an equal width. 20 | 21 | ## Theme selection 22 | 23 | The theme is integrated into the mod, and can be simply selected from the mod's 24 | settings: 25 | 26 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 27 | * Go to the "Settings" tab. 28 | * Select the theme and save the settings. 29 | 30 | ## Manual installation 31 | 32 | The theme styles can also be imported manually. To do that, follow these steps: 33 | 34 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 35 | * Go to the "Advanced" tab. 36 | * Copy the content below to the text box under "Mod settings" and click "Save". 37 | 38 |
39 | Content to import (click to expand) 40 | 41 | ```json 42 | { 43 | "controlStyles[0].target": "Rectangle#BackgroundStroke", 44 | "controlStyles[0].styles[0]": "Fill:= ", 45 | "controlStyles[0].styles[1]": "VerticalAlignment=Stretch", 46 | "controlStyles[0].styles[2]": "Height=Auto", 47 | "controlStyles[1].target": "Taskbar.TaskbarBackground#HoverFlyoutBackgroundControl > Grid > Rectangle#BackgroundFill", 48 | "controlStyles[1].styles[0]": "Fill:= ", 49 | "controlStyles[2].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton]", 50 | "controlStyles[2].styles[0]": "CornerRadius=0", 51 | "controlStyles[2].styles[1]": "Margin=0,0,4,0", 52 | "controlStyles[2].styles[2]": "MaxWidth=48", 53 | "controlStyles[3].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel", 54 | "controlStyles[3].styles[0]": "Padding=0", 55 | "controlStyles[3].styles[1]": "Background:= ", 56 | "controlStyles[3].styles[2]": "MaxWidth=48", 57 | "controlStyles[4].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Border#BackgroundElement", 58 | "controlStyles[4].styles[0]": "Background:=", 59 | "controlStyles[5].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer#Icon", 60 | "controlStyles[5].styles[0]": "Visibility=Collapsed", 61 | "controlStyles[6].target": "TextBlock#LabelControl", 62 | "controlStyles[6].styles[0]": "Foreground=White", 63 | "controlStyles[7].target": "Rectangle#RunningIndicator", 64 | "controlStyles[7].styles[0]": "Visibility=Collapsed", 65 | "controlStyles[8].target": "TextBlock#TimeInnerTextBlock", 66 | "controlStyles[8].styles[0]": "Foreground=White", 67 | "controlStyles[9].target": "TextBlock#DateInnerTextBlock", 68 | "controlStyles[9].styles[0]": "Foreground=White", 69 | "controlStyles[10].target": "SystemTray.TextIconContent > Grid > SystemTray.AdaptiveTextBlock#Base > TextBlock", 70 | "controlStyles[10].styles[0]": "Foreground=White", 71 | "controlStyles[11].target": "Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Border#BackgroundElement", 72 | "controlStyles[11].styles[0]": "Background@NoRunningIndicator=Transparent", 73 | "controlStyles[11].styles[1]": "Background@ActiveRunningIndicator:= ", 74 | "controlStyles[11].styles[2]": "Background:= ", 75 | "controlStyles[11].styles[3]": "BorderThickness@ActiveRunningIndicator=1", 76 | "controlStyles[11].styles[4]": "BorderBrush@NoRunningIndicator=Transparent", 77 | "controlStyles[11].styles[5]": "BorderBrush@ActiveRunningIndicator=#1B67D7", 78 | "controlStyles[11].styles[6]": "BorderBrush=#3358B5", 79 | "controlStyles[12].target": "Taskbar.TaskListButton", 80 | "controlStyles[12].styles[0]": "Margin=-1.5", 81 | "controlStyles[13].target": "Grid#SystemTrayFrameGrid", 82 | "controlStyles[13].styles[0]": "Background:= ", 83 | "controlStyles[13].styles[1]": "BorderThickness=1,1,0,1", 84 | "controlStyles[13].styles[2]": "BorderBrush=#095BC9", 85 | "controlStyles[13].styles[3]": "Padding=4,0,0,0", 86 | "controlStyles[14].target": "Grid#OverflowRootGrid > Border", 87 | "controlStyles[14].styles[0]": "Background:= " 88 | } 89 | ``` 90 |
91 | 92 | #### XP Zune 93 |
94 | Content to import (click to expand) 95 | 96 | ```json 97 | { 98 | "controlStyles[0].target": "Rectangle#BackgroundFill", 99 | "controlStyles[0].styles[0]": "Fill:= ", 100 | "controlStyles[0].styles[1]": "VerticalAlignment=Stretch", 101 | "controlStyles[0].styles[2]": "Height=Auto", 102 | "controlStyles[1].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton]", 103 | "controlStyles[1].styles[0]": "CornerRadius=0", 104 | "controlStyles[1].styles[1]": "Margin=-4,0,4,0", 105 | "controlStyles[1].styles[2]": "MaxWidth=48", 106 | "controlStyles[2].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel", 107 | "controlStyles[2].styles[0]": "Padding=0", 108 | "controlStyles[2].styles[1]": "Background:= ", 109 | "controlStyles[3].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Border#BackgroundElement", 110 | "controlStyles[3].styles[0]": "Background:=", 111 | "controlStyles[3].styles[1]": "Height=32", 112 | "controlStyles[4].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer#Icon", 113 | "controlStyles[4].styles[0]": "Visibility=Collapsed", 114 | "controlStyles[5].target": "TextBlock#LabelControl", 115 | "controlStyles[5].styles[0]": "Foreground=White", 116 | "controlStyles[6].target": "Rectangle#RunningIndicator", 117 | "controlStyles[6].styles[0]": "Visibility=Collapsed", 118 | "controlStyles[7].target": "TextBlock#TimeInnerTextBlock", 119 | "controlStyles[7].styles[0]": "Foreground=White", 120 | "controlStyles[8].target": "TextBlock#DateInnerTextBlock", 121 | "controlStyles[8].styles[0]": "Foreground=White", 122 | "controlStyles[9].target": "SystemTray.TextIconContent > Grid > SystemTray.AdaptiveTextBlock#Base > TextBlock", 123 | "controlStyles[9].styles[0]": "Foreground=White", 124 | "controlStyles[10].target": "Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Border#BackgroundElement", 125 | "controlStyles[10].styles[0]": "Background@ActiveRunningIndicator:= ", 126 | "controlStyles[10].styles[1]": "Background:= ", 127 | "controlStyles[10].styles[2]": "BorderThickness=1", 128 | "controlStyles[10].styles[3]": "BorderBrush@NoRunningIndicator=Transparent", 129 | "controlStyles[10].styles[4]": "CornerRadius=3", 130 | "controlStyles[11].target": "Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Border", 131 | "controlStyles[12].target": "Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Border#BackgroundElement", 132 | "controlStyles[12].styles[0]": "BorderBrush=#BB4B4B4B", 133 | "controlStyles[12].styles[1]": "Margin=1", 134 | "controlStyles[11].styles[0]": "BorderThickness=1", 135 | "controlStyles[12].styles[2]": "BorderThickness=1", 136 | "controlStyles[11].styles[1]": "CornerRadius=2", 137 | "controlStyles[11].styles[3]": "Margin=-2,-1,-2,-1", 138 | "controlStyles[12].styles[3]": "Background:= ", 139 | "controlStyles[13].target": "Rectangle#BackgroundStroke", 140 | "controlStyles[13].styles[0]": "Fill=#858585", 141 | "controlStyles[14].target": "Grid#SystemTrayFrameGrid", 142 | "controlStyles[14].styles[0]": "Background:= ", 143 | "controlStyles[14].styles[1]": "BorderThickness=1,0,0,0", 144 | "controlStyles[14].styles[2]": "BorderBrush=#222222", 145 | "controlStyles[14].styles[3]": "Padding=4,0,0,0", 146 | "controlStyles[15].target": "Taskbar.TaskListButton#TaskListButton > Taskbar.TaskListLabeledButtonPanel#IconPanel@RunningIndicatorStates > Windows.UI.Xaml.Controls.Image#Icon", 147 | "controlStyles[15].styles[0]": "Height@NoRunningIndicator=16", 148 | "controlStyles[11].styles[2]": "BorderBrush@NoRunningIndicator=Transparent", 149 | "controlStyles[12].styles[4]": "BorderBrush@NoRunningIndicator=Transparent", 150 | "controlStyles[12].styles[5]": "Background@NoRunningIndicator=Transparent", 151 | "controlStyles[16].styles[0]": "Margin@NoRunningIndicator=-7,0,-7,0", 152 | "controlStyles[16].target": "Taskbar.TaskListButton#TaskListButton > Taskbar.TaskListLabeledButtonPanel#IconPanel@RunningIndicatorStates", 153 | "controlStyles[16].styles[1]": "Padding@NoRunningIndicator=0", 154 | "controlStyles[17].target": "Taskbar.TaskListButton", 155 | "controlStyles[17].styles[0]": "Margin=-1.5", 156 | "controlStyles[18].target": "Grid#OverflowRootGrid > Border", 157 | "controlStyles[18].styles[0]": "Background:= " 158 | } 159 | ``` 160 |
161 | -------------------------------------------------------------------------------- /Themes/WinXP/screenshot-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/WinXP/screenshot-small.png -------------------------------------------------------------------------------- /Themes/WinXP/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/WinXP/screenshot.png -------------------------------------------------------------------------------- /Themes/Windows7/README.md: -------------------------------------------------------------------------------- 1 | # Windows7 theme for Windows 11 Taskbar Styler 2 | 3 | This theme is mostly a proof of concept, and due to the limitations of the XAML taskbar it is not accurate to Windows 7. If you want an accurate Windows 7 taskbar, check out Explorer7 or ep_taskbar. 4 | 5 | **Author**: [SandTechStuff](https://github.com/SandTechStuff) 6 | 7 | ![Screenshot](screenshot.png) 8 | 9 | > [!NOTE] 10 | > An internet connection is required to use this theme, as the relevant images are downloaded from this repository. This is also the reason why images may be slow to load on first use. 11 | > 12 | > This theme was designed for 100% display scaling. 13 | 14 | ## Required additional mod configuration 15 | 16 | Mod: [Taskbar Height and Icon Size](https://windhawk.net/mods/taskbar-icon-size) 17 | 18 |
19 | Content to import (click to expand) 20 | 21 | ```json 22 | { 23 | "IconSize":32, 24 | "TaskbarHeight":39, 25 | "TaskbarButtonWidth":58 26 | } 27 | ``` 28 |
29 | 30 | 38 | 39 | ## Manual installation 40 | 41 | The theme styles can also be imported manually. To do that, follow these steps: 42 | 43 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 44 | * Go to the "Advanced" tab. 45 | * Copy the content below to the text box under "Mod settings" and click "Save". 46 | 47 |
48 | Content to import (click to expand) 49 | 50 | ```json 51 | { 52 | "controlStyles[0].target": "Taskbar.TaskListLabeledButtonPanel@CommonStates > Windows.UI.Xaml.Controls.Border#BackgroundElement", 53 | "controlStyles[0].styles[0]": "Background@InactiveNormal:=", 54 | "controlStyles[0].styles[1]": "Background@InactivePointerOver:=", 55 | "controlStyles[0].styles[2]": "Background@ActiveNormal:=", 56 | "controlStyles[0].styles[3]": "Background@ActivePressed:=", 57 | "controlStyles[0].styles[4]": "Background@ActivePointerOver:=", 58 | "controlStyles[0].styles[5]": "Background@InactivePressed:=", 59 | "controlStyles[0].styles[6]": "BorderThickness=0", 60 | "controlStyles[0].styles[7]": "Background@MultiWindowNormal:=", 61 | "controlStyles[0].styles[8]": "Background@MultiWindowActive:=", 62 | "controlStyles[0].styles[9]": "Background@MultiWindowPressed:=", 63 | "controlStyles[0].styles[10]": "Background@MultiWindowPointerOver:=", 64 | "controlStyles[0].styles[11]": "Background@RequestingAttention:=", 65 | "controlStyles[0].styles[12]": "Background@RequestingAttentionPointerOver:=", 66 | "controlStyles[0].styles[13]": "Background@RequestingAttentionPressed:=", 67 | "controlStyles[0].styles[14]": "Background@RequestingAttentionMulti:=", 68 | "controlStyles[0].styles[15]": "Background@RequestingAttentionMultiPointerOver:=", 69 | "controlStyles[0].styles[16]": "Background@RequestingAttentionMultiPressed:=", 70 | "controlStyles[1].target": "Taskbar.TaskListLabeledButtonPanel", 71 | "controlStyles[1].styles[0]": "Padding=0,0,0,0", 72 | "controlStyles[2].target": "Windows.UI.Xaml.Shapes.Rectangle#RunningIndicator", 73 | "controlStyles[2].styles[0]": "Visibility=Collapsed", 74 | "controlStyles[3].target": "Taskbar.TaskListLabeledButtonPanel > Image", 75 | "controlStyles[3].styles[0]": "RenderTransform:=", 76 | "controlStyles[4].target": "Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Windows.UI.Xaml.Controls.Border#BackgroundElement", 77 | "controlStyles[4].styles[0]": "Opacity@NoRunningIndicator=0", 78 | "controlStyles[5].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel@CommonStates > Border#BackgroundElement", 79 | "controlStyles[5].styles[0]": "Background@InactiveNormal:=", 80 | "controlStyles[5].styles[1]": "Background@InactivePointerOver:=", 81 | "controlStyles[5].styles[2]": "Background@InactivePressed:=", 82 | "controlStyles[5].styles[3]": "Background@ActiveNormal:=", 83 | "controlStyles[5].styles[4]": "Background@ActivePointerOver:=", 84 | "controlStyles[5].styles[5]": "Background@ActivePressed:=", 85 | "controlStyles[5].styles[6]": "BorderThickness=0", 86 | "controlStyles[5].styles[7]": "Width=54", 87 | "controlStyles[6].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer#Icon", 88 | "controlStyles[6].styles[0]": "Visibility=Collapsed", 89 | "controlStyles[7].target": "Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel", 90 | "controlStyles[7].styles[0]": "Padding=0,0,0,0", 91 | "controlStyles[7].styles[1]": "MinWidth=55", 92 | "controlStyles[7].styles[2]": "Margin=0,0,5,0", 93 | "controlStyles[8].target": "Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid", 94 | "controlStyles[8].styles[0]": "Background:=", 95 | "controlStyles[9].target": "Windows.UI.Xaml.Shapes.Rectangle#BackgroundStroke", 96 | "controlStyles[9].styles[0]": "Fill:=", 97 | "controlStyles[9].styles[1]": "Height=39", 98 | "controlStyles[10].target": "Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill", 99 | "controlStyles[10].styles[0]": "Fill:=", 100 | "controlStyles[11].target": "Taskbar.TaskListButton", 101 | "controlStyles[11].styles[0]": "Margin=1,0,1,0", 102 | "controlStyles[12].target": "Taskbar.TaskListLabeledButtonPanel@CommonStates > Windows.UI.Xaml.Controls.Border#MultiWindowElement", 103 | "controlStyles[12].styles[0]": "Background@MultiWindowNormal:=", 104 | "controlStyles[12].styles[1]": "Background@MultiWindowActive:=", 105 | "controlStyles[12].styles[2]": "Background@MultiWindowPointerOver:=", 106 | "controlStyles[12].styles[3]": "BorderThickness=0", 107 | "controlStyles[12].styles[4]": "RenderTransform:=", 108 | "controlStyles[12].styles[5]": "Background@MultiWindowPressed:=", 109 | "controlStyles[12].styles[6]": "Background@RequestingAttentionMulti:=", 110 | "controlStyles[12].styles[7]": "Background@RequestingAttentionMultiPointerOver:=", 111 | "controlStyles[12].styles[8]": "Background@RequestingAttentionMultiPressed:=", 112 | "controlStyles[13].target": "SystemTray.ChevronIconView > Windows.UI.Xaml.Controls.Grid#ContainerGrid > Windows.UI.Xaml.Controls.ContentPresenter", 113 | "controlStyles[13].styles[0]": "Visibility=Collapsed", 114 | "controlStyles[14].target": "SystemTray.ChevronIconView > Windows.UI.Xaml.Controls.Grid#ContainerGrid@ > Windows.UI.Xaml.Controls.Border#BackgroundBorder", 115 | "controlStyles[14].styles[0]": "Background@Normal:=", 116 | "controlStyles[14].styles[1]": "Background@PointerOver:=", 117 | "controlStyles[14].styles[2]": "Background@Pressed:=", 118 | "controlStyles[14].styles[3]": "Background@CheckedNormal:=", 119 | "controlStyles[14].styles[4]": "Background@CheckedPointerOver:=", 120 | "controlStyles[14].styles[5]": "Background@CheckedPressed:=", 121 | "controlStyles[14].styles[6]": "BorderThickness=0", 122 | "controlStyles[14].styles[7]": "Width=21", 123 | "controlStyles[14].styles[8]": "Height=20", 124 | "controlStyles[15].target": "SystemTray.OmniButton#NotificationCenterButton > Windows.UI.Xaml.Controls.Grid@CommonStates > Windows.UI.Xaml.Controls.Border#BackgroundBorder", 125 | "controlStyles[15].styles[0]": "Background@Normal=Transparent", 126 | "controlStyles[15].styles[1]": "Background@PointerOver:=", 127 | "controlStyles[15].styles[2]": "Background@Pressed:=", 128 | "controlStyles[15].styles[3]": "BorderThickness=0", 129 | "controlStyles[15].styles[4]": "Margin=0", 130 | "controlStyles[15].styles[5]": "MinWidth=68", 131 | "controlStyles[15].styles[6]": "Background@Checked:=", 132 | "controlStyles[15].styles[7]": "Background@CheckedPointerOver:=", 133 | "controlStyles[15].styles[8]": "Background@CheckedPressed:=", 134 | "controlStyles[16].target": "SystemTray.DateTimeIconContent > Windows.UI.Xaml.Controls.Grid > Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.TextBlock", 135 | "controlStyles[16].styles[0]": "TextAlignment=0", 136 | "controlStyles[16].styles[1]": "Foreground=White", 137 | "controlStyles[16].styles[2]": "FontFamily=Segoe UI", 138 | "controlStyles[17].target": "SystemTray.OmniButton#ControlCenterButton > Windows.UI.Xaml.Controls.Grid@CommonStates > Windows.UI.Xaml.Controls.Border#BackgroundBorder", 139 | "controlStyles[17].styles[0]": "Background@Normal=Transparent", 140 | "controlStyles[17].styles[1]": "Background@PointerOver:=", 141 | "controlStyles[17].styles[2]": "Background@Pressed:=", 142 | "controlStyles[17].styles[3]": "BorderThickness=0", 143 | "controlStyles[17].styles[4]": "Margin=0", 144 | "controlStyles[17].styles[5]": "Background@Checked:=", 145 | "controlStyles[17].styles[6]": "Background@CheckedPointerOver:=", 146 | "controlStyles[17].styles[7]": "Background@CheckedPressed:=", 147 | "controlStyles[18].target": "SystemTray.AdaptiveTextBlock > Windows.UI.Xaml.Controls.TextBlock", 148 | "controlStyles[18].styles[0]": "//FontFamily=Segoe MDL2 Assets", 149 | "controlStyles[18].styles[1]": "Foreground=White", 150 | "controlStyles[19].target": "SystemTray.NotifyIconView#NotifyItemIcon > Windows.UI.Xaml.Controls.Grid#ContainerGrid@ > Windows.UI.Xaml.Controls.Border#BackgroundBorder", 151 | "controlStyles[19].styles[0]": "Background@Normal=Transparent", 152 | "controlStyles[19].styles[1]": "Background@PointerOver:=", 153 | "controlStyles[19].styles[2]": "BorderThickness=0", 154 | "controlStyles[19].styles[3]": "Margin=0", 155 | "controlStyles[19].styles[4]": "Width=24", 156 | "controlStyles[20].target": "SystemTray.NotificationAreaIcons > Windows.UI.Xaml.Controls.ItemsPresenter > Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.ContentPresenter", 157 | "controlStyles[20].styles[0]": "Width=24", 158 | "controlStyles[20].styles[1]": "Padding=-2,0,-2,0", 159 | "controlStyles[21].target": "SystemTray.OmniButton#NotificationCenterButton > Windows.UI.Xaml.Controls.Grid > Windows.UI.Xaml.Controls.ContentPresenter > Windows.UI.Xaml.Controls.ItemsPresenter > Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.ContentPresenter > SystemTray.IconView > Windows.UI.Xaml.Controls.Grid#ContainerGrid > Windows.UI.Xaml.Controls.Grid#ContentGrid > SystemTray.TextIconContent > Windows.UI.Xaml.Controls.Grid#ContainerGrid > SystemTray.AdaptiveTextBlock[2] > Windows.UI.Xaml.Controls.TextBlock", 160 | "controlStyles[21].styles[0]": "FontFamily=Segoe MDL2 Assets", 161 | "controlStyles[21].styles[1]": "Text=", 162 | "controlStyles[22].target": "SystemTray.OmniButton#NotificationCenterButton > Windows.UI.Xaml.Controls.Grid > Windows.UI.Xaml.Controls.ContentPresenter > Windows.UI.Xaml.Controls.ItemsPresenter > Windows.UI.Xaml.Controls.StackPanel", 163 | "controlStyles[22].styles[0]": "FlowDirection=1", 164 | "controlStyles[23].target": "Windows.UI.Xaml.Controls.Grid#ContainerGrid@ > Windows.UI.Xaml.Shapes.Rectangle#ShowDesktopPipe", 165 | "controlStyles[23].styles[0]": "Fill@Normal:=", 166 | "controlStyles[23].styles[1]": "Height=39", 167 | "controlStyles[23].styles[2]": "Width=$desktopWidth", 168 | "controlStyles[23].styles[3]": "RadiusX=0", 169 | "controlStyles[23].styles[4]": "RadiusY=0", 170 | "controlStyles[23].styles[5]": "Fill@PointerOver:=", 171 | "controlStyles[23].styles[6]": "Fill@Pressed:=", 172 | "controlStyles[24].target": "SystemTray.Stack#ShowDesktopStack", 173 | "controlStyles[24].styles[0]": "Width=$desktopWidth", 174 | "controlStyles[25].target": "SystemTray.Stack#ShowDesktopStack > Windows.UI.Xaml.Controls.Grid > SystemTray.StackListView > Windows.UI.Xaml.Controls.ItemsPresenter > Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.ContentPresenter", 175 | "controlStyles[25].styles[0]": "Width=$desktopWidth", 176 | "controlStyles[26].target": "SystemTray.Stack#ShowDesktopStack > Windows.UI.Xaml.Controls.Grid > SystemTray.StackListView > Windows.UI.Xaml.Controls.ItemsPresenter > Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.ContentPresenter > SystemTray.IconView", 177 | "controlStyles[26].styles[0]": "Width=$desktopWidth", 178 | "controlStyles[27].target": "SystemTray.OmniButton#ControlCenterButton > Windows.UI.Xaml.Controls.Grid > Windows.UI.Xaml.Controls.ContentPresenter > Windows.UI.Xaml.Controls.ItemsPresenter > Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.ContentPresenter > SystemTray.IconView#SystemTrayIcon > Windows.UI.Xaml.Controls.Grid#ContainerGrid", 179 | "controlStyles[27].styles[0]": "Padding=0", 180 | "controlStyles[28].target": "SystemTray.OmniButton#ControlCenterButton", 181 | "controlStyles[28].styles[0]": "Margin=3,0,0,0", 182 | "controlStyles[29].target": "SystemTray.Stack#MainStack > Windows.UI.Xaml.Controls.Grid > SystemTray.StackListView > Windows.UI.Xaml.Controls.ItemsPresenter > Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.ContentPresenter > SystemTray.IconView > Windows.UI.Xaml.Controls.Grid#ContainerGrid@ > Windows.UI.Xaml.Controls.Border#BackgroundBorder", 183 | "controlStyles[29].styles[0]": "Background@Normal=Transparent", 184 | "controlStyles[29].styles[1]": "Background@PointerOver:=", 185 | "controlStyles[29].styles[2]": "Background@Pressed:=", 186 | "controlStyles[29].styles[3]": "BorderThickness=0", 187 | "controlStyles[29].styles[4]": "Margin=0", 188 | "controlStyles[29].styles[5]": "Background@Checked:=", 189 | "controlStyles[29].styles[6]": "Background@CheckedPointerOver:=", 190 | "controlStyles[29].styles[7]": "Background@CheckedPressed:=", 191 | "controlStyles[29].styles[8]": "Width=24", 192 | "controlStyles[30].target": "Taskbar.TaskListLabeledButtonPanel#IconPanel@RunningIndicatorStates > Windows.UI.Xaml.Shapes.Rectangle#DefaultIcon", 193 | "controlStyles[30].styles[0]": "Visibility=Collapsed", 194 | "controlStyles[30].styles[1]": "Visibility@NoRunningIndicator=Visible", 195 | "controlStyles[31].target": "Taskbar.TaskListLabeledButtonPanel#IconPanel@CommonStates > Windows.UI.Xaml.Shapes.Rectangle#DefaultIcon", 196 | "controlStyles[31].styles[0]": "Fill=Transparent", 197 | "controlStyles[31].styles[1]": "Width=54", 198 | "controlStyles[31].styles[2]": "Height=54", 199 | "controlStyles[31].styles[3]": "Fill@InactivePointerOver:=", 200 | "controlStyles[31].styles[4]": "Fill@InactivePressed:=", 201 | "controlStyles[31].styles[5]": "Transform3D:=", 202 | "controlStyles[32].target": "SystemTray.AdaptiveTextBlock#LanguageInnerTextBlock > TextBlock#InnerTextBlock", 203 | "controlStyles[32].styles[0]": "FontFamily=Segoe UI", 204 | "controlStyles[33].target": "Border#SearchPillBackgroundElement", 205 | "controlStyles[33].styles[0]": "BorderBrush=#4F222222", 206 | "controlStyles[33].styles[1]": "BorderThickness=1", 207 | "controlStyles[34].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=TaskViewButton]", 208 | "controlStyles[34].styles[0]": "//Margin=-8,0,-14,0", 209 | "controlStyles[35].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=TaskViewButton] > Taskbar.TaskListButtonPanel@CommonStates > Border#BackgroundElement", 210 | "controlStyles[35].styles[0]": "BorderBrush@InactivePointerOver:=", 211 | "controlStyles[35].styles[1]": "BorderThickness=2", 212 | "controlStyles[35].styles[2]": "Background:=", 213 | "controlStyles[35].styles[3]": "BorderBrush@InactivePressed:=", 214 | "controlStyles[35].styles[4]": "BorderBrush@ActivePressed:=", 215 | "controlStyles[35].styles[5]": "BorderBrush@ActivePointerOver:=", 216 | "controlStyles[35].styles[6]": "BorderBrush@ActiveNormal=Transparent", 217 | "controlStyles[36].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=TaskViewButton] > Taskbar.TaskListButtonPanel > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer", 218 | "controlStyles[36].styles[0]": "Visibility=Collapsed", 219 | "controlStyles[37].target": "Taskbar.SearchBoxButton#SearchBoxButton[AutomationProperties.AutomationId=SearchButton] > Taskbar.TaskListButtonPanel@CommonStates > Windows.UI.Xaml.Controls.Border#BackgroundElement", 220 | "controlStyles[37].styles[0]": "BorderBrush@InactivePointerOver_SearchIcon:=", 221 | "controlStyles[37].styles[1]": "BorderBrush@InactivePressed_SearchIcon:=", 222 | "controlStyles[37].styles[2]": "BorderBrush@ActivePressed_SearchIcon:=", 223 | "controlStyles[37].styles[3]": "BorderBrush@ActivePointerOver_SearchIcon:=", 224 | "controlStyles[37].styles[4]": "BorderBrush@ActiveNormal_SearchIcon=Transparent", 225 | "controlStyles[37].styles[5]": "BorderThickness@InactivePointerOver_SearchIcon=2", 226 | "controlStyles[37].styles[6]": "BorderThickness@InactivePressed_SearchIcon=2", 227 | "controlStyles[37].styles[7]": "BorderThickness@ActivePressed_SearchIcon=2", 228 | "controlStyles[37].styles[8]": "BorderThickness@ActivePointerOver_SearchIcon=2", 229 | "controlStyles[37].styles[9]": "Background@ActiveNormal_SearchIcon:=", 230 | "controlStyles[37].styles[10]": "Background@InactivePointerOver_SearchIcon:=", 231 | "controlStyles[37].styles[11]": "Background@InactivePressed_SearchIcon:=", 232 | "controlStyles[37].styles[12]": "Background@ActivePressed_SearchIcon:=", 233 | "controlStyles[37].styles[13]": "Background@ActivePointerOver_SearchIcon:=", 234 | "controlStyles[37].styles[14]": "Background@InactiveNormal_SearchIcon:=", 235 | "controlStyles[37].styles[15]": "Height=30", 236 | "controlStyles[37].styles[16]": "Height@ActiveNormal_SearchIcon=Auto", 237 | "controlStyles[37].styles[17]": "Height@InactivePointerOver_SearchIcon=Auto", 238 | "controlStyles[37].styles[18]": "Height@InactivePressed_SearchIcon=Auto", 239 | "controlStyles[37].styles[19]": "Height@ActivePressed_SearchIcon=Auto", 240 | "controlStyles[37].styles[20]": "Height@ActivePointerOver_SearchIcon=Auto", 241 | "controlStyles[37].styles[21]": "Height@InactiveNormal_SearchIcon=Auto", 242 | "controlStyles[38].target": "Taskbar.SearchBoxButton#SearchBoxButton[AutomationProperties.AutomationId=SearchButton] > Taskbar.TaskListButtonPanel@CommonStates > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer", 243 | "controlStyles[38].styles[0]": "Visibility@ActiveNormal_SearchIcon=Collapsed", 244 | "controlStyles[38].styles[1]": "Visibility@InactivePointerOver_SearchIcon=Collapsed", 245 | "controlStyles[38].styles[2]": "Visibility@InactivePressed_SearchIcon=Collapsed", 246 | "controlStyles[38].styles[3]": "Visibility@ActivePressed_SearchIcon=Collapsed", 247 | "controlStyles[38].styles[4]": "Visibility@ActivePointerOver_SearchIcon=Collapsed", 248 | "controlStyles[38].styles[5]": "Visibility@InactiveNormal_SearchIcon=Collapsed", 249 | "controlStyles[39].target": "Windows.UI.Xaml.Controls.StackPanel > Windows.UI.Xaml.Controls.ContentPresenter > SystemTray.IconView > Windows.UI.Xaml.Controls.Grid@ > Windows.UI.Xaml.Controls.Border#BackgroundBorder", 250 | "controlStyles[39].styles[0]": "Background@CheckedPressed:=", 251 | "controlStyles[39].styles[1]": "Background@CheckedPointerOver:=", 252 | "controlStyles[39].styles[2]": "Background@CheckedNormal:=", 253 | "controlStyles[39].styles[3]": "BorderThickness=0", 254 | "controlStyles[39].styles[4]": "Background@Pressed:=", 255 | "controlStyles[39].styles[5]": "Background@PointerOver:=", 256 | "controlStyles[39].styles[6]": "Background@Normal=Transparent", 257 | "controlStyles[39].styles[7]": "Margin=0", 258 | "controlStyles[40].target": "SystemTray.Stack#NonActivatableStack", 259 | "controlStyles[40].styles[0]": "Margin=4,0,0,0", 260 | "controlStyles[41].target": "Taskbar.AugmentedEntryPointButton[AutomationProperties.AutomationId=WidgetsButton] > Taskbar.TaskListButtonPanel@CommonStates > Windows.UI.Xaml.Controls.Border#BackgroundElement", 261 | "controlStyles[41].styles[0]": "Background@InactivePointerOver:=", 262 | "controlStyles[41].styles[1]": "Background@InactivePressed:=", 263 | "controlStyles[41].styles[2]": "Background@ActivePointerOver:=", 264 | "controlStyles[41].styles[3]": "Background@ActivePressed:=", 265 | "controlStyles[41].styles[4]": "Background@ActiveNormal:=", 266 | "controlStyles[41].styles[5]": "BorderThickness=0", 267 | "controlStyles[41].styles[6]": "Margin=0", 268 | "controlStyles[42].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel", 269 | "controlStyles[42].styles[0]": "Width=54", 270 | "styleConstants[0]": "orbNormal=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/orbNormal.png", 271 | "styleConstants[1]": "orbPointerOver=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/orbHover.png", 272 | "styleConstants[2]": "orbPressed=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/orbPressed.png", 273 | "styleConstants[3]": "aeroColor=74b8fc", 274 | "styleConstants[4]": "aeroOpacity=4D", 275 | "styleConstants[5]": "reflection=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/AeroPeek.png", 276 | "styleConstants[6]": "taskbandInactiveNormal=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/InactiveNormal.png", 277 | "styleConstants[7]": "taskbandInactivePointerOver=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/InactivePointerOver.png", 278 | "styleConstants[8]": "taskbandInactivePressed=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/ActiveNormal.png", 279 | "styleConstants[9]": "taskbandActiveNormal=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/ActiveNormal.png", 280 | "styleConstants[10]": "taskbandActivePointerOver=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/ActiveNormal.png", 281 | "styleConstants[11]": "taskbandActivePressed=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/ActiveNormal.png", 282 | "styleConstants[12]": "overflowNormal=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/overflowNormal.png", 283 | "styleConstants[13]": "overflowPointerOver=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/overflowPointerOver.png", 284 | "styleConstants[14]": "overflowPressed=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/overflowPressed.png", 285 | "styleConstants[15]": "clockPointerOver=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/clockPointerOver.png", 286 | "styleConstants[16]": "clockPressed=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/clockPressed.png", 287 | "styleConstants[17]": "trayPointerOver=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/trayPointerOver.png", 288 | "styleConstants[18]": "trayPressed=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/trayPressed.png", 289 | "styleConstants[19]": "desktopNormal=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/desktopNormal.png", 290 | "styleConstants[20]": "desktopPointerOver=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/desktopPointerOver.png", 291 | "styleConstants[21]": "desktopPressed=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/desktopPressed.png", 292 | "styleConstants[22]": "desktopWidth=15", 293 | "styleConstants[23]": "taskbandRequestingAttention=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/requestingAttention.png", 294 | "styleConstants[24]": "taskbandNotRunningPointerOver=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/notRunningPointerOver.png", 295 | "styleConstants[25]": "taskbandNotRunningPressed=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/notRunningPressed.png", 296 | "styleConstants[26]": "taskbarBackground=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/taskbarBackground.png", 297 | "styleConstants[27]": "taskviewIcon=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/taskview.png", 298 | "styleConstants[28]": "searchIcon=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/search.png", 299 | "styleConstants[29]": "widgetsPointerOver=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/widgetsPointerOver.png", 300 | "styleConstants[30]": "widgetsPressed=https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Themes/Windows7/ThemeResources/widgetsPressed.png" 301 | } 302 | ``` 303 |
304 | -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/ActiveNormal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/ActiveNormal.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/AeroPeek.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/AeroPeek.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/InactiveNormal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/InactiveNormal.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/InactivePointerOver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/InactivePointerOver.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/clockPointerOver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/clockPointerOver.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/clockPressed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/clockPressed.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/desktopNormal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/desktopNormal.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/desktopPointerOver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/desktopPointerOver.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/desktopPressed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/desktopPressed.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/notRunningPointerOver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/notRunningPointerOver.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/notRunningPressed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/notRunningPressed.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/orbHover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/orbHover.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/orbNormal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/orbNormal.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/orbPressed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/orbPressed.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/overflowNormal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/overflowNormal.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/overflowPointerOver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/overflowPointerOver.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/overflowPressed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/overflowPressed.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/requestingAttention.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/requestingAttention.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/search.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/taskbarBackground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/taskbarBackground.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/taskview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/taskview.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/trayPointerOver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/trayPointerOver.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/trayPressed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/trayPressed.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/widgetsPointerOver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/widgetsPointerOver.png -------------------------------------------------------------------------------- /Themes/Windows7/ThemeResources/widgetsPressed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/ThemeResources/widgetsPressed.png -------------------------------------------------------------------------------- /Themes/Windows7/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/Windows7/screenshot.png -------------------------------------------------------------------------------- /Themes/xdark/README.md: -------------------------------------------------------------------------------- 1 | # ✦ xdark theme for Windows 11 Taskbar Styler 2 | 3 | **Author**: [xscriptorcode](https://github.com/xscriptorcode) 4 | 5 | ![Demonstration](screenshot.png) 6 | 7 | ## Required Windhawk Mods for Full Effect 8 | To achieve the full implementation of the xdark theme, make sure your Windows is set to dark theme and the accent color is set to gold, and install and configure the following Windhawk mods in addition to Taskbar Styler: 9 | 10 | - Taskbar Clock Customization – for styling the system clock. 11 | 12 |
13 | Click to expand JSON content 14 | 15 | ```json 16 | { 17 | "ShowSeconds": 1, 18 | "TimeFormat": "HH':'mm", 19 | "DateFormat": "dd'/'MM'/'yyyy", 20 | "WeekdayFormat": "", 21 | "TopLine": "", 22 | "MiddleLine": "", 23 | "BottomLine": "║▌║%date% X %time% ▌│", 24 | "TooltipLine": "%web1_full%", 25 | "Width": 180, 26 | "Height": 60, 27 | "TextSpacing": 0, 28 | "TimeStyle.Visible": 1, 29 | "TimeStyle.TextColor": "#facc15", 30 | "TimeStyle.TextAlignment": "Center", 31 | "TimeStyle.FontSize": 12, 32 | "TimeStyle.FontFamily": "JetBrainsMono NF", 33 | "TimeStyle.FontWeight": "ExtraLight", 34 | "TimeStyle.FontStyle": "", 35 | "TimeStyle.FontStretch": "", 36 | "TimeStyle.CharacterSpacing": 0, 37 | "DateStyle.TextColor": "#facc15", 38 | "DateStyle.TextAlignment": "Center", 39 | "DateStyle.FontSize": 12, 40 | "DateStyle.FontFamily": "Times New Roman", 41 | "DateStyle.FontWeight": "Light", 42 | "DateStyle.FontStyle": "Normal", 43 | "DateStyle.FontStretch": "SemiCondensed", 44 | "DateStyle.CharacterSpacing": 1, 45 | "oldTaskbarOnWin11": 0, 46 | "MaxWidth": 0, 47 | "TimeStyle.Hidden": 1, 48 | "DateStyle.Hidden": 0 49 | } 50 | ``` 51 |
52 | 53 | --- 54 | 55 | - Taskbar Height and Icon Size – to adjust the proportions and padding of taskbar items. 56 | 57 |
58 | Click to expand JSON content 59 | 60 | ```json 61 | { 62 | "IconSize": 15, 63 | "TaskbarHeight": 35, 64 | "TaskbarButtonWidth": 30 65 | } 66 | ``` 67 |
68 | 69 | --- 70 | 71 | - Taskbar Labels for Windows 11 – to enable visible labels next to app icons. 72 | 73 |
74 | Click to expand JSON content 75 | 76 | ```json 77 | { 78 | "taskbarItemWidth": 60, 79 | "minimumTaskbarItemWidth": 50, 80 | "maximumTaskbarItemWidth": 120, 81 | "runningIndicatorStyle": "centerFixed", 82 | "progressIndicatorStyle": "sameAsRunningIndicatorStyle", 83 | "fontSize": 12, 84 | "leftAndRightPaddingSize": 8, 85 | "spaceBetweenIconAndLabel": 8, 86 | "labelForSingleItem": "%name%", 87 | "labelForMultipleItems": "[%amount%] %name%", 88 | "mode": "labelsWithCombining", 89 | "excludedPrograms[0]": "excluded1.exe", 90 | "alwaysShowThumbnailLabels": 0, 91 | "fontFamily": "", 92 | "runningIndicatorHeight": 0, 93 | "runningIndicatorVerticalOffset": 0 94 | } 95 | ``` 96 |
97 | 98 | ## Notes 99 | 100 | - This theme is designed for dark, minimalistic desktop setups. 101 | - Uses rounded corners (`CornerRadius=13`) for taskbar buttons and system tray. 102 | - Accent color is golden yellow `#facc15`, used for text and icons. 103 | - Some tray icons are intentionally hidden for a sleeker look. 104 | 105 | ## Highlighted Features 106 | 107 | - Fully black background on taskbar buttons and system tray. 108 | - Clean layout with hidden elements and padding adjustments. 109 | - Compact and rounded system tray. 110 | 111 | ## Suggested Windows Settings 112 | 113 | - Use default (centered) taskbar alignment. 114 | - Set the dark theme. 115 | - Set the gold accent color. 116 | - Set display scale to 100% for best results. 117 | - Hide unnecessary tray icons via Windows settings. 118 | 119 | ### Customize Icon-to-Text Spacing 120 | 121 | If you'd like to adjust the distance between the app icon and its label (usually the app name), you can modify the following JSON property: 122 | 123 | ```json 124 | "controlStyles[12].styles[2]": "Margin=1,0,0,0" 125 | ``` 126 | 127 | This Margin follows the format: 128 | Margin=left,top,right,bottom 129 | 130 | So, "Margin=1,0,0,0" sets 1 pixel of space between the icon and the text. 131 | 132 | ## Theme selection 133 | 134 | The theme is integrated into the mod, and can be simply selected from the mod's 135 | settings: 136 | 137 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 138 | * Go to the "Settings" tab. 139 | * Select the theme and save the settings. 140 | 141 | ## Manual installation 142 | 143 | The theme styles can also be imported manually. To do that, follow these steps: 144 | 145 | * Open the Windows 11 Taskbar Styler mod in Windhawk. 146 | * Go to the "Advanced" tab. 147 | * Copy the content below to the text box under "Mod settings" and click "Save". 148 | 149 |
150 | Content to import (click to expand) 151 | 152 | ```json 153 | { 154 | "controlStyles[0].target": "Taskbar.TaskListButton", 155 | "controlStyles[0].styles[0]": "CornerRadius=13", 156 | "controlStyles[0].styles[1]": "Padding=6,0,6,0", 157 | "controlStyles[0].styles[2]": "HorizontalContentAlignment=Left", 158 | "resourceVariables[0].variableKey": "", 159 | "resourceVariables[0].value": "", 160 | "controlStyles[1].target": "SystemTray.TextIconContent > Grid#ContainerGrid > SystemTray.AdaptiveTextBlock#Base > TextBlock#InnerTextBlock", 161 | "controlStyles[1].styles[0]": "FontSize=16", 162 | "controlStyles[1].styles[1]": "Foreground=#facc15", 163 | "controlStyles[2].target": "SystemTray.NotifyIconView#NotifyItemIcon", 164 | "controlStyles[2].styles[0]": "MinWidth=25", 165 | "controlStyles[3].target": "SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[1] > SystemTray.IconView > Grid > Grid", 166 | "controlStyles[3].styles[0]": "Visibility=Collapsed", 167 | "controlStyles[4].target": "SystemTray.TextIconContent > Grid#ContainerGrid", 168 | "controlStyles[4].styles[0]": "Padding=2", 169 | "controlStyles[5].target": "SystemTray.ChevronIconView", 170 | "controlStyles[5].styles[0]": "MinWidth=27", 171 | "controlStyles[6].target": "SystemTray.OmniButton#NotificationCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter > SystemTray.IconView#SystemTrayIcon > Grid > Grid > SystemTray.TextIconContent", 172 | "controlStyles[6].styles[0]": "Visibility=Collapsed", 173 | "controlStyles[7].target": "Taskbar.TaskListLabeledButtonPanel > Border#BackgroundElement", 174 | "controlStyles[7].styles[0]": "Background=#000000", 175 | "controlStyles[8].target": "Grid#SystemTrayFrameGrid", 176 | "controlStyles[8].styles[0]": "Background=#000000", 177 | "controlStyles[8].styles[1]": "CornerRadius=13", 178 | "controlStyles[8].styles[2]": "Margin=0,5,4,5", 179 | "controlStyles[8].styles[3]": "Padding=2,0,-18,0", 180 | "controlStyles[9].target": "Taskbar.TaskListButton > Grid > Rectangle#RunningIndicator", 181 | "controlStyles[9].styles[0]": "Height=3", 182 | "controlStyles[9].styles[1]": "RadiusX=1.5", 183 | "controlStyles[9].styles[2]": "RadiusY=1.5", 184 | "controlStyles[9].styles[3]": "Fill@ActiveNormal=#facc15", 185 | "controlStyles[9].styles[4]": "VerticalAlignment=Bottom", 186 | "controlStyles[9].styles[5]": "Margin=16,0,16,4", 187 | "controlStyles[9].styles[6]": "StrokeThickness=0", 188 | "controlStyles[10].target": "SystemTray.ImageIconContent > Grid#ContainerGrid > Image", 189 | "controlStyles[10].styles[0]": "Width=13", 190 | "controlStyles[11].target": "SystemTray.TextIconContent > Grid#ContainerGrid > SystemTray.AdaptiveTextBlock#Base > TextBlock#InnerTextBlock", 191 | "controlStyles[11].styles[0]": "FontSize=13", 192 | "controlStyles[11].styles[1]": "Foreground=#facc15", 193 | "controlStyles[12].target": "TextBlock#LabelControl", 194 | "controlStyles[12].styles[0]": "FontFamily=Segoe UI Medium", 195 | "controlStyles[12].styles[1]": "Foreground=#facc15", 196 | "controlStyles[12].styles[2]": "Margin=1,0,0,0", 197 | "controlStyles[12].styles[3]": "VerticalAlignment=Center", 198 | "controlStyles[12].styles[4]": "TextWrapping=NoWrap", 199 | "controlStyles[13].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton]", 200 | "controlStyles[13].styles[0]": "Visibility=Visible", 201 | "controlStyles[14].target": "Windows.UI.Xaml.Controls.TextBlock#InnerTextBlock[Text=]", 202 | "controlStyles[14].styles[0]": "Text=", 203 | "controlStyles[14].styles[1]": "Foreground=#facc15", 204 | "controlStyles[15].target": "Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill", 205 | "controlStyles[15].styles[0]": "Fill=Transparent", 206 | "controlStyles[16].target": "Rectangle#BackgroundStroke", 207 | "controlStyles[16].styles[0]": "Fill=Transparent", 208 | "controlStyles[18].target": "SystemTray.TextIconContent > Grid#ContainerGrid > SystemTray.AdaptiveTextBlock#Base > TextBlock#InnerTextBlock", 209 | "controlStyles[18].styles[0]": "Foreground=#facc15" 210 | } 211 | ``` 212 |
213 | -------------------------------------------------------------------------------- /Themes/xdark/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/f8b4d215a21c678915a56b7c6dd81e12c31dffc5/Themes/xdark/screenshot.png --------------------------------------------------------------------------------