Waybar

Waybar is a status bar for Wayland compositors. It uses GTK-CSS for styling.

Common Issue with GTK-CSS

GTK's CSS implementation supports many features of standard (vanilla) CSS used in web development; however, some features are not available or behave differently. The level of support can also vary depending on the specific application or widget.

One commonly used feature in GTK CSS is color variable via the @<name> syntax (e.g., color: @mycolor;). This approach, while convenient, is not part of the official CSS specification and may trigger syntax errors or warnings in many text editors.

There are two common ways to handle this:

1. Ignore editor warnings: You can safely ignore these errors.
2. Use SCSS preprocessing: Define your variables in SCSS and compile it into standard CSS with hardcoded values. This avoids editor errors while maintaining maintainability in your source stylesheets. Learn more.

Link

Add the following line to the configuration:

[links]
# ...
"gtk-css.css" = [
  # ...
  "~/.config/waybar/colors.css"
]

INFO

You need to generate colors for these configuration files to be created. Run:

rong video path/to/image/or/video

Apply

Create a Waybar style file at ~/.config/waybar/style.css with the following content:

@import "colors.scss";

.modules {
  /* ... */
  color: @on_background;
  background-color: @background;
}

Reload

To reload styles automatically, enable reload_style_on_change in config.jsonc:

{
  "reload_style_on_change": true,
  // ...
}

WARNING

This option may not always work reliably. As a fallback, run the following command:

killall -SIGUSR2 waybar