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

From ArchWiki
Jump to: navigation, search
(Making Qt apps use GTK+ themes: Removed 'libgnomeui' suggestion, as it doesn't seem to be necessary. Made "Having trouble" section into subection.)
Line 233: Line 233:
  
 
  qtconfig
 
  qtconfig
 +
 +
According [https://bbs.archlinux.org/viewtopic.php?id=99175&p=1 this thread], you may simply run this to solve this issue:
 +
 +
pacman -S libgnomeui
  
 
== Other Tricks ==
 
== Other Tricks ==

Revision as of 15:24, 4 August 2012

Summary help replacing me
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.
Related
GTK+
Qt

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.

  • Theme - Collection of a style, an icon theme and a colour theme.
  • Style - Graphical layout; look.
  • Icon Theme - Set of global icons.
  • Colour Theme - Set of global colours 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, colours, icons, cursors, fonts).
  • Use a special theme engine, which intermediates the modification of the other graphical toolkit to match your main toolkit:
    • if you work in KDE 4 desktop environment then there is available a GTK-Qt engine, which updates GTK+ configuration files automatically so that GTK+ appearance is similar to the Qt one;
    • if you work in other desktop environments, you can choose QGtkStyle engine (built in Qt), which forces Qt apps to use your GTK+ 2.x theme.

Should you use also GTK+ 3.x toolkit, follow the GTK+ 3.x wiki article to find out how to make it look similar to GTK+ 2.x themes.

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.

KDE4 Oxygen

Oxygen is the QT4 style that installs with KDE4.

oxygen-gtk

A couple of GTK+ ports are available in the oxygen-gtk packages. Their primary goal is to ensure visual consistency between GTK2/GTK3 and qt-based applications running under kde. Secondary objectives are to also have stand-alone, nice looking gtk themes that behave well on other Desktop Environments. Unlike other attempts made to port the kde oxygen theme to gtk, these attempts do not depend on Qt (via some Qt to Gtk conversion engine), nor do they render widget appearances via hard coded pixmaps, which otherwise break everytime some setting is changed in kde.

 pacman -S oxygen-gtk2 oxygen-gtk3
Automatic procedure

To change the GTK theme a few applications are available:

 pacman -S gtk-kde4
 pacman -S gtk-chtheme
 pacman -S gtk-theme-switch2
 pacman -S lxappearance

Then change the theme of your choice in the respective application:

gtk-kde4 ("System Settings > Lost and Found > GTK style")
gtk-chtheme
gtk-theme-switch2
lxappearance

You can also install kde-gtk-configAUR from AUR. After install it can be found in System Settings > Application Appearance > GTK Configuration. It allows you to configure the look and certain settings for both GTK2 and GTK3 applications. Integrating the usual addon installer of KDE you can also download and install other GTK themes.

Manual procedure

To manually change the GTK theme to oxygen-gtk , you need to create the file ~/.kde4/share/config/gtkrc-2.0 with the following content:

include "/usr/share/themes/oxygen-gtk/gtk-2.0/gtkrc"
include "~/.themes/oxygen-gtk/gtk-2.0/gtkrc"
style "user"
{ 
fg[NORMAL] = "#1b1918"
bg[NORMAL] = "#d5d1cf"
text[NORMAL] = "#181615"
base[NORMAL] = "#ffffff"
fg[ACTIVE] = "#1b1918"
bg[ACTIVE] = "#d5d1cf"
text[ACTIVE] = "#181615"
base[ACTIVE] = "#ffffff"
fg[PRELIGHT] = "#1b1918"
bg[PRELIGHT] = "#d5d1cf"
text[PRELIGHT] = "#ffffff"
base[PRELIGHT] = "#43ace8"
fg[SELECTED] = "#1b1918"
bg[SELECTED] = "#d5d1cf"
text[SELECTED] = "#ffffff"
base[SELECTED] = "#43ace8"
fg[INSENSITIVE] = "#8d8a88"
bg[INSENSITIVE] = "#ccc7c5"
text[INSENSITIVE] = "#a6a5a5"
base[INSENSITIVE] = "#f4f4f4"
GtkTreeView::odd_row_color="#ffffff"
GtkTreeView::even_row_color="#f8f7f6"
}
widget_class "*" style "user"
style "tooltips"
{ 
bg[NORMAL] = "#bedfff"
fg[NORMAL] = "#252321"
}
widget "gtk-tooltips" style "tooltips"
#gtk-theme-name="qt4"
gtk-font-name="Sans Serif 9"
gtk-icon-theme-name="gk4ico"
gtk-icon-sizes = "panel-menu=16,16:panel=16,16:gtk-button=22,22:gtk-large-toolbar=22,22"

Then you need to create the symbolic link ~/.kde4/share/config/gtkrc:

ln -s ~/.kde4/share/config/gtkrc-2.0 ~/.kde4/share/config/gtkrc

Oxygen Icons

If you are using Oxygen icons and want a consistent look in GTK open/save dialogs, you can install an oxygenrefit2 icon theme from AUR and set it as your GTK icon theme. Add the theme to the ~/.gtkrc-2.0 file or you can use lxappearance and set it.

gtk-icon-theme-name="OxygenRefit2"

There are also a couple GTK themes built on the gtk-kde42-oxygen-theme Oxygen style that can also do this.

QtCurve

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.

# pacman -S qtcurve-gtk2 qtcurve-kde3 qtcurve-kde4

To manually change the GTK theme to QtCurve, you need to create the file ~/.gtkrc-2.0-kde4 with the following content:

include "/usr/share/themes/QtCurve/gtk-2.0/gtkrc"
include "/etc/gtk-2.0/gtkrc"

style "user-font"
{
    font_name="Sans Serif"
}
widget_class "*" style "user-font" 
gtk-theme-name="QtCurve"

Then you need to create the symbolic link ~/.gtkrc-2.0:

ln -s .gtkrc-2.0-kde4 .gtkrc-2.0

If you want also specify a font, you can add (and adapt) the following line to the file:

 gtk-font-name="Sans Serif 9"

Others

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:

  • klearlooks (qt3); clearlooks (gtk2)

How do I set styles for each toolkit?

You can use the following methods to change the theme used in each environment.

QT3 styles

  • 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

  • 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

Note that while Qt Configuration allows you to choose the theme, font, etc. for the Qt apps, you can modify more settings with KDE 4 System Settings - e.g. font antialiasing and hinting.

GTK2 styles

GTK1 styles

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.

GTK-QT-Engine

This one is for use by GTK+ applications running in KDE, which basically means this does not work in other desktop environments. 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.

# pacman -S gtk-qt-engine

You can access it from:

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:

  • ~/.gtkrc2.0-kde
  • ~/.kde4/env/gtk-qt-engine.rc.sh
  • ~/gtk-qt-engine.rc

Make it work with OpenOffice

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.

Making Qt apps use GTK+ themes

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. To enable this style, use Qt Configuration or KDE 4 System Settings (see above) and choose "GTK+" style.

Note: Beginning with version 4.5 this style is included in Qt and does not require a separate package anymore.
Having trouble making your Qt applications use QGtkStyle?

Qt will not apply QGtkStyle correctly if GTK is using the GTK-QT-Engine. 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 GTK-QT-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 from a shell and selecting the Gtk+ style is:

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:

  • Tell Qt where to look for your GTK configuration file by adding the following to your .xinitrc file:
    • Add this line before invoking the window manager.
    • To add multiple paths, separate them with colons.
    • The $HOME part will expand to be path to your user's home directory. Using the ~ shortcut will not work.
.xinitrc
...
export GTK2_RC_FILES="$HOME/.gtkrc-2.0"
...
  • In .gtkrc-2.0 you must specify a GTK theme. For example:
.gtkrc-2.0
...
gtk-theme-name="Crux"
...

However it seems in some cases those tools insert only an include directive like

.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 like above, note however that Gtk2-style-change applications might overwrite that change when you use them.

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

gconftool-2 --set --type string /desktop/gnome/interface/gtk_theme your-theme-name

To choose your GTK theme for QT apps you must run:

qtconfig

According this thread, you may simply run this to solve this issue:

pacman -S libgnomeui

Other Tricks

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

/usr/bin/kgtk-wrapper gimp

OR

Creating a symbolic link to kgtk using the name of the GTK2 binary. Then you can run /usr/bin/gimp when you want to run gimp with KDE dialogs.

ln -s /usr/bin/kgtk-wrapper /usr/local/bin/gimp
/usr/local/bin/gimp

aMSN GTK or KDE dialogs

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 aMSN's Plugin Page

Using custom GTK style

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:

GTK2_RC_FILES=/usr/share/themes/QtCurve/gtk-2.0/gtkrc firefox

It will launch firefox with QtCurve theme.

Using gtk icon theme in Qt apps

If you do not using Gnome run gconf-editor and edit that setting to your icon theme name

/desktop/gnome/interface/icon_theme

Troubleshooting

Themes not working in GTK apps

If the style or theme engine you setup is not showing in your GTK apps then it's 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, ~/.gtkrc2.0 or ~/.gtkrc2.0-kde for GTK2

Newer versions of gtk-qt-engine use ~/.gtkrc2.0-kde and set the export variable in ~/.kde/env/gtk-qt-engine.rc.sh 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