Add CSS classes for sway workspace indicators depending on associated output

Allows for different styles of workspace indicators (buttons) depending
on the output the workspace is located at.
Using this one can for example color the indicators depending on the
output making it easy to infer on which output a workspace is located.

Example config:

"sway/workspaces": {
    "all-outputs": true,
    "format": "{name}",
    "output-classes": {
        "DP-1": "output1",
        "LVDS-2": "output2"
    }
}

Example CSS:

#workspaces button.output1{
    background-color: green;
}
#workspaces button.output2{
    background-color: blue;
}
This commit is contained in:
burbschat
2025-06-14 22:40:58 +09:00
parent 2c482a2917
commit 9b6590b972
2 changed files with 18 additions and 0 deletions
+7
View File
@@ -105,6 +105,12 @@ warp-on-scroll: ++
default: false ++
Enables this module to consume all left over space dynamically.
*output-classes*: ++
typeof: array ++
Specify additional CSS classes to be added to workspace indicators based on the output on which the associated workspace is located.
Keys are output names and values are class names like *${output}: {output-class}*.
Assignment in config is used to keep the stylesheet independent of the available outputs.
# FORMAT REPLACEMENTS
@@ -193,3 +199,4 @@ n.b.: the list of outputs can be obtained from command line using *swaymsg -t ge
- *#workspaces button.empty*
- *#workspaces button.current_output*
- *#workspaces button#sway-workspace-${name}*
- *#workspaces button.${output-class}*