Plasma tricks: custom title bars for apps and some consistency

Plasma 5 comes with a very cool feature: KWin can set a different colour scheme for title bar of each app (basing on app identity or title of the window). For example, in the image below you can see Gwenview, Dolphin, Ksysguard and Kate each one with a different colour for its title bar:Colored title bars

This has interesting consequences on consistency of third party apps (web apps included) and we’ll see it below. Before that let’s see how to apply a custom colour for each app.

1. In System Settings > Colours: save your current colour scheme (to re-apply it later), switch from “scheme” tab to “colours” tab and edit the colours of active and inactive window title bar:Colored title bar 01

2. Save the new colour scheme with your app name (in the example “Dolphin”) and restore your previous colour scheme:

Color title bar 02

3. As shown in the following images (excuse the menu entries in Italian): right click on the interested app’s title bar > other actions > app specific settings > last tab > force colour scheme for title bar (or something similar) > choose your app colour scheme (“Dolphin” in the example):

Color-title-bar-03

Color-title-bar-4

Result:

Color-title-bar-05

In the following before/after images you can see how I use a custom colour for Telegram to make it more consistent:
Color-title-bar-07

Color-title-bar-06

You can use this also with web apps:
Color-title-bar-08
But here you need to set the colour according to the window instead of according to the app (it’s always in right click on title bar menu entries).
To make a “web app” with Chromium create a desktop launcher that has the following command:

 chromium --app=YOUR-URL

To do it with Firefox, you have to create a new profile:

firefox -p

and in it install the add-ons that hide tabs and navigation bar (you can easly find them). If you name the profile “app” you can launch Firefox with that profile with

firefox -p app YOUR-URL

It would be cool if there will be a feature to auto-detect a convenient colour for the app and apply it. Since we will have soon Android apps on Plasma they could be integrated better with this trick.

Thanks for the attention! Ciao and see you around!

35 responses on “Plasma tricks: custom title bars for apps and some consistency

  1. J Janz

    Neat! I wanted this for quite a while (I never knew how to implement it) and back then I thought of using the application’s icon predominant color (I believe there might be a lib somewhere around the web to get it), or a darker/lighter variation, for this “feature to auto-detect a convenient colour for the app and apply it”. It probably wouldn’t give the exact application’s window top widget’s color but would certainly match the application itself! I also thought of it automatically setting text/menu/option-highlight color to that same color (but it’s no longer titlebar related)!

    Also, for easy-to-use firefox’ webapp feature I’ve found this addon: https://addons.mozilla.org/firefox/addon/standalone/ .

    1. J Janz

      “application’s icon predominant color” if it’s not black, white or gray, unless these is(are) its only color(s).

  2. Thanks for showing yet another reason to use KDE!

    1. 😉
      (BTW KDE is a community that develop many products, one of them is Plasma ;-))

  3. serafean

    Hi, I very much agree that this is a cool feature, and IMO could be made a part of the HCI design (eg red titlebar for apps requiring attention [ eg password required] and other categories).

    What I think is that this is the wrong way around : my absolutist view on this is that the webapp should be integrated. In practice this would mean overriding the CSS of the webapp.

    What using this would bring is IMO a subset of the inconsistency client-side decorations would bring. From a concerned user : leave the titlebar to kwin, let only application content flash all the colors of the rainbow everywhere.

    To sum up : yes for setting it up on your machine if you like it, and publicizing it as a possibility. (I might do it too for one or two apps 🙂 )
    But a big no for the autodetection feature.
    The web is bad enough HCI-wise, please don’t enable it on the desktop…

  4. Joe

    Could you elaborate on ‘we will have soon Android apps on Plasma’?

    Thanks!

  5. Fabian

    But how do i remove that line between the decoration and the app?
    https://imgur.com/ublTMYz

    1. You have to set window background colour to Telegram one (previewing in System Settings you should see the entire window become Telegram’s blue)

    2. Lionel Chauvin

      You must change the “Background Selection” color

  6. Pingback: Unifica el color de la barra de Título en Plasma 5 | Pingüinos y un café

  7. Seregy

    Not any plans to reproduce tabs grouping?

  8. Lionel Chauvin

    It would be better if the brise qt style could change the color of toolbars according to the titlebar

  9. Martin Gräßlin

    Very nice blog post 🙂

    1. Thanks to you for this feature (if I remember correctly you implemented it, right?)

      1. Martin Gräßlin

        yes, I implemented it.

        1. Thanks Martin,

          Any chance we will see this implemented automatically similar to what Android does where android:statusBar can inherits android:colorPrimary so they look merged?

  10. How do you get rid of the gap in the border of the window?
    https://imgur.com/OZb6vc8

    1. In System Settings > Apps style > Window decoration you can set the border to zero

  11. Lionel Chauvin

    Instead of trying to guess the app’s color, why it can not be provided in .desktop files ?
    (like many other features such as jumplists)

  12. BartOtten

    Can we ship a sane set of defaults with KDE? Would be nice if starting users have a nice set (which they probably never will change).

    1. I’m thinking about it. Probably I will work on it at the next sprint at CERN (7-13 March).

  13. Pingback: Descubre las opciones avanzadas del panel de lugares de Dolphin » MuyLinux

  14. Franco Martelli

    “(excuse the menu entries in Italian)” maybe you can find useful to temporary change LC_ALL environment variable for your next posts, open Konsole and try these commands:
    ~$ xhost +
    ~$ su –
    ~# LC_ALL=C dolphin
    Sadly it doesn’t work properly with:
    ~# LC_ALL=C systemsettings
    If you’ll find a better way please let me to know 🙂

    1. Thanks I will try it as soon as possible 😀

    2. Ricardo J. Barberis

      Nice trick, but why execute it as root?

      Simply open a new terminal and:
      export LANG=C
      export LANGUAGE=C
      export LC_ALL=C
      dolphin
      kate
      systemsettings

      For some apps it works better than others.

      Cheers.

  15. SuperScript

    Hey Alex,
    How did you get your Dolphin menu on the side (like on your Color-title-bar-05.png screenshot)? I love that look!
    Thanks for the post!

    1. Right-mouse-clic on the toolbar to unlock it and drag it to put it on the preferred side 😉 I don’t mention it because I was planning to do it in a next post about maximizing vertical space.

  16. Manuel

    Thanks for the tip!

    I love Plasma!!!!!

  17. Pingback: Links 26/1/2016: MPlayer 1.2.1, Parsix GNU/Linux 8.5 | Techrights

  18. Pingback: Descubre las opciones avanzadas del panel de lugares de Dolphin | uiolibre

  19. Arnab

    Hi Alex, a great implement of this feature. Is there any way to keep the active window title bar color and inactive window title bar color same ?

    1. Thanks. I’m not sure I understand your question: in color scheme settings you can set individually the active and inactive title bar colors, you can simply set the same color for those two parameters. Do this answer your question?

  20. sdimitrije

    Thanks for the trick man.
    I really like the decoration theme, which one were you using in this post?

    1. It’s the default, Breeze, with “no borders” option enabled.

Leave a Reply