Difference between revisions of "Uniform look for Qt and GTK applications"

From ArchWiki
Jump to: navigation, search
(merged "2.1 changing styles" and "5.1 how do i set styles for each toolkit?")
(After system upgrade breeze icons are missing in GTK apps. Found solution here: https://bbs.archlinux.org/viewtopic.php?id=107465 This is second time I faced to this issue)
(214 intermediate revisions by 78 users not shown)
Line 1: Line 1:
[[Category:Desktop environments (English)]]
+
[[Category:Widget toolkits]]
[[Category:HOWTOs (English)]]
+
[[Category:Eye candy]]
[[Category:Eye candy (English)]]
+
[[es:Uniform look for Qt and GTK applications]]
{{i18n|Uniform Look for QT and GTK Applications}}
+
[[it:Uniform look for Qt and GTK applications]]
 +
[[ja:Qt と GTK アプリケーションの外観の統合]]
 +
[[ru:Uniform look for Qt and GTK applications]]
 +
[[zh-hans:Uniform look for Qt and GTK applications]]
 +
{{Related articles start}}
 +
{{Related|GTK+}}
 +
{{Related|Qt}}
 +
{{Related articles end}}
 +
[[Qt]] and [[GTK+]] based programs both use a different widget toolkit to render the graphical user interface. Each come with different themes, styles and icon sets by default, among other things, so the "look and feel" differ significantly. This article will help you make your Qt and GTK+ applications look similar for a more streamlined and integrated desktop experience.
  
{{Article summary start}}
+
== Overview ==
{{Article summary text|This articles details theme configuration of GTK+ at QT applications to ensure a uniform style. This article will cover configuration, theme engines, tricks and troubleshooting.}}
 
{{Article summary heading|Related}}
 
{{Article summary wiki|GTK+}}
 
{{Article summary end}}
 
  
= Introduction =
+
To get a similar look between the toolkits, you will most likely have to modify the following:
 +
* '''Theme''': The custom appearance of an application, widget set, etc. It usually consists of a style, an icon theme and a color theme.
 +
* '''Style''': The graphical layout and look of the widget set.
 +
* '''Icon Theme''': A set of global icons.
 +
* '''Color Theme''': A set of global colors that are used in conjunction with the style.
  
[http://en.wikipedia.org/wiki/Qt_(toolkit) Qt]- and [[GTK+]] -based programs both use a different widget toolkit to render the graphical user interface. Each come with different themes, styles and icon sets by default, among other things, so the "look and feel" differ significantly. This article will help you make your Qt and GTK+ applications look similar for a more streamlined and "integrated" desktop experience.
+
You can choose various approaches:
 +
* Modify [[#Styles for both Qt and GTK+|GTK+ and Qt styles]] separately with the tools listed below for each toolkit and aim for choosing similarly looking themes (style, colors, icons, cursors, fonts).
 +
* Use a special [[#Theme engines|theme engine]], which intermediates the modification of the other graphical toolkit to match your main toolkit.
  
''"Qt (pronounced "cute") is a cross-platform application development framework, widely used for the development of GUI programs (in which case it is known as a Widget toolkit), and also used for developing non-GUI programs such as console tools and servers."''
+
== Styles for both Qt and GTK+ ==
 +
There are widget style sets available for the purpose of integration, where builds are written and provided for both Qt and GTK+, all major versions included. With these, you can have one look for all applications regardless of the toolkit they had been written with.
 +
 
 +
{{Tip|You may want to apply user defined styles to root applications, see [[GTK#Theme not applied to root applications]] and [[Qt#Theme not applied to root applications]].}}
 +
{{Note|1=Since version 3.16, GTK+ 3 [https://bbs.archlinux.org/viewtopic.php?pid=1518404#p1518404 does not support] non-CSS themes, hence previous solutions such as Oxygen-Gtk are [https://bugs.kde.org/show_bug.cgi?id=340288 no longer viable] options.}}
 +
 
 +
=== Breeze ===
 +
 
 +
Breeze is the default Qt style of KDE Plasma. It can be installed with the {{Pkg|breeze}} package for Qt5, the {{Pkg|breeze-kde4}} package for Qt4, and the {{Pkg|breeze-gtk}} package for GTK+ 2 and GTK+ 3.
 +
 
 +
Once installed, you can use one of the many [[GTK+#Configuration tools|GTK+ configuration tools]] to change the GTK+ theme.
 +
 
 +
=== Adwaita ===
 +
 
 +
Adwaita is the default GNOME theme. The GTK+ 3 version is included in the {{Pkg|gtk3}} package, while the GTK+ 2 version is in {{Pkg|gnome-themes-standard}}. [https://github.com/MartinBriza/adwaita-qt adwaita-qt] is a Qt port of the Adwaita theme. Unlike [[#QGtkStyle]], which mimics the GTK+ 2 theme, it provides a native Qt style made to look like the GTK+ 3 Adwaita. It can be [[install|installed]] with the {{AUR|adwaita-qt4}} and {{AUR|adwaita-qt5}} packages for the Qt 4 and 5 versions, respectively.
 +
 
 +
To set the Qt style as default:
 +
 
 +
* For Qt4, it can be enabled with ''Qt Configuration'' ({{ic|qtconfig-qt4}}), choose ''adwaita'' under ''Appearance > GUI Style''. Alternatively, edit the {{ic|/etc/xdg/Trolltech.conf}} (system-wide) or {{ic|~/.config/Trolltech.conf}} (user-specific) file:
 +
 
 +
{{hc|~/.config/Trolltech.conf|2=
 +
...
 +
[Qt]
 +
style=adwaita
 +
...
 +
}}
 +
 
 +
* For Qt 5, it can be enabled by setting the following [[Environment variables#Graphical applications|environment variable]]: {{ic|1=QT_STYLE_OVERRIDE=adwaita}}. Alternatively, use {{Pkg|qt5ct}} package. For more detailed instructions, see [[Qt#Configuration of Qt5 apps under environments other than KDE Plasma]].
 +
 
 +
== Theme engines ==
 +
 
 +
A ''theme engine'' can be thought of as a thin layer API which translates themes (excluding icons) between one or more toolkits. These engines add some extra code in the process and it is arguable that this kind of a solution is not as elegant and optimal as using native styles.
 +
 
 +
=== QGtkStyle ===
 +
 
 +
{{Note|QGtkStyle has been removed from {{Pkg|qt5-base}} 5.7.0 [https://github.com/qtproject/qtbase/commit/899a815414e95da8d9429a4a4f4d7094e49cfc55] and added to {{Pkg|qt5-styleplugins}} [https://github.com/qtproject/qtstyleplugins/commit/102da7d50231fc5723dba6e72340bef3d29471aa]}}
  
*'''Theme''' - Collection of a style, an icon theme and a colour theme.
+
{{Warning|Depending on GTK+ 2 theme, this style may cause rendering issues such as transparent fonts or inconsistent widgets.}}
*'''Style''' - Graphical layout; look.
 
*'''Icon Theme''' - Set of global icons.
 
*'''Colour Theme''' - Set of global colours that are used in conjunction with the style.
 
  
= Styles for both Qt and GTK+ =
+
This Qt style uses GTK+ 2 to render all components to blend in with [[GNOME]] and similar GTK+ based environments. Beginning with Qt 4.5, this style is included in Qt. It requires {{Pkg|gtk2}} to be installed and configured.
  
There are widget style sets available for the purpose of integration, where builds are written and provided for both Qt and GTK+, all major versions included. With these, you can have one look for all applications regardless of the toolkit they had been written with.
+
This is the default Qt4 style in Cinnamon, GNOME and Xfce, and the default Qt5 style in Cinnamon, GNOME, MATE, LXDE and Xfce. In other environments:
  
== KDE4 Oxygen ==
+
* For Qt4, it can be enabled with ''Qt Configuration'' ({{ic|qtconfig-qt4}}), choose ''GTK+'' under ''Appearance > GUI Style''. Alternatively, edit the {{ic|/etc/xdg/Trolltech.conf}} (system-wide) or {{ic|~/.config/Trolltech.conf}} (user-specific) file:
  
The QT4 version installs with KDE.
+
{{hc|~/.config/Trolltech.conf|2=
 +
...
 +
[Qt]
 +
style=GTK+
 +
...
 +
}}
  
There's also a GTK+ version called [http://kde-look.org/content/show.php?content=103741 oxygen-molecule] and it's available via [http://aur.archlinux.org/packages.php?ID=26138 AUR]. It's goal is to provide a uniform look for GTK+ applications when used under the KDE desktop environment, by using gtk-engine-pixbuf, a dependency, which is also available via [http://aur.archlinux.org/packages.php?ID=16862 AUR].
+
* For Qt 5, it can be enabled by installing {{Pkg|qt5-styleplugins}} and setting the following [[Environment variables#Graphical applications|environment variable]]: {{ic|1=QT_QPA_PLATFORMTHEME=gtk2}}
  
While the AUR package provides some quick and enough instructions to finish the installation, download [http://kde-look.org/content/show.php?content=103741 oxygen-molecule] from KDE-look for further documentation and variations.
+
For full uniformity, make sure that the configured [[GTK+#Themes|GTK+ theme]] supports both GTK+ 2 and GTK+ 3. If your preferred theme has inconsistent rendering after configuring Qt to use GTK+2, install {{ic|gtk-theme-switch2}} and choose a theme.
  
== QtCurve ==
+
=== QGnomePlatform ===
  
Available for ''qt4'' (kde4), ''qt3'' (kde3), and ''gtk2'' (gnome) in the '''[extra]''' repository, this highly-configurable style is the most popular all-rounder. It has many controls for various options, ranging from the appearance of buttons to the shape of sliders. You can install all of them using pacman.
+
This Qt 5 platform theme applies the appearance settings of GNOME for Qt applications. It can be installed with the {{AUR|qgnomeplatform}} package or the {{AUR|qgnomeplatform-git}} package for the development version. It does not provide a Qt style itself, instead it requires a [[#Styles for both Qt and GTK+|style that support both Qt and GTK+]].
# pacman -S qtcurve-gtk2 qtcurve-kde3 qtcurve-kde4
 
  
== Others ==
+
This platform theme is enabled automatically in GNOME since version 3.20. For other systems, it can be enabled by setting the following [[Environment variables#Graphical applications|environment variable]]: {{ic|1=QT_QPA_PLATFORMTHEME=qgnomeplatform}}.
  
Similar style sets are those that look like each other - written and provided for both Qt and GTK+ - but are not necessarily from the same developers. You may have to do some minor tweaking to make them look the same. Below is a list:
+
== Tips and tricks ==
 +
=== KDE file dialogs for GTK+ applications ===
 +
'''Chromium''' 
 +
At least for chromium installing {{ic|kdialog}} makes chromium used kde file dialog ( so `KGtk-wrapper` is not required )
  
*klearlooks (qt3); clearlooks (gtk2)
+
{{Warning|Some GTK+ applications may not be compatible with KGtk-wrapper (e.g. [[Chromium]]), sometimes the wrapper makes the application crash ([[Firefox]] or [[Thunderbird]]).}}
  
= How do I set styles for each toolkit? =
+
{{AUR|kgtk}} from the [[AUR]] is a wrapper script which uses {{ic|LD_PRELOAD}} to force KDE file dialogs in GTK+ 2.x apps. Once installed you can run GTK+ 2.x applications with {{ic|kgtk-wrapper}} in two ways (using [[GIMP]] in the examples):
  
You can use the following methods to change the theme used in each environment.
+
* Calling {{ic|kgtk-wrapper}} directly and using the GTK+ 2.x binary as an argument:
 +
:{{bc|$ /usr/bin/kgtk-wrapper gimp}}
 +
* Modifying the KDE .desktop shortcuts files you can find at {{ic|/usr/share/applications/}} to prefix the {{ic|Exec}} statement with kgtk-wrapper.
 +
:e.g. with [[GIMP]], edit the {{ic|/usr/share/applications/gimp.desktop}} shortcut file and replace {{ic|1=Exec=gimp-2.8 %U}} by {{ic|1=Exec=kgtk-wrapper gimp-2.8 %U}}.
  
== QT3 styles ==
+
=== Using a GTK+ icon theme in Qt apps ===
* Using ''KDE3 Control Center'' (kcontrol):
 
:--> Appearance & Themes --> Style --> Widget Style
 
* kde-config --style [name of style]
 
* ''Qt Configuration'' (qt3config | /opt/qt/bin/qtconfig)
 
:--> Appearance --> Select GUI Style
 
  
== QT4 styles ==
+
{{Style|Duplicates [[environment variables]]}}
* Using ''KDE4 System Settings'' (/usr/bin/systemsettings)
 
:--> Common Appearance and Behavior --> Application Appearance --> Style --> Widget Style''
 
* ''Qt Configuration'' (/usr/bin/qtconfig)
 
:--> Appearance --> Select GUI Style
 
  
== GTK2 styles ==
+
If you are running Plasma, install {{Pkg|kde-gtk-config}} and select the icon-theme under ''System Settings > Application Style > GTK''.
* {{Package Official|lxappearance}}
 
* {{Package Official|gtk-chtheme}}
 
* {{Package Official|gtk-theme-switch2}}
 
* {{Package Official|gtk2_prefs}}
 
* [[GTK%2B#GTK.2B_2.x|Manual configuration]]
 
  
== GTK1 styles ==
+
If you are using [[GNOME]], first check if {{Pkg|dconf-editor}} is installed.
* [https://aur.archlinux.org/packages.php?K=gtk-theme-switch gtk-theme-switch package (AUR)]
 
  
= Theme Engines =
+
Then, run {{ic|dconf-editor}} and look under ''org > gnome > desktop > interface'' for {{ic|icon-theme}} key and change it to your preferred icon theme.
  
A Theme Engine can be thought of as a thin layer API which translates themes (excluding icons) between one or more toolkits. These engines add some extra code in the process and it is arguable that this kind of a solution is not as elegant and optimal as using native styles.
+
If you are not using [[GNOME]], for example if you are running a minimal system with {{Pkg|i3-wm}}, first install {{Pkg|dconf-editor}}.  
  
== GTK-QT-Engine ==
+
Then, run {{ic|dconf-editor}} and look under ''org > gnome > desktop > interface'' for {{ic|icon-theme}} key and change it to your preferred icon theme.
  
This one is for use by GTK+ applications running in KDE, which basically means this is for KDE. It applies all Qt settings (styles, fonts, not icons though) to the GTK+ applications and uses the style plug-ins directly. Please note that there are rendering issues with some Qt styles.
+
Since, you are not using [[GNOME]], you might have to set the value of {{ic|DESKTOP_SESSION}} in your profile. To do that execute the below code in a terminal and restart your system.
  
  # pacman -S gtk-qt-engine
+
  $ echo 'export DESKTOP_SESSION=gnome' >> /etc/profile
  
You can access it from:
+
'''OR'''
:''Control Center (kcontrol) --> Appearance & Themes --> GTK Styles and Fonts''
 
  
If you want to remove it entirely and every trace of it, you should delete the following files:
+
Set {{ic|1=export DESKTOP_SESSION=gnome}} somewhere in your {{ic|~/.xinitrc}} or, if you are using a [[Display manager]] in [[Xprofile]].
  
*~/.gtkrc2.0-kde
+
{{Note| If the icon theme was not applied, you might want to check if the name that you entered of your preferred theme, was in the correct format. For example, if you want to apply the currently active icon theme to your QT applications, you can find the correct format of it's name with the command:
*~/.kde4/env/gtk-qt-engine.rc.sh
 
*~/gtk-qt-engine.rc
 
  
=== Make it work with OpenOffice ===
+
{{bc|1=$ cat ~/.gtkrc-2.0 {{!}} grep icon-theme {{!}} cut -d= -f2}}
Set (as root):
 
export SAL_GTK_USE_PIXMAPPAINT=1
 
into /etc/profile. In KDE4 systemsettings, make sure "use my KDE style in GTK applications" is selected in Appearance > GTK styles and fonts.
 
  
== QGtkStyle ==
+
}}
  
This is a Qt style which intends to make applications blend perfectly into the GNOME desktop environment by using GTK to render all components. To use this style you must have at least GTK+ 2.0 and Qt 4.3, although Qt 4.4 or higher is preferred.
+
=== Improve subpixel rendering of GTK apps under KDE Plasma ===
  
{{Note|Beginning with version 4.5 this style is included in Qt. You don't have to install this package yourself, but there is an entry in the AUR for those still interested: [[http://aur.archlinux.org/packages.php?ID=16964 qgtkstyle-svn]].}}
+
See [[Font configuration#LCD filter]].
  
===Having trouble making your Qt applications use QGtkStyle?===
+
== Troubleshooting ==
  
Qt won't apply QGtkStyle correctly if GTK is using the [[Uniform Look for QT and GTK Applications#GTK-QT-Engine|GTK-QT-Engine]]. Qt determines whether the [[Uniform Look for QT and GTK Applications#GTK-QT-Engine|GTK-QT-Engine]] is in use by reading the GTK configuration files listed in the environmental variable '''GTK2_RC_FILES'''. If the environmental variable is not set properly, Qt assumes you are using the [[Uniform Look for QT and GTK Applications#GTK-QT-Engine|GTK-QT-Engine]], sets QGtkStyle to use the style GTK style ''Clearlooks'', and outputs an error message:
+
=== Qt applications do not use QGtkStyle ===
 +
Qt will not apply QGtkStyle correctly if GTK+ is using the [[#GTK+-Qt Engine|GTK+-Qt Engine]]{{Broken section link}}. Qt determines whether the GTK+-Qt Engine is in use by reading the GTK+ configuration files listed in the environmental variable {{ic|GTK2_RC_FILES}}. If the environmental variable is not set properly, Qt assumes you are using the engine, sets QGtkStyle to use the style GTK+ style ''Clearlooks'', and outputs an error message:
  
 
  QGtkStyle cannot be used together with the GTK_Qt engine.
 
  QGtkStyle cannot be used together with the GTK_Qt engine.
  
Another error you may get after launching qtconfig from a shell and selecting the Gtk+ style is:
+
Another error you may get after launching {{ic|qtconfig-qt4}} from a shell and selecting the GTK+ style is:
  
 
  QGtkStyle was unable to detect the current GTK+ theme.
 
  QGtkStyle was unable to detect the current GTK+ theme.
  
Users of [[Openbox]] and other non-GNOME environments may encounter this problem. Here is a solution:
+
According to [https://bbs.archlinux.org/viewtopic.php?id=99175&p=1 this thread], you may simply have to install {{AUR|libgnomeui}} to solve this issue. This has the added benefit that you do not need to edit a file every time you change your theme via a graphical tool, like the one provided by xfce.
  
*Tell Qt where to look for your GTK configuration file by adding the following to your {{Filename|.xinitrc}} file:
+
Users of [[Openbox]] and other non-GNOME environments may encounter this problem. To solve this, first add the following to your {{ic|.xinitrc}} file:
**To add multiple paths, separate them with colons.
+
{{hc|.xinitrc|<nowiki>
**The $HOME part will expand to be path to your user's home directory. Using the ~ shortcut won't work.
+
...
{{File|name=.xinitrc|content=...
 
 
export GTK2_RC_FILES="$HOME/.gtkrc-2.0"
 
export GTK2_RC_FILES="$HOME/.gtkrc-2.0"
...}}
+
...
 +
</nowiki>}}
  
*In {{Filename|.gtkrc-2.0}} you must specify a GTK theme. For example:
+
{{Note|
**This is usually done for you by an [[Uniform Look for QT and GTK Applications#GTK2_styles|application which sets GTK2 Styles]]
+
* Make sure to add this line before invoking the window manager.
**If {{Filename|~/.gtkrc-2.0}} doesn't exist, simply create it and insert the following line.
+
* You can add multiple paths by separating them with colons.
{{File|name=.gtkrc-2.0|content=...
+
* Make sure to use {{ic|$HOME}} instead of {{ic|~}} as it will not properly expand to the user's home directory.
gtk-theme-name="Crux"
+
}}
...}}
+
 
However it seems in some cases those tools insert only an include directive like
+
Then specify the theme you want in the {{ic|~/.gtkrc-2.0}} file using a [[#GTK2 styles|dedicated application]]{{Broken section link}} or manually, by adding:
{{File|name=.gtkrc-2.0|content=...
+
{{hc|.gtkrc-2.0|<nowiki>
 +
...
 +
gtk-theme-name="[name of theme]"
 +
...
 +
</nowiki>}}
 +
 
 +
Some tools only insert the following include directive in {{ic|~/.gtkrc-2.0}}:
 +
{{hc|.gtkrc-2.0|
 +
...
 
include "/usr/share/themes/SomeTheme/gtk-2.0/gtkrc"
 
include "/usr/share/themes/SomeTheme/gtk-2.0/gtkrc"
...}} which apparently is not recognized by all versions of QGtkStyle. You can hotfix this problem by inserting the gtk-theme-name manually in your .gtkrc-2.0 like above, note however that Gtk2-style-change applications might overwrite that change when you use them.
+
...
 +
}}
 +
 +
which apparently is not recognized by all versions of QGtkStyle. You can hotfix this problem by inserting the {{ic|gtk-theme-name}} manually in your {{ic|~/.gtkrc-2.0}} file like above.
  
To choose your GTK theme for QT apps you must run:
+
{{Note|Style-changing applications will most probably rewrite the {{ic|~/.gtkrc-2.0}} file the next time you change themes.}}
  
qtconfig
+
If these steps do not work, install {{Pkg|gconf}} and run this command:
  
= Other Tricks =
+
  gconftool-2 --set --type string /desktop/gnome/interface/gtk_theme [name of theme]
== KDE file dialogs for GTK2 apps ==
 
KGtk is a wrapper script that LD_PRELOAD to force KDE file dialogs (open, save, etc) in GTK2 apps. If you use KDE and prefer its file dialogs over GTK's then you can install kgtk from AUR. Once installed you can run GTK2 applications with kgtk-wrapper in 2 ways (using gimp in the examples).
 
  
Calling kgtk-wrapper directly and using the GTK2 binary as an arguement
+
If you further want to set the same icon and cursor theme, then you have to specify them, too.
/usr/local/bin/kgtk-wrapper gimp
 
  
OR
+
gconftool-2 --set --type string /desktop/gnome/interface/icon_theme Faenza-Dark
  
Creating a symbolic link to kgtk using the name of the GTK2 binary.  Then you can run /usr/local/bin/gimp when you want to run gimp with KDE dialogs.
+
This sets the icon theme to Faenza-Dark located in {{ic|/usr/share/icons/Faenza-Dark}}. For the cursor theme you first have to set the gconf value.
ln -s /usr/local/bin/kgtk-wrapper /usr/local/bin/gimp
 
/usr/local/bin/gimp
 
  
== aMSN GTK or KDE dialogs ==
+
gconftool-2 --set --type string /desktop/gnome/peripherals/mouse/cursor_theme Adwaita
aMSN's TK file dialogs are plain looking but no fear there is a plugin that will allow you to use GTK or KDE file dialogs to match your desktop.  You can find the plugin on [http://www.amsn-project.net/plugins.php aMSN's Plugin Page]
 
  
== Using custom GTK style ==
+
Then you will have to create the file {{ic|/usr/share/icons/default/index.theme}} with the following lines:
You can use custom styles for specific GTK2 applications. For this, use GTK2_RC_FILES=/path/to/theme/gtk-2.0/gtkrc appname
 
  
For example:
+
[Icon Theme]
  GTK2_RC_FILES=/usr/share/themes/QtCurve/qtk-2.0/gtkrc firefox
+
  Inherits=Adwaita
It will launch firefox with QtCurve theme.
 
  
= Troubleshooting =
+
=== Themes not working in GTK+ apps ===
  
== Themes not working in GTK apps ==
+
If the style or theme engine you set up is not showing in your GTK applications then it is likely your GTK+ settings files are not being loaded for some reason. You can check where your system expects to find these files by doing the following..
 +
$ export | grep gtk
  
If the style or theme engine you setup isn't showing in your GTK apps then it's likely your GTK settings files aren't being loaded for some reason. You can check where your system expects to find these files by doing the following..
+
Usually the expected files should be {{ic|~/.gtkrc}} for GTK1 and {{ic|~/.gtkrc2.0}} or {{ic|~/.gtkrc2.0-kde}} for GTK+ 2.x.
$ export | grep gtk
 
  
Usually the expected files should be ~/.gtkrc for GTK1, ~/.gtkrc2.0 or ~/.gtkrc2.0-kde for GTK2
+
=== GTK+ apps don't use svg (breeze) icons after system upgrade ===
  
Newer versions of gtk-qt-engine use ~/.gtkrc2.0-kde and set the export variable in ~/.kde/env/gtk-qt-engine.rc.sh
+
Try to run this to fix this issue:
If you recently removed gtk-qt-engine and are trying to set a GTK theme then you must remove ~/.kde/env/gtk-qt-engine.rc.sh and reboot. Doing this will ensure that GTK looks for it's settings in the standard ~/.gtkrc2.0 instead of ~/.gtkrc2.0-kde
+
# gdk-pixbuf-query-loaders --update-cache

Revision as of 19:56, 7 February 2018

Qt and GTK+ based programs both use a different widget toolkit to render the graphical user interface. Each come with different themes, styles and icon sets by default, among other things, so the "look and feel" differ significantly. This article will help you make your Qt and GTK+ applications look similar for a more streamlined and integrated desktop experience.

Overview

To get a similar look between the toolkits, you will most likely have to modify the following:

  • Theme: The custom appearance of an application, widget set, etc. It usually consists of a style, an icon theme and a color theme.
  • Style: The graphical layout and look of the widget set.
  • Icon Theme: A set of global icons.
  • Color Theme: A set of global colors that are used in conjunction with the style.

You can choose various approaches:

  • Modify GTK+ and Qt styles separately with the tools listed below for each toolkit and aim for choosing similarly looking themes (style, colors, icons, cursors, fonts).
  • Use a special theme engine, which intermediates the modification of the other graphical toolkit to match your main toolkit.

Styles for both Qt and GTK+

There are widget style sets available for the purpose of integration, where builds are written and provided for both Qt and GTK+, all major versions included. With these, you can have one look for all applications regardless of the toolkit they had been written with.

Tip: You may want to apply user defined styles to root applications, see GTK#Theme not applied to root applications and Qt#Theme not applied to root applications.
Note: Since version 3.16, GTK+ 3 does not support non-CSS themes, hence previous solutions such as Oxygen-Gtk are no longer viable options.

Breeze

Breeze is the default Qt style of KDE Plasma. It can be installed with the breeze package for Qt5, the breeze-kde4 package for Qt4, and the breeze-gtk package for GTK+ 2 and GTK+ 3.

Once installed, you can use one of the many GTK+ configuration tools to change the GTK+ theme.

Adwaita

Adwaita is the default GNOME theme. The GTK+ 3 version is included in the gtk3 package, while the GTK+ 2 version is in gnome-themes-standard. adwaita-qt is a Qt port of the Adwaita theme. Unlike #QGtkStyle, which mimics the GTK+ 2 theme, it provides a native Qt style made to look like the GTK+ 3 Adwaita. It can be installed with the adwaita-qt4AUR and adwaita-qt5AUR packages for the Qt 4 and 5 versions, respectively.

To set the Qt style as default:

  • For Qt4, it can be enabled with Qt Configuration (qtconfig-qt4), choose adwaita under Appearance > GUI Style. Alternatively, edit the /etc/xdg/Trolltech.conf (system-wide) or ~/.config/Trolltech.conf (user-specific) file:
~/.config/Trolltech.conf
...
[Qt]
style=adwaita
...

Theme engines

A theme engine can be thought of as a thin layer API which translates themes (excluding icons) between one or more toolkits. These engines add some extra code in the process and it is arguable that this kind of a solution is not as elegant and optimal as using native styles.

QGtkStyle

Note: QGtkStyle has been removed from qt5-base 5.7.0 [1] and added to qt5-styleplugins [2]
Warning: Depending on GTK+ 2 theme, this style may cause rendering issues such as transparent fonts or inconsistent widgets.

This Qt style uses GTK+ 2 to render all components to blend in with GNOME and similar GTK+ based environments. Beginning with Qt 4.5, this style is included in Qt. It requires gtk2 to be installed and configured.

This is the default Qt4 style in Cinnamon, GNOME and Xfce, and the default Qt5 style in Cinnamon, GNOME, MATE, LXDE and Xfce. In other environments:

  • For Qt4, it can be enabled with Qt Configuration (qtconfig-qt4), choose GTK+ under Appearance > GUI Style. Alternatively, edit the /etc/xdg/Trolltech.conf (system-wide) or ~/.config/Trolltech.conf (user-specific) file:
~/.config/Trolltech.conf
...
[Qt]
style=GTK+
...

For full uniformity, make sure that the configured GTK+ theme supports both GTK+ 2 and GTK+ 3. If your preferred theme has inconsistent rendering after configuring Qt to use GTK+2, install gtk-theme-switch2 and choose a theme.

QGnomePlatform

This Qt 5 platform theme applies the appearance settings of GNOME for Qt applications. It can be installed with the qgnomeplatformAUR package or the qgnomeplatform-gitAUR package for the development version. It does not provide a Qt style itself, instead it requires a style that support both Qt and GTK+.

This platform theme is enabled automatically in GNOME since version 3.20. For other systems, it can be enabled by setting the following environment variable: QT_QPA_PLATFORMTHEME=qgnomeplatform.

Tips and tricks

KDE file dialogs for GTK+ applications

Chromium At least for chromium installing kdialog makes chromium used kde file dialog ( so `KGtk-wrapper` is not required )

Warning: Some GTK+ applications may not be compatible with KGtk-wrapper (e.g. Chromium), sometimes the wrapper makes the application crash (Firefox or Thunderbird).

kgtkAUR from the AUR is a wrapper script which uses LD_PRELOAD to force KDE file dialogs in GTK+ 2.x apps. Once installed you can run GTK+ 2.x applications with kgtk-wrapper in two ways (using GIMP in the examples):

  • Calling kgtk-wrapper directly and using the GTK+ 2.x binary as an argument:
$ /usr/bin/kgtk-wrapper gimp
  • Modifying the KDE .desktop shortcuts files you can find at /usr/share/applications/ to prefix the Exec statement with kgtk-wrapper.
e.g. with GIMP, edit the /usr/share/applications/gimp.desktop shortcut file and replace Exec=gimp-2.8 %U by Exec=kgtk-wrapper gimp-2.8 %U.

Using a GTK+ icon theme in Qt apps

Tango-edit-clear.pngThis article or section needs language, wiki syntax or style improvements. See Help:Style for reference.Tango-edit-clear.png

If you are running Plasma, install kde-gtk-config and select the icon-theme under System Settings > Application Style > GTK.

If you are using GNOME, first check if dconf-editor is installed.

Then, run dconf-editor and look under org > gnome > desktop > interface for icon-theme key and change it to your preferred icon theme.

If you are not using GNOME, for example if you are running a minimal system with i3-wm, first install dconf-editor.

Then, run dconf-editor and look under org > gnome > desktop > interface for icon-theme key and change it to your preferred icon theme.

Since, you are not using GNOME, you might have to set the value of DESKTOP_SESSION in your profile. To do that execute the below code in a terminal and restart your system.

$ echo 'export DESKTOP_SESSION=gnome' >> /etc/profile

OR

Set export DESKTOP_SESSION=gnome somewhere in your ~/.xinitrc or, if you are using a Display manager in Xprofile.

Note: If the icon theme was not applied, you might want to check if the name that you entered of your preferred theme, was in the correct format. For example, if you want to apply the currently active icon theme to your QT applications, you can find the correct format of it's name with the command:
$ cat ~/.gtkrc-2.0 | grep icon-theme | cut -d= -f2

Improve subpixel rendering of GTK apps under KDE Plasma

See Font configuration#LCD filter.

Troubleshooting

Qt applications do not use QGtkStyle

Qt will not apply QGtkStyle correctly if GTK+ is using the GTK+-Qt Engine[broken link: invalid section]. Qt determines whether the GTK+-Qt Engine is in use by reading the GTK+ configuration files listed in the environmental variable GTK2_RC_FILES. If the environmental variable is not set properly, Qt assumes you are using the engine, sets QGtkStyle to use the style GTK+ style Clearlooks, and outputs an error message:

QGtkStyle cannot be used together with the GTK_Qt engine.

Another error you may get after launching qtconfig-qt4 from a shell and selecting the GTK+ style is:

QGtkStyle was unable to detect the current GTK+ theme.

According to this thread, you may simply have to install libgnomeuiAUR to solve this issue. This has the added benefit that you do not need to edit a file every time you change your theme via a graphical tool, like the one provided by xfce.

Users of Openbox and other non-GNOME environments may encounter this problem. To solve this, first add the following to your .xinitrc file:

.xinitrc
...
export GTK2_RC_FILES="$HOME/.gtkrc-2.0"
...
Note:
  • Make sure to add this line before invoking the window manager.
  • You can add multiple paths by separating them with colons.
  • Make sure to use $HOME instead of ~ as it will not properly expand to the user's home directory.

Then specify the theme you want in the ~/.gtkrc-2.0 file using a dedicated application[broken link: invalid section] or manually, by adding:

.gtkrc-2.0
...
gtk-theme-name="[name of theme]"
...

Some tools only insert the following include directive in ~/.gtkrc-2.0:

.gtkrc-2.0
...
include "/usr/share/themes/SomeTheme/gtk-2.0/gtkrc"
...

which apparently is not recognized by all versions of QGtkStyle. You can hotfix this problem by inserting the gtk-theme-name manually in your ~/.gtkrc-2.0 file like above.

Note: Style-changing applications will most probably rewrite the ~/.gtkrc-2.0 file the next time you change themes.

If these steps do not work, install gconf and run this command:

gconftool-2 --set --type string /desktop/gnome/interface/gtk_theme [name of theme]

If you further want to set the same icon and cursor theme, then you have to specify them, too.

gconftool-2 --set --type string /desktop/gnome/interface/icon_theme Faenza-Dark

This sets the icon theme to Faenza-Dark located in /usr/share/icons/Faenza-Dark. For the cursor theme you first have to set the gconf value.

gconftool-2 --set --type string /desktop/gnome/peripherals/mouse/cursor_theme Adwaita

Then you will have to create the file /usr/share/icons/default/index.theme with the following lines:

[Icon Theme]
Inherits=Adwaita

Themes not working in GTK+ apps

If the style or theme engine you set up is not showing in your GTK applications then it is likely your GTK+ settings files are not being loaded for some reason. You can check where your system expects to find these files by doing the following..

$ export | grep gtk

Usually the expected files should be ~/.gtkrc for GTK1 and ~/.gtkrc2.0 or ~/.gtkrc2.0-kde for GTK+ 2.x.

GTK+ apps don't use svg (breeze) icons after system upgrade

Try to run this to fix this issue:

# gdk-pixbuf-query-loaders --update-cache