Skip to content

Sync titlebar button appearance with GTK CSD apps

Currently GTK applications with Client Side Decorations always use decorations from the respected GTK CSS theme. Because of CSS nature different themes may handle decorations in the headerbars differently, therefore making modifying them via user css a very hard task. However, what we can do is to use decoration appearance syncing in our own theme - Breeze GTK.

💡 Idea

Breeze GTK uses svg images for the representation of decoration buttons (close, minimize, maximize) appearance. So to achieve the goal what we do is the following:

  1. We ask KWin to render current decoration buttons to custom QPainters. For each button we must export every state (clicked, hovered, normal, inactive).
  2. QPainters then export decoration buttons to svg's.
  3. Then we save those images to assets folder in ~/.config/gtk-3.0/assets
  4. Then we create custom .css for Breeze GTK, that tells the theme to use these saved images for decorations.

🧪 Test Plan

Before doing any of this tests, restart kded5 (once). To open GTK application with the loaded module:

export GTK_PATH="~/kde/usr/lib/gtk-3.0/"

1. Main functionality

  1. Open Window Decorations KCM with applied kwin!39 (merged)
  2. Open GTK application with CSD
  3. Change window decorations
  4. GTK app should use the new decorations from the KCM


2. Change on colors' change

  1. Set window decorations to Breeze
  2. Open Colors KCM
  3. Open GTK app
  4. Change color scheme
  5. Decorations must be using new colors


3. Change on Breeze decoration's "circle" setting change

  1. Set window decorations to Breeze
  2. Open Breeze window decoration settings with applied breeze!13 (merged)
  3. Open GTK app
  4. Change the setting "Draw a circle around close button"
  5. Decoration now should respect the above setting


4. Change on GTK theme change

  1. Set GTK theme to Breeze
  2. Open GTK app
  3. Change window decorations, decorations should change
  4. Set GTK theme in Application Style KCM to something other (Pick some random GTK theme)
  5. Decorations should be from that GTK theme
  6. Change window decorations, decorations should not change


Depends on

🗒 Todo

  • Write correct decorations.css into ~/.config/gtk-3.0/
  • Enable decorations.css only if the current GTK theme is Breeze
  • Export inactive buttons states
  • Update decorations, if the user changed the Breeze "circle around the close button" setting
  • Update decorations' appearance on the fly
  • If possible, support Plastic window decoration
Edited by Nate Graham

Merge request reports