.\" Generated by scdoc 1.11.5
.\" Complete documentation for this program is not available as a GNU info page
.ie \n(.g .ds Aq \(aq
.el       .ds Aq '
.nh
.ad l
.\" Begin generated content:
.TH "waybar\-styles" "5" "2026\-08\-31"
.PP
.SH NAME
.PP
waybar\-styles \- using stylesheets for waybar
.PP
.SH DESCRIPTION
.PP
Waybar uses Cascading Style Sheets (CSS) to configure its appearance.\&
.PP
It uses the first file found in this search order:
.PP
.PD 0
.IP \(bu 4
\fB$XDG_CONFIG_HOME/waybar/style.\&css\fR
.IP \(bu 4
\fB\(ti/.\&config/waybar/style.\&css\fR
.IP \(bu 4
\fB\(ti/waybar/style.\&css\fR
.IP \(bu 4
\fB/etc/xdg/waybar/style.\&css\fR
.IP \(bu 4
\fB/etc/xdg/waybar/style.\&css\fR
.PD
.PP
.SH EXAMPLE
.PP
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:
.PP
.nf
.RS 4
@import url("file:///etc/xdg/waybar/style\&.css")

#clock {
  background: #000000;
  color: #00ff00;
}
.fi
.RE
.PP
.SS Hover\-effect
.PP
You can apply special styling to any module for when the cursor hovers it.\&
.PP
.nf
.RS 4
#clock:hover {
  background\-color: #ffffff;
}
.fi
.RE
.PP
.SS Setting cursor style
.PP
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.\&
.PP
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.\&
.PP
Example of disabling pointer(`Gdk::Hand2`) cursor type on a custom module:
.PP
.nf
.RS 4
"custom/my\-custom\-module": {
    \&.\&.\&.
    "cursor": false,
}
.fi
.RE
.PP
Example of setting cursor type to `Gdk::Boat`(according to
https://docs.\&gtk.\&org/gdk3/enum.\&CursorType.\&html#boat):
.PP
.nf
.RS 4
"custom/my\-custom\-module": {
    \&.\&.\&.
    "cursor": 8,
}
.fi
.RE
.PP
.SH SEE ALSO
.PP
.PD 0
.IP \(bu 4
\fBwaybar(5)\fR