Skip to content

(Widget) Windows Desktops

github-actions edited this page Jun 23, 2026 · 10 revisions

Windows Desktops Widget

Displays your Windows virtual desktops in the status bar so you can switch between them. You can click to change desktops, see custom indicators for the active and inactive ones, and show names or numbers for each desktop.

Option Type Default Description
label_workspace_btn string '{index}' The format string for workspace buttons.
label_workspace_active_btn string '{index}' The format string for the active workspace button.
switch_workspace_animation string 'true' The OS animation to use when switching workspaces.
callbacks dict {'on_left': 'activate_workspace', 'on_middle': 'do_nothing', 'on_right': 'toggle_context_menu'} Callbacks for mouse events on workspace buttons.

Example Configuration

windows_workspaces:
  type: "yasb.windows_desktops.WorkspaceWidget"
  options:
    label_workspace_btn: "\udb81\udc3d"
    label_workspace_active_btn: "\udb81\udc3e"
    callbacks:
      on_left: "activate_workspace"
      on_middle: "do_nothing"
      on_right: "toggle_context_menu"

Description of Options

  • label_workspace_btn: The format string for workspace buttons, can be icon, {index} or {name}.
  • label_workspace_active_btn: The format string for the active workspace button, can be icon, {index} or {name}.
  • switch_workspace_animation: The OS animation to use when switching workspaces. (currently unsupported)
  • callbacks: A dictionary specifying the callbacks for mouse events on workspace buttons. The keys are on_left, on_middle, and on_right, and the values are the names of the callback functions.

Available Callbacks

Callback Description
activate_workspace Switch to the desktop associated with the clicked button.
toggle_context_menu Show the right-click context menu options.
move_window_here Move the currently focused window to the desktop of the clicked button.
delete_workspace Delete the desktop associated with the clicked button.
create_desktop Create a new virtual desktop.
rename_desktop Open a dialog to rename the desktop of the clicked button.
do_nothing No action.

Style

.windows-desktops {} /*Style for widget.*/
.windows-desktops .widget-container {} /*Style for widget container.*/
.windows-desktops .ws-btn {} /*Style for buttons.*/
.windows-desktops .ws-btn.active {} /*Style for the active workspace button.*/
.windows-workspaces .ws-btn.button-1 {} /*Style for first button.*/
.windows-workspaces .ws-btn.button-2 {} /*Style for second  button.*/
.windows-workspaces .ws-btn.active.button-1 {} /*Style for the active first workspace button.*/
.windows-workspaces .ws-btn.active.button-2 {} /*Style for the active second workspace button.*/

.windows-desktops .context-menu {} /*Style for context menu.*/
.windows-desktops .context-menu .menu-item {} /*Style for context menu items.*/
.windows-desktops .context-menu .menu-item:hover {} /*Style for selected context menu items.*/
.windows-desktops .context-menu .separator {} /*Style for context menu separator.*/

.windows-desktops .rename-dialog {} /*Style for rename dialog.*/
.windows-desktops .rename-dialog .popup-title {} /*Style for rename dialog title.*/
.windows-desktops .rename-dialog .popup-description {} /*Style for rename dialog description.*/
.windows-desktops .rename-dialog .rename-input {} /*Style for rename dialog input.*/
.windows-desktops .rename-dialog .button {} /*Style for rename dialog buttons.*/
.windows-desktops .rename-dialog .button.save {} /*Style for rename dialog save button.*/
.windows-desktops .rename-dialog .button.cancel {} /*Style for rename dialog cancel button. */

Example

.windows-desktops {
    padding: 0 4px 0 14px;
}
.windows-desktops .widget-container {
    background-color: #11111b;
    margin: 4px 0 4px 0;
    border-radius: 12px;
}
.windows-desktops .ws-btn {
    color: #7f849c;
    border: none;
    font-size: 14px;
    margin: 0 3px;
    padding: 0 
}
.windows-desktops .ws-btn.active {
    color: #89b4fa;
} 

.windows-desktops .context-menu {
    background-color:rgba(17, 17, 27, 0.75);
    border: none;
    border-radius: 2px;
    padding: 8px 0;
}
.windows-desktops .context-menu .menu-item {
    padding: 6px 16px;
}
.windows-desktops .context-menu .menu-item:hover {
    background-color: rgba(255,255,255,0.05);
    color: #ffffff;
}
.windows-desktops .context-menu .separator {
    margin: 2px 0px 2px 0px;
    height: 1px;
    background-color: rgba(255,255,255,0.1);
}


.windows-desktops-popup.rename {
    min-width: 320px;
    background-color: rgb(43, 43, 43);
}
.windows-desktops-popup.rename .windows-desktops-popup-container {
    padding: 16px;
}
.windows-desktops-popup.rename .windows-desktops-popup-footer {
    padding: 16px;
    background-color:rgb(32, 32, 32)
}
.windows-desktops-popup .popup-title {
    font-size: 16px;
    font-family: "Segoe UI Variable", "Segoe UI";
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
}
.windows-desktops-popup .popup-description {
    font-size: 13px;
    font-family: "Segoe UI Variable", "Segoe UI";
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
}
.windows-desktops-popup .rename-input {
    font-size: 14px;
    font-family: "Segoe UI Variable", "Segoe UI";
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 8px;
    outline: none;
    min-width: 280px;
}
.windows-desktops-popup .rename-input:focus {
    border: 1px solid #4cc2ff;
}
.windows-desktops-popup .button {
    border-radius: 4px;
    font-family: "Segoe UI Variable", "Segoe UI";
    font-size: 13px;
    min-height: 28px;
    min-width: 120px;
    margin: 4px 0;
    background-color: rgb(43, 43, 43);
}
.windows-desktops-popup .button.save {
    margin-right: 8px;
}
.windows-desktops-popup .button:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

Note

You can use button-x to style each button separately. Where x is the index of the button. Index starts from 1.

Clone this wiki locally