93 lines
2.4 KiB
Plaintext
93 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.
|
|
|
|
There are more cursor types to choose from by setting the `cursor` option to
|
|
a number, see Gdk3 official docs for all possible cursor types:
|
|
https://docs.gtk.org/gdk3/enum.CursorType.html.
|
|
However, note that not all cursor options listed may be available on
|
|
your system. If you attempt to use a cursor which is not available, the
|
|
application will crash.
|
|
|
|
Example of disabling pointer(`Gdk::Hand2`) cursor type on a custom module:
|
|
|
|
```
|
|
"custom/my-custom-module": {
|
|
...
|
|
"cursor": false,
|
|
}
|
|
```
|
|
|
|
Example of setting cursor type to `Gdk::Boat`(according to
|
|
https://docs.gtk.org/gdk3/enum.CursorType.html#boat):
|
|
|
|
```
|
|
"custom/my-custom-module": {
|
|
...
|
|
"cursor": 8,
|
|
}
|
|
```
|
|
|
|
# SEE ALSO
|
|
|
|
- *waybar(5)*
|