91 lines
2.4 KiB
Plaintext
91 lines
2.4 KiB
Plaintext
waybar-styles(5)
|
|
|
|
# NAME
|
|
|
|
waybar-styles - using stylesheets for waybar
|
|
|
|
# DESCRIPTION
|
|
|
|
Waybar uses Cascading Style Sheets (CSS) to configure its appearance.
|
|
|
|
When the system appearance is light, Waybar first looks for *style-light.css*.
|
|
When the system appearance is dark, Waybar first looks for *style-dark.css*.
|
|
If no appearance-specific stylesheet is found, it falls back to *style.css*.
|
|
|
|
Waybar uses the first file found in this search order for each stylesheet name:
|
|
|
|
- *$XDG_CONFIG_HOME/waybar/<stylesheet>*
|
|
- *~/.config/waybar/<stylesheet>*
|
|
- *~/waybar/<stylesheet>*
|
|
- */etc/xdg/waybar/<stylesheet>*
|
|
- *@sysconfdir@/xdg/waybar/<stylesheet>*
|
|
|
|
For example, a light theme is loaded from the first available file among:
|
|
|
|
- *$XDG_CONFIG_HOME/waybar/style-light.css*
|
|
- *~/.config/waybar/style-light.css*
|
|
- *~/waybar/style-light.css*
|
|
- */etc/xdg/waybar/style-light.css*
|
|
- *@sysconfdir@/xdg/waybar/style-light.css*
|
|
|
|
If no file is found there, Waybar repeats the same search using *style.css*.
|
|
|
|
# EXAMPLE
|
|
|
|
An example user-controlled stylesheet that just changes the color of the clock to be green on black, while keeping the rest of the system config the same would be:
|
|
|
|
```
|
|
@import url("file:///etc/xdg/waybar/style.css")
|
|
|
|
#clock {
|
|
background: #000000;
|
|
color: #00ff00;
|
|
}
|
|
```
|
|
|
|
## Hover-effect
|
|
|
|
You can apply special styling to any module for when the cursor hovers it.
|
|
|
|
```
|
|
#clock:hover {
|
|
background-color: #ffffff;
|
|
}
|
|
```
|
|
|
|
## Setting cursor style
|
|
|
|
Most, if not all, module types support setting the `cursor` option. This is
|
|
configured in your `config.jsonc`. If set to `false`, when hovering the module a
|
|
"pointer" (as commonly known from web CSS styling `cursor: pointer`) style cursor
|
|
will not be shown. Default behavior is to indicate an interaction event is
|
|
available.
|
|
|
|
If set to a string value, it must be a valid cursor name
|
|
(e.g. `"pointer"`, `"default"`, `"grab"`, `"text"`, `"crosshair"`, etc.),
|
|
see the cursor-shape-v1 protocol for all possible cursor types:
|
|
https://wayland.app/protocols/cursor-shape-v1#wp_cursor_shape_device_v1:enum:shape.
|
|
Depending on the compositor and cursor theme used, cursors not listed in the protocol may also work.
|
|
|
|
Example of disabling the cursor on a custom module:
|
|
|
|
```
|
|
"custom/my-custom-module": {
|
|
...
|
|
"cursor": false,
|
|
}
|
|
```
|
|
|
|
Example of setting the cursor type to `"grab"`:
|
|
|
|
```
|
|
"custom/my-custom-module": {
|
|
...
|
|
"cursor": "grab",
|
|
}
|
|
```
|
|
|
|
# SEE ALSO
|
|
|
|
- *waybar(5)*
|