The above screenshot gives a sneak preview of the theming possibilities in the upcoming rofi release: The new theming format is based on css, a format widely known, which allows e.g. web developers to create their own rofi themes without the need to learn a new markup language. Below a snippets from the theme used in the above screenshot with some (often) requested features:

• Customized highlighting

  You can set color, text style (italic/bold) and underline.

* {
    highlight:     bold #ffffff;
}

• Rounded corners

  Beside setting border width on each side individually you can also specify a border radius.

#window mainbox listview element {
    padding: 3px;
    border-radius: 4px;
}
#window mainbox listview element selected urgent {
    background: @lightred;
    text: @dark;
    border: 0px 2px;
}

• References

  You can split colors from the reset of the theme, and reference them. As seen in the above example. For example the list of colors for the above sniplet:

* {
    foreground:  #ffeedd;
    background:  rgba(0,0,0,0);
    // Darker background
    dark:        #1c1c1c;
    // Black
    black:       #3d352a;
    lightblack:  #554444;
    // Red
    red:         #cd5c5c;
    lightred:    #cc5533;
}

In the next blog post we will talk about positioning on the screen.