In this post we handle how transparency works. While there is nothing technically new here, it might be useful to recap this. When talking about transparency it is good to separate this in two parts. The first is transparency within rofi, between the different widgets. The second is how transparency on the window is handled, or tricked.

Transparency within rofi

Rofi window is build up by first drawing the background, and then each widget above it, with the correct transparency factor.

Remember the general widget structure:

This means if you set every widget to be 30% transparent on a black background: it will look like:

The transparency applies one on top of the other, so while they all are 30%, in the end it will be less transparent.

Try it yourself

rofi -theme /dev/null -theme-str '#window { padding:30px; background: rgba(20,20,20,0.5);}' -show run

Note: the green text has to do with anti-aliasing done on the fonts.

Note: The order is reversed here, the input box shows at the bottom. This will be discussed in a later post.

This can sometimes be difficult when creating themes with a nice transparent background. The trick to make this work nicely is the following.

Specify fully transparent background on the highest level.

* {
    background:  rgba(0,0,0,0);
}

Then set the background on the window box.

#window.box {
    background: #cc1c1c1c;
}

Note: why on the box? Because if you set it on #window each of it children inherits it.

Now if you only set the background on widgets you want differently colored, it nicely works out.

Transparency on the window

This determines how transparency on the window is handled. This is set the be transparency option on the #window widget. The option takes a string. There are basically 4 options:

No transparency or “real”

The background of the window is black and fully transparent, and everything is drawn on top of this. This means that if you have a composite manager (ARGB window), you get a fully transparent background, otherwise fully black.

This is the preferred option if you have a composite manager running.

This image is actually partially transparent (won’t show here clearly as block background is white.)

Fake transparency or “screenshot”

This tries to emulate a transparent window by taking a screenshot of the window before showing and then drawing everything on top of this. While this is not an idea solution (it won’t update if something changes in the background) it is often a very usable facsimile.

Note: It can get very slow, especially on high resolution (4k) monitors.

Background transparency or “background”

This uses the background image (the root window image). This is, in my opinion, mostly useful when used fullscreen.

Picture

If instead of one of the above option, you specify a path to a png file this is used as background image. This can create ‘fun’ theme where you use paper as background.