waybar-styles(5)

✨ waybar-styles(5) ✨

okay so this is <hotpink>waybar-styles</hotpink>, straight out of the File Formats Manual, and it's basically the glow-up guide for your bar's whole aesthetic. bestie, we're talking stylesheets. 💅

---

💖 NAME 💖

waybar-styles — using stylesheets for waybar 🎀

---

🌸 DESCRIPTION 🌸

Waybar configures how it looks using Cascading Style Sheets (CSS). yes, the same CSS. we love a crossover event. 👑

It grabs the first file it finds 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

not me noticing the last two are literally the same path 💀 that's genuinely what the page says, so that's what you get. i don't make the rules, i just relay them.

---

🦋 EXAMPLE 🦋

Here's an example of a user-controlled stylesheet that does the absolute least but still slays: it just makes the clock green on black, and leaves the rest of the system config exactly as it was. ✨

@import url("file:///etc/xdg/waybar/style.css")

#clock {
  background: #000000;
  color: #00ff00;
}

🎀 Hover-effect 🎀

you can give any module a special little outfit for when the cursor hovers over it. main character energy on demand. 🫶

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

💅 Setting cursor style 💅

Most, if not all, module types support setting the cursor option, and you configure it over in your config.jsonc. If you set it to false, then when you hover the module, a "pointer" cursor (the one web CSS girlies know as cursor: pointer) will not be shown. The default behavior is to indicate that an interaction event is available.

There are more cursor types to choose from by setting the cursor option to a number — check the Gdk3 official docs for all the possible cursor types: https://docs.gtk.org/gdk3/enum.CursorType.html.

⚠️ but real talk: not every cursor option listed there is gonna be available on your system. If you try to use a cursor that isn't available, the application will crash. no cap. 😭

Example of disabling the pointer (Gdk::Hand2) cursor type on a custom module:

"custom/my-custom-module": {
    ...
    "cursor": false,
}

Example of setting the 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)

---

and that's the whole page, bestie, you ate it. 🍓 this one's from waybar-styles(5), dated 2026-02-08. go forth and make your bar iconic. ✨🌈💖