Waybar style.css quirk?

Desktop Environments All WMs
1

Perhaps one of our resident waybar gurus might know something about this…

I want to make my color assignments into variables and establish them only once at the outset, then refer to them as var(…) through the rest of the style.css file. This would make it easy to adjust various colors once for the entire file. You know, a classic css method.

But when I try to include a :root { … } section atop the style.css file, i.e., the one associated with config.json in my waybar directory setup, it blows away the rest of the style instructions - they get ignored. Even placing an otherwise empty :root {} does this.

I’ve carefully checked for typos and searched extensively to confirm my approach is otherwise sound and proper.

Am I the only one experiencing this - might it be a quirk unique to the way that waybar interprets css instructions? - or are others finding it impossible to use a :root section in their style.css when customizing their waybar config? :man_shrugging:

2

Haven’t used waybar for a while, but I remember I had issues with some of the GTK config files overriding, IIRC GTK3?? Check /home/<you>/.config/gtk-3.0

3

@xircon Thanks for the idea.

Just checked the various files found in that directory and, although nothing obvious pops up, I’ll search further with this in mind to see what I might discover.

Will report back here to keep the thread updated.

EDIT: I found this in a Waybar/GTK write up…

On point:

Does Waybar Use GTK?

The technology behind Waybar

Waybar does not use GTK. Instead, it is built in C++ and interacts directly with Wayland compositors using wlroots or similar libraries. It draws its interface natively without relying on traditional GUI toolkits like GTK or Qt.

This design choice allows Waybar to be fast and lightweight, perfect for users running minimal setups. It’s especially useful for developers or hobbyists who want high performance and low latency while displaying system information in real-time.

But thanks again for the suggestion. I’m learning as I go.

4

For my Waybar, I have (2) css files in ~/.config/waybar:

mocha.css

@define-color rosewater #f5e0dc;
@define-color flamingo #f2cdcd;
@define-color pink #f5c2e7;
@define-color mauve #cba6f7;
@define-color red #f38ba8;
@define-color maroon #eba0ac;
@define-color peach #fab387;
@define-color yellow #f9e2af;
@define-color green #a6e3a1;
@define-color teal #94e2d5;
@define-color sky #89dceb;
@define-color sapphire #74c7ec;
@define-color blue #89b4fa;
@define-color lavender #b4befe;
@define-color text #cdd6f4;
@define-color subtext1 #bac2de;
@define-color subtext0 #a6adc8;
@define-color overlay2 #9399b2;
@define-color overlay1 #7f849c;
@define-color overlay0 #6c7086;
@define-color surface2 #585b70;
@define-color surface1 #45475a;
@define-color surface0 #313244;
@define-color base #1e1e2e;
@define-color mantle #181825;
@define-color crust #11111b;

style.css

@import "mocha.css";

* {
    /* `otf-font-awesome` is required to be installed for icons */
    /* font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; */
    font-family: Quicksand;
    font-size: 14px;
    color: @text;
}

window#waybar {
  /* you can also GTK3 CSS functions! */
  /* background: transparent; */
  min-height: 18px;
  background: rgba(17, 17, 27, 0.7);
  border-radius: 20px;
}

button {
    /* Use box-shadow instead of border so the text isn't offset */
    box-shadow: inset 0 -3px transparent;
    /* Avoid rounded borders under each button name */
    border: none;
    border-radius: 0;
}

Since I switched to TokyoNight themes, I don’t use the Catppuccin colors in the bar anymore (manually set per widget)

Dammit - my screenshot of the bar is getting squished to an unreadable resolution…

5

@ajgringo619 Thank you for this excellent idea - i.e., to break out the color definitions into its own css file - and them import as you’ve shown.

Your approach makes perfect sense!

EDIT: Got it working somehow… I must have fat-fingered something the same way on both platforms. But now it’s working as you’ve described.

THANK YOU!

PREVIOUS RESPONSE, NOW MOOT:

Sadly, it doesn’t work here on my installation for some bizarre reason…

Upon including the first line into the styles.css file (@import "foobar.css"), all of the styling on the waybar instantly disappears. Whether or not I create the foobar.css file and do or don’t populate it with some color definitions, and do or don’t reference those within the styles.css file (using the @ prefix), the entirety of the styles.css formatting is ignored.

I go from this:
swappy-20260630_143451

To this:
swappy-20260630_143545

It’s the darndest thing. Same result as when I use the :root { ... } section at the top of the styles.css file, which is where I previously tried to place some color definitions.

Apparently there’s something about my setup that makes waybar choke on anything placed above the * { ... } initial section.

I’ve also tried including a single color definition within the * {...}. Same outcome: waybar chokes on all styling instructions.

Clearly you don’t have this issue on your setup. So I’m trying to narrow down what’s getting in the way on my setups (same result on two different platforms here). :face_with_spiral_eyes:

6

I think the main reason that I don’t have the problem is that my waybar config is adding manual color definitions instead of the ones defined in mocha.css. To be honest, I can’t remember if I ever got that working.

7

So I just did a test with two defined colors in “my_colors.css” which I referenced as the first line in styles.css as @import "my_colors.css";

I then messed around with the hex #xxxxxx of those two colors in the color definition file and replaced some manual colors in styles.css with @test1 and @test2 and it responded just as expected.

So it would seem that some mix of defined and manual color designations can coexist nicely.

Again, thanks for the great suggestion. Still unclear why :root {} is not accepted within the style.css file, but your approach works!

8

[One of the consequences of not being able to insert a :root {} section is that other variables (like px numbers, etc.) can’t be managed like the @define-color can through an import file (or within the style.css file itself). Alas.]