Skip to content

Styling

Jump to bottom Edit New page
WuerfelDev edited this page Oct 5, 2021 · 31 revisions

Style file

Styling is done using the CSS file format and with a file named style.css.

Valid directories for this file are:

  • ~/.config/waybar/
  • ~/waybar/
  • /etc/xdg/waybar/

A good starting point is the default style.

If you want some ideas:

Also a minimal example style can be found on the bottom of this page.

All valid CSS classes for the modules are listed on the modules page.

Bar styling

The main waybar window can be styled with the following:

  • window#waybar
  • window#waybar.hidden
  • window#waybar.<name>
    • <name> is set to the value of the optional name configuration property. If not set, this class is not available. For more information see Bar Config
  • window#waybar.<position>
    • <position> is set to the value of the position configuration property. For more information see Bar Config

Module Group Styling

Each module group can be styled individually with the following:

  • .modules-left
  • .modules-center
  • .modules-right

Per-output styling

The main waybar windows carry a class tag with the name of the output this window is shown on. This can be used to apply different styles depending on the output. E.g.,

* { font-size: 13px; }
window.eDP-1 * { font-size: 10px; }

will set the default font size of all elements to 13px unless overridden later on, but apply a base font size of 10px to all elements on the eDP-1 output (typically, the laptop screen). Note that only the top-level window container has the output assigned in the class tags, not each individual object.

Interactive styling

GTK is used to apply styles and works with a limited subset of CSS.

You can use env GTK_DEBUG=interactive waybar to inspect objects and find their CSS classes, experiment with live CSS styles, and lookup the current value of CSS properties.

Interactive CSS Editor

See https://wiki.gnome.org/action/show/Projects/GTK/Inspector for more information.

Viewing the widget tree

Like the GTK inspector above, Waybar itself can also tell you what GTK widgets with what classes are available for styling (since #927). To get this information, simply run Waybar with debug logging enabled: waybar -l debug. Each enabled bar's widget tree will be separately logged to the console. Example:

[2020-11-30 12:38:51.141] [debug] GTK widget tree:
window#waybar.background.bottom.eDP-1.:dir(ltr)
  decoration:dir(ltr)
  box.horizontal:dir(ltr)
    box.horizontal.modules-left:dir(ltr)
      widget:dir(ltr)
        box#workspaces.horizontal:dir(ltr)
      widget:dir(ltr)
        label#mode:dir(ltr)
      widget:dir(ltr)
        label#window:dir(ltr)
    box.horizontal.modules-center:dir(ltr)
    box.horizontal.modules-right:dir(ltr)
      widget:dir(ltr)
        box#tray.horizontal:dir(ltr)
      widget:dir(ltr)
        label#idle_inhibitor:dir(ltr)
      widget:dir(ltr)
        label#pulseaudio:dir(ltr)
      widget:dir(ltr)
        label#network:dir(ltr)
      widget:dir(ltr)
        label#cpu:dir(ltr)
      widget:dir(ltr)
        label#memory:dir(ltr)
      widget:dir(ltr)
        label#temperature:dir(ltr)
      widget:dir(ltr)
        label#backlight:dir(ltr)
      widget:dir(ltr)
        label#battery:dir(ltr)
      widget:dir(ltr)
        label#clock:dir(ltr)

Minimal style

A minimal style.css file could look like this:

* {
    border: none;
    border-radius: 0;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    min-height: 0;
}

window#waybar {
    background: rgba(43, 48, 59, 0.5);
    border-bottom: 3px solid rgba(100, 114, 125, 0.5);
    color: white;
}

tooltip {
  background: rgba(43, 48, 59, 0.5);
  border: 1px solid rgba(100, 114, 125, 0.5);
}
tooltip label {
  color: white;
}

#workspaces button {
    padding: 0 5px;
    background: transparent;
    color: white;
    border-bottom: 3px solid transparent;
}

#workspaces button.focused {
    background: #64727D;
    border-bottom: 3px solid white;
}

#mode, #clock, #battery {
    padding: 0 10px;
    margin: 0 5px;
}

#mode {
    background: #64727D;
    border-bottom: 3px solid white;
}

#clock {
    background-color: #64727D;
}

#battery {
    background-color: #ffffff;
    color: black;
}

#battery.charging {
    color: white;
    background-color: #26A65B;
}

@keyframes blink {
    to {
        background-color: #ffffff;
        color: black;
    }
}

#battery.warning:not(.charging) {
    background: #f53c3c;
    color: white;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Making Waybar follow the Gtk theme

Gtk CSS has some global theme variables, and by using these instead of hardcoded values, Waybar will automatically follow your Gtk theme. An example:

window#waybar {
    background: @theme_base_color;
    border-bottom: 1px solid @unfocused_borders;
    color: @theme_text_color;
}

The Gtk theme variables can be further refined by using the shade, mix, and/or alpha modifiers. For example, if you want to make the bar 25 % lighter and 10 % transparent, you can style the background like this:

window#waybar {
    background: shade(alpha(@borders, 0.9), 1.25);
}

For a more complete example, see this Waybar config.

For a list of valid Gtk theme variables, check out Gnome's stylesheet on Gitlab.

Add a custom footer
Clone this wiki locally