waybar-styles - Man Page

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

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;
}

  #clock:hover {
    background-color: #ffffff;
  }

• waybar(5)

waybar(5).