Mastodon
Designing icons for Kdenlive is fun. If you feel that you have at least some minimal artistic talent, why not lend us a helping hand? In this post, I explain the technical background that you need to know in order to work on Kdenlive icons. It’s easy using our cheat sheet.

Color Theme-Adaptive Icons

Theming

Kdenlive now supports icons that automatically adapt to the specific color theme your desktop uses. This especially allows the Breeze icons to blend into the overall color scheme that you’ve set. Whenever you use a color theme with bright background and dark foreground (for good contrast), Kdenlive shows its icons using your dark foreground color. If you prefer a dark color theme with dark background and lighter foreground, then Kdenlive icons adapt to this too. No need to switch icon themes anymore when switching desktop color themes. One icon set for all your desktop color themes. Sweet, isn’t it?

KDE Frameworks 5 define a set of six «logical» colors that when used, automatically adapt to the currently set color theme. The advantage of this is that you only need to maintain a single icon set, instead of potentially multiple icon sets. Such as a one icon set designed to work well with bright background colors, and another icon set to work well with dark background colors. Now, you only need to design your icons once, using the logical colors instead of hardcoded, fixed colors.

The Adaptive Colors

The following is the complete list of the adaptive (logical) colors, currently supported by KDE Frameworks 5:
ColorScheme-Text
The CSS class ColorScheme-Text (#4d4d4d) is probably the class most used of all color-theming CSS classes. Use it for painting all the ordinary icon parts that should adapt to the current color theme, but still giving the typical Breeze monochrome appearance.
ColorScheme-Highlight
The CSS class ColorScheme-Highlight (#3daee9) should be used for highlighting only, and then only sparsely. It is a contrast color. Some Kdenlive icons related to the timeline selection region also use this themed color to depict the region.
ColorScheme-Background
Normally, you should not have any need to use the CSS class ColorScheme-Background (#eff0f1). Instead of painting over other icon elements using the background color, cut out such parts. Any decent SVG editor, such as Inkscape is able to cut out regions, so the original background or any underlying elements become visible.
ColorScheme-PositiveText
The CSS class ColorScheme-PositiveText (#2ecc71) can be used to indicate states, such as synchronized, connected, et cetera. It can also be used, but to a lesser extent, to emphasize operations, such as new and add. However, at the time of this writing, most Breeze icons now use this adaptive color only for showing states, but not any more for operations.
ColorScheme-NegativeText
The CSS class ColorScheme-NegativeText (#da4453) can be used to emphasize operations, such as delete and remove.
ColorScheme-NeutralText
The CSS class ColorScheme-NeutralText (#f67400) can be used as an accentuation color, more so, when ColorScheme-Highlight isn’t appropriate or desired. Use with care, though.

Icon Sizes

The Breeze icon theme, as well as other icon themes, work on certain, well-known icon design sizes. Depending on where your icon is going to be used, you may need to design icons using multiple design grids (or sizes). Wait … isn’t vector format designed to be size independent? Yes … an no. Sometimes, we need icons to be drawn in a very small space. Now, if your icon design is too detailed, you end up with pixel mud instead of a clearly visible icon.

Please note that the grid is purely for design, to help you with getting your element sizes correct, such as line widths, and so on.

22×22 design grid

16×16 design grid

Thus, you will need to design icons at least twice in some situations, assuming default settings for menu items and toolbar buttons:

  • 16×16 design grid for menu items and some timeline icons, but not for track header icons. If an icon is never used in these contexts, you can skip this design size.
  • 22×22 design grid for toolbar buttons.

CSS Style Code

Each icon has to be designed using a vector-based image program, and saved to the SVG format. In order to turn such an icon into an color-theme adapting icon, you need to add the following CSS style code. You can do this, for instance, from within Inkscape. In Inkscape, use Shift+Ctrl+X to show the XML editor pane. Then add the new elements defs and style, with their attributes and content. See also the following code snippet with all CSS class declarations:
<defs id="defs3051">
  <style type="text/css" id="current-color-scheme">
    .ColorScheme-Text {color:#4d4d4d;}
    .ColorScheme-Highlight {color:#3daee9;}
    .ColorScheme-Background {color:#eff0f1;}
    .ColorScheme-PositiveText {color:#2ecc71;}
    .ColorScheme-NegativeText {color:#da4453;}
    .ColorScheme-NeutralText {color:#f67400;}
  </style>
</defs>
Next, apply the individual CSS styles to your graphical elements. You do this by adding class= attributes to each element, with one of the CSS class names listed above; for instance, ColorScheme-Text, et cetera. Finally, set all colors for filling and strokes of all graphical elements to the special color currentColor instead of their specific color values.

If you did everything correctly, then the filemanager preview should show your icon using the correct colors, instead of black.

Important: make sure that the style element contains these two attributes with their correct values:

  • type=”text/css” – without the type attribute your icon will be rendered black instead of the correct and adaptive colors.
  • id=”current-color-scheme” – without the proper id attribute, you icon won’t adapt the current desktop color scheme.

Useful References

The KDE techbase post Theme details: Using system colors is probably the most important document with respect to color-theme adaptive icon sets. It lists the available CSS classes that KDE Frameworks 5 supports for theming icons. However, be aware, that this post is incomplete with respect to the CSS classes.

As it is often the case, the source code kiconloader.cpp (KF5 git repository clone on GitHub) of comes to our rescue. Look out for the definition of STYLESHEET_TEMPLATE: it contains all supported CSS classes for theming. See above for the definitive list of them.

The KDE Visual Design Group Human Interaction Guide (HIG) is also worth a good read:

  • HIG section Color talks about the Breeze color theme and the color roles.
  • HIG section Icon Design illustrates rules and designs in more depth.

And finally, some overall info about color theme-adaptive Breeze icons: performance updates for breeze icons (blog KDE and Linux).