waybar-styles - Man Page
using stylesheets for waybar
Description
Waybar uses Cascading Style Sheets (CSS) to configure its appearance.
It uses the first file found in this search order:
- $XDG_CONFIG_HOME/waybar/style.css
- ~/.config/waybar/style.css
- ~/waybar/style.css
- /etc/xdg/waybar/style.css
- /etc/xdg/waybar/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; }
See Also
Referenced By
2024-04-23