Difference between revisions of "GTK+"

From ArchWiki
Jump to: navigation, search
m (Enable typeahead search feature of file chooser widget: minor reword)
 
(172 intermediate revisions by 37 users not shown)
Line 1: Line 1:
[[Category:Widget Toolkits]]
+
[[Category:Widget toolkits]]
 
[[cs:GTK+]]
 
[[cs:GTK+]]
 
[[de:GTK+]]
 
[[de:GTK+]]
[[es:Improve GTK Application Looks]]
+
[[es:GTK+]]
 
[[it:GTK+]]
 
[[it:GTK+]]
 
[[ja:GTK+]]
 
[[ja:GTK+]]
 +
[[ru:GTK+]]
 
[[uk:GTK+]]
 
[[uk:GTK+]]
 
[[zh-CN:GTK+]]
 
[[zh-CN:GTK+]]
Line 11: Line 12:
 
{{Related|Qt}}
 
{{Related|Qt}}
 
{{Related|GNU Project}}
 
{{Related|GNU Project}}
 +
{{Related|GTK+/Development}}
 
{{Related articles end}}
 
{{Related articles end}}
 
From the [http://www.gtk.org GTK+ website]:
 
From the [http://www.gtk.org GTK+ website]:
:''GTK+, or the GIMP Toolkit, is a multi-platform toolkit for creating graphical user interfaces. Offering a complete set of widgets, GTK+ is suitable for projects ranging from small one-off tools to complete application suites.''
+
:GTK+, or the GIMP Toolkit, is a multi-platform toolkit for creating graphical user interfaces. Offering a complete set of widgets, GTK+ is suitable for projects ranging from small one-off tools to complete application suites.
  
 
GTK+, The GIMP Toolkit, was initially made by the [[GNU Project]] for the [[GIMP]] but is now a very popular toolkit with bindings for many languages. This article will explore the tools used to configure the GTK+ theme, style, icon, font and font size, and also detail manual configuration.
 
GTK+, The GIMP Toolkit, was initially made by the [[GNU Project]] for the [[GIMP]] but is now a very popular toolkit with bindings for many languages. This article will explore the tools used to configure the GTK+ theme, style, icon, font and font size, and also detail manual configuration.
  
== Configuration programs ==
+
== Installation ==
  
These GUI programs allow theme selection and at least customising of a font. They generally overwrite the {{ic|~/.gtkrc-2.0}} file.
+
Two versions of GTK+ are currently available in the [[official repositories]]. They can be [[install]]ed with the following packages:
 +
* '''GTK+ 3.x''' is available with the {{Pkg|gtk3}} package.
 +
* '''GTK+ 2.x''' is available with the {{Pkg|gtk2}} package.
 +
* '''GTK+ 1.x''' is available with the {{AUR|gtk}} package.
  
* {{Pkg|lxappearance}}: A configuration tool from the [[LXDE]] project, which does not require any other parts of LXDE or other desktop environment. More flexible customisation than the other programs.
+
== Themes ==
* {{Pkg|gtk-chtheme}}
+
* {{Pkg|gtk-theme-switch2}}
+
* {{Pkg|gtk2_prefs}}
+
  
See also [[Uniform Look for Qt and GTK Applications#Changing styles in each toolkit]].
+
In GTK+ 2, the default theme is ''Raleigh'', but Arch Linux has a custom configuration file at {{ic|/usr/share/gtk-2.0/gtkrc}}, which sets the default theme to ''Adwaita''. In GTK+ 3, the default theme is ''Adwaita'', but ''HighContrast'', ''HighContrastInverse'' and ''Raleigh'' themes are also included.
  
== Themes ==
+
To force a specific theme, you can set environment variables.
 +
* For GTK+ 2, use the {{ic|GTK2_RC_FILES}} environment variable, for example:
 +
$ GTK2_RC_FILES=/usr/share/themes/Industrial/gtk-2.0/gtkrc gimp
 +
:will launch GIMP with the Industrial theme.
 +
* For GTK+ 3, use the {{ic|GTK_THEME}} environment variable, for example:
 +
$ GTK_THEME=Adwaita:dark gnome-calculator
 +
:will launch GNOME Calculator with the dark variant of Adwaita theme.
 +
 
 +
More themes can be installed from the official repositories or the [[AUR]].
 +
 
 +
'''GTK+ 2 and GTK+ 3.20 or newer are supported:'''
 +
* {{App|Breeze|GTK+ version of KDE's default widget theme.|https://quickgit.kde.org/?p=breeze-gtk.git|{{Pkg|breeze-gtk}}}}
 +
* {{App|Deepin|Default theme for the Deepin desktop.|https://github.com/linuxdeepin/deepin-gtk-theme|{{Pkg|deepin-gtk-theme}}}}
 +
* {{App|GNOME Standard Themes|Default themes for the GNOME desktop. Includes: ''Adwaita'', ''HighContrast''|https://github.com/GNOME/gnome-themes-standard|{{Pkg|gnome-themes-standard}}}}
 +
* {{App|MATE Themes|Default themes for the MATE desktop. Includes: ''BlackMATE'', ''BlueMenta'', ''Blue-Submarine'', ''ContrastHighInverse'', ''Green-Submarine'', ''Menta'', ''TraditionalGreen'', ''TraditionalOk''|https://github.com/mate-desktop/mate-themes|{{Pkg|mate-themes}}}}
 +
* {{App|Numix|A flat and light theme with a modern look (GNOME, Openbox, Unity, Xfce).|https://github.com/shimmerproject/Numix|{{Pkg|numix-themes}}}}
 +
* {{App|Adapta| An adaptive Gtk+ theme based on Material Design Guidelines.|https://github.com/tista500/Adapta|{{AUR|adapta-gtk-theme}}}}
 +
* {{App|Arc|A flat theme with a modern look and transparent elements.|https://github.com/horst3180/arc-theme|{{AUR|gtk-theme-arc}}}}
 +
* {{App|Blackbird|Dark Desktop Suite for Xfce.|https://github.com/shimmerproject/Blackbird|{{AUR|xfce-theme-blackbird}}}}
 +
* {{App|Flat-Plat| A Material Design-like flat theme for GTK3, GTK2, and GNOME-Shell.|https://github.com/nana-4/Flat-Plat|{{AUR|flatplat-theme-git}}}}
 +
* {{App|Gnome-breeze|A GTK theme created to match with the new Plasma 5 Breeze.|https://github.com/dirruk1/gnome-breeze|{{AUR|gnome-breeze-git}}}}
 +
* {{App|Greybird|A grey and blue Xfce theme, used by default in Xubuntu 12.04.|https://github.com/shimmerproject/Greybird|{{AUR|xfce-theme-greybird}}}}
 +
* {{App|Vertex|Theme for GTK 3, GTK 2, Gnome-Shell and Cinnamon.|https://github.com/horst3180/vertex-theme|{{AUR|vertex-themes}}}}
 +
* {{App|Zuki|Themes for GTK, gnome-shell and more.|https://github.com/lassekongo83/zuki-themes|{{AUR|zuki-themes-git}}}}
 +
 
 +
'''Only GTK+ 2 is supported:'''
 +
* {{App|GTK+ Engines|Theme engines for GTK+ 2. Includes: ''Clearlooks'', ''Crux'', ''Industrial'', ''Mist'', ''Redmond'', ''ThinIce''|https://github.com/GNOME/gtk-engines|{{Pkg|gtk-engines}}}}
 +
* {{App|Xfce Gtk+ Engine|Xfce Gtk+-2.0 engine and themes|http://git.xfce.org/xfce/gtk-xfce-engine/|{{Pkg|gtk-xfce-engine}}}}
 +
* {{App|Oxygen-Gtk|Port of the default KDE widget theme (Oxygen) to GTK2|https://projects.kde.org/projects/playground/artwork/oxygen-gtk/|{{Pkg|oxygen-gtk2}}}}
 +
* {{App|Aurora Gtk Engine|Latest member of the Clearlooks family.|http://gnome-look.org/content/show.php/Aurora+Gtk+Engine?content=56438|{{Pkg|gtk-engine-aurora}}}}
 +
* {{App|Openbox Themes|Various themes for the Openbox window manager.|https://www.debian.org/|{{Pkg|openbox-themes}}}}
 +
* {{App|QtCurve|A configurable set of widget styles for KDE and Gtk.|https://projects.kde.org/projects/playground/base/qtcurve|{{Pkg|qtcurve-gtk2}}}}
 +
 
 +
There are a number of additional GTK+ themes in the [[AUR]]: [https://aur.archlinux.org/packages.php?K=gtk-theme search for gtk-theme], [https://aur.archlinux.org/packages.php?K=gtk2-theme search for gtk2-theme].
 +
 
 +
{{Note|Because GTK+ 3 changes rapidly, GTK+ 3 themes often require re-working after a GTK+ 3 release. For this reason, not all GTK+ 3 themes may look as intended when used with the latest GTK+ 3 version.}}
 +
 
 +
=== GTK+ and Qt ===
 +
 
 +
If you have GTK+ and Qt (KDE) applications on your desktop then you know that their looks do not blend well. If you wish to make your GTK+ styles match your Qt styles please read [[Uniform look for Qt and GTK applications]].
 +
 
 +
== Configuration tools ==
 +
 
 +
Most major [[desktop environments]] provide tools to configure the GTK+ theme, icons, font and font size, and manage these settings via [http://standards.freedesktop.org/xsettings-spec/xsettings-spec-0.5.html XSettings]:
 +
* If you use [[Cinnamon]], use Themes tool (''cinnamon-settings themes''): go to ''System Settings > Themes''.
 +
* If you use [[Enlightenment]]: go to ''Settings > All > Look > Application Theme''.
 +
* If you use [[GNOME]], use GNOME Tweak Tool (''gnome-tweak-tool''): install {{Pkg|gnome-tweak-tool}}.
 +
* If you use [[MATE]], use the Appearance Preferences tool (''mate-appearance-properties''): go to ''System > Settings > Appearance''.
 +
* If you use [[Xfce]], use the Appearance tool: go to ''Settings > Appearance''.
 +
 
 +
Other GUI tools generally overwrite the [[#Configuration|configuration files]].
  
=== GTK+ 1.x ===
+
'''Both GTK+ 2 and GTK+ 3 are supported:'''
There are loads of GTK+ 1.x themes in the [[AUR]]: [https://aur.archlinux.org/packages.php?K=gtk-theme search for gtk-theme]. A good start is {{AUR|gtk-smooth-engine}}.
+
* {{App|KDE GTK Configurator|Application that allows you to change style and font of GTK+ 2 and Gtk+ 3 applications.|https://projects.kde.org/kde-gtk-config|{{Pkg|kde-gtk-config}}}}
 +
:After installation, {{ic|kde-gtk-config}} can also be found in ''System Settings > Application Style  > GTK''.
 +
* {{App|LXAppearance|Desktop independent GTK+ 2 and GTK+ 3 style configuration tool from the LXDE project (it does not require other parts of the LXDE desktop).|http://wiki.lxde.org/en/LXAppearance|{{Pkg|lxappearance}}}}
 +
* {{App|Oo-mox| Graphical application for generating different color variations of Numix theme (GTK2, GTK3) and gnome-colors icon theme.|https://github.com/actionless/oomox|{{AUR|oomox}}}}
  
Most major [[Desktop Environment|desktop environments]] provide tools to configure the GTK+ theme, icons, font and font size.
+
'''Only GTK+ 2 is supported:'''
 +
* {{App|GTK+ Change Theme|Little program that lets you change your GTK+ 2.0 theme (considered a better alternative to ''switch2'').|http://plasmasturm.org/code/gtk-chtheme/|{{Pkg|gtk-chtheme}}}}
 +
* {{App|GTK+ Preference Tool|GTK+ theme selector and font switcher.|http://gtk-win.sourceforge.net/home/index.php/Main/GTKPreferenceTool|{{Pkg|gtk2_prefs}}}}
 +
* {{App|GTK+ Theme Switch|Simple GTK+ theme switcher.|http://muhri.net/nav.php3?node=gts|{{Pkg|gtk-theme-switch2}}}}
  
Alternatively, use {{Pkg|gtk-theme-switch2}}. Run it with the {{ic|switch}} command.
+
== Configuration ==
  
=== GTK+ 2.x ===
+
GTK+ settings can be specified manually in configuration files, but desktop environments and applications can override these settings. Depending on GTK+ version, these files are located at:
 +
* GTK+ 2 user specific: {{ic|~/.gtkrc-2.0}}
 +
* GTK+ 2 system wide: {{ic|/etc/gtk-2.0/gtkrc}}
 +
* GTK+ 3 user specific: {{ic|$XDG_CONFIG_HOME/gtk-3.0/settings.ini}}, or {{ic|$HOME/.config/gtk-3.0/settings.ini}} if {{ic|$XDG_CONFIG_HOME}} is not set
 +
* GTK+ 3 system wide: {{ic|/etc/gtk-3.0/settings.ini}}
  
There are loads of GTK+ 2.x themes in the [[AUR]]: [https://aur.archlinux.org/packages.php?K=gtk2-theme search for gtk2-theme]. A good start is {{Pkg|gtk-engines}} which includes the popular ''Clearlooks'' theme.
+
{{Note|
 +
*See the [http://library.gnome.org/devel/gtk3/stable/GtkSettings.html#GtkSettings.properties GTK+ 3 ''GtkSettings'' properties] (and [http://library.gnome.org/devel/gtk2/stable/GtkSettings.html#GtkSettings.properties GTK+ 2 properties]) in the GTK+ programming reference manual for the full list of currently supported GTK+ configuration options.
 +
*Some of the settings described below (such as {{ic|gtk-icon-sizes}}) are deprecated and ignored since GTK+ 3.10.
 +
*If you edit your GTK+ configuration files, only newly started applications will display the changes.}}
  
Most major [[Desktop Environment|desktop environments]] provide tools to configure the GTK+ theme, icons, font and font size.
+
=== Basic theme configuration ===
  
Alternatively, GTK+ settings can be configured manually by editing {{ic|~/.gtkrc-2.0}}. A list of GTK+ settings can be found in the [http://library.gnome.org/devel/gtk/stable/GtkSettings.html GNOME library]. To manually change the GTK+ theme, icons, font and font size, add the following to {{ic|~/.gtkrc-2.0}}:
+
To manually change the GTK+ theme, icons, font and font size, add the following to the configuration files, for example:
  
 +
'''GTK+ 2:'''
 
{{hc|~/.gtkrc-2.0|2=
 
{{hc|~/.gtkrc-2.0|2=
gtk-icon-theme-name = "[name-of-icon-theme]"
+
gtk-icon-theme-name = "Adwaita"
gtk-theme-name = "[name-of-theme]"
+
gtk-theme-name = "Adwaita"
gtk-font-name = "[font-name] [size]"
+
gtk-font-name = "DejaVu Sans 11"
 
}}
 
}}
  
For example:
+
'''GTK+ 3:'''
{{hc|~/.gtkrc-2.0|2=
+
{{hc|$XDG_CONFIG_HOME/gtk-3.0/settings.ini|2=
gtk-icon-theme-name = "Tango"
+
[Settings]
gtk-theme-name = "Murrine-Gray"
+
gtk-icon-theme-name = Adwaita
gtk-font-name = "DejaVu Sans 8"
+
gtk-theme-name = Adwaita
 +
gtk-font-name = DejaVu Sans 11
 
}}
 
}}
  
{{Note| The above example requires the packages {{Pkg|ttf-dejavu}}, {{Pkg|tangerine-icon-theme}}, {{Pkg|gtk-engine-murrine}} from the [[Official Repositories|official repositories]], and {{AUR|gtk-theme-murrine-collection}} from the AUR.}}
+
{{Note|The icon theme name is the name defined in the theme's index file, ''not'' the name of its directory.}}
  
=== GTK+ 3.x ===
+
=== Dark theme variant ===
  
A good start is {{Pkg|gnome-themes-standard}} which includes the popular ''Adwaita'' theme.
+
Some GTK+ 3 theme contain a dark theme variant, but it's only used by default, when the application request it explicitly. To use dark theme variant with all GTK+ 3 applications, set:
  
If selected style has both GTK+ 2.x and GTK+ 3.x themes, they will be used. If selected style has only GTK+ 2.x theme, it will be used for GTK+ 2.x applications and (ugly) defaults will be used for GTK+ 3.x applications. If selected style has only GTK+ 3.x theme, it will be used for GTK+ 3.x applications and (ugly) defaults will be used for GTK+ 2.x applications. Thus for uniform UI appearance and best experience one can use style that has both GTK+ 2.x and GTK+ 3.x themes.
+
gtk-application-prefer-dark-theme = true
  
Most major [[Desktop Environment|desktop environments]] provide tools to configure the GTK+ theme, icons, font and font size. If you use [[GNOME]], use GNOME Tweak Tool: install {{pkg|gnome-tweak-tool}}. If you use [[Xfce]], use the Appearance tool: go to Settings-->Appearance.
+
=== Keyboard shortcuts ===
  
An alternative without huge dependencies is {{pkg|lxappearance}}.
+
Keyboard shortcuts (otherwise known as ''accelerators'' in GTK+) may be changed by hovering the mouse over the respective menu item, and pressing the desired key combination. To enable this feature, set:
  
If you prefer not to install a theme manager at all, your theme can be set manually in {{ic|$XDG_CONFIG_HOME/gtk-3.0/settings.ini}} (this is usually {{ic|~/.config/gtk-3.0/settings.ini}}). An example {{ic|settings.ini}} file:
+
gtk-can-change-accels = 1
{{hc|$XDG_CONFIG_HOME/gtk-3.0/settings.ini|2=
+
 
 +
==== Emacs keybindings ====
 +
To get Emacs-like keybindings in gtk apps:
 +
 
 +
For GTK2, add {{ic|1=gtk-key-theme-name = "Emacs"}} to {{ic|~/.gtkrc-2.0}}.
 +
 
 +
For GTK3 add the following to the noted file:
 +
 +
{{hc|1=~/.config/gtk-3.0/settings.ini|2=
 
[Settings]
 
[Settings]
gtk-application-prefer-dark-theme = false
+
gtk-key-theme-name = Emacs}}
gtk-theme-name = Zukitwo
+
gtk-fallback-icon-theme = gnome
+
gtk-icon-theme-name = [icon theme name]
+
gtk-font-name = [font name] [font size]
+
  
}}
+
Then run:
  
If it still does not change, delete old {{ic|gtk-3.0}} folder in {{ic|$XDG_CONFIG_HOME}} and copy {{ic|gtk-3.0}} folder from /path/to/theme to {{ic|$XDG_CONFIG_HOME}}. Example:
+
$ gsettings set org.gnome.desktop.interface gtk-key-theme "Emacs"
  
$ rm -r ~/.config/gtk-3.0/
+
XFCE has a similar setting:
$ cp -r /usr/share/themes/Zukitwo/gtk-3.0/ ~/.config/ 
+
  
 +
$ xfconf-query -c xsettings -p /Gtk/KeyThemeName -s Emacs
  
After this, you need to set the same theme in your DE's appearance configuration tool. There are only a few themes which provide a uniform look for GTK+ 3.x and GTK+ 2.x apps. A few examples:
+
The config files in {{ic|/usr/share/themes/Emacs/}} determine what the Emacs bindings are, and can be changed.
#Adwaita (part of {{pkg|gnome-themes-standard}})
+
Copying sections to the users {{ic|~/.gtkrc-2.0}} file allows for changes on a per user basis.
#Clearlooks-Phenix (AUR: {{aur|clearlooks-phenix-gtk-theme}})
+
#Newlooks for GTK+ 3 and Clearlooks for GTK+ 2
+
#Zukitwo
+
#Elegant Brit
+
#Atolm
+
#Hope
+
#OMG
+
  
{{Note|Some themes may require {{pkg|librsvg}} to display correctly, but not all specify it as a dependency.  Try installing it if the chosen theme looks broken.}}
+
=== GNOME menu delay ===
  
{{Note|There probably are other themes. Some of these themes are available in the AUR. Also, some of them are not usable as-is for displaying a GTK+ 2.x panel (light text over light background), so you need to use the provided [http://i.imgur.com/QmeyN.png panel background].}}
+
This setting controls the delay between pointing the mouse at a menu and that menu opening. This delay is measured in milliseconds.
  
You could find what themes installed on your system have both an GTK+ 2.x and GTK+ 3.x version by using this command (don't work with names containing spaces):
+
  gtk-menu-popup-delay = 0
find $(find ~/.themes /usr/share/themes/ -wholename "*/gtk-3.0" | sed -e "s/^\(.*\)\/gtk-3.0$/\1/")\
+
-wholename "*/gtk-2.0" | sed -e "s/.*\/\(.*\)\/gtk-2.0/\1"/
+
  
=== GTK+ and Qt ===
+
=== Reduce widget sizes ===
If you have GTK+ and Qt (KDE) applications on your desktop then you know that their looks do not blend well. If you wish to make your GTK+ styles match your Qt styles please read [[Uniform Look for Qt and GTK Applications]].
+
 
 +
If you have a small screen or you just do not like big icons and widgets, you can resize things easily.
 +
 
 +
To have icons without text in toolbars ([https://developer.gnome.org/gtk3/stable/gtk3-Standard-Enumerations.html#GtkToolbarStyle valid values]), use
 +
 
 +
gtk-toolbar-style = GTK_TOOLBAR_ICONS
 +
 
 +
To use smaller icons, use a line like this:
 +
 
 +
gtk-icon-sizes = "panel-menu=16,16:panel=16,16:gtk-menu=16,16:gtk-large-toolbar=16,16\
 +
:gtk-small-toolbar=16,16:gtk-button=16,16"
 +
 
 +
Or to remove icons from buttons completely:
 +
 
 +
gtk-button-images = 0
 +
 
 +
You can also remove icons from menus:
 +
 
 +
gtk-menu-images = 0
 +
 
 +
See also [http://martin.ankerl.com/2008/10/10/how-to-make-a-compact-gnome-theme/] and [http://gnome-look.org/content/show.php/Simple+eGTK?content=119812].
 +
 
 +
=== File-Chooser Startup-Location ===
 +
 
 +
Open the file-chooser within the '''current-working-directory''' and not the '''recent''' location. Normally the '''current-working-directory''' is '''home-directory'''.
 +
 
 +
'''GTK+ 3'''
 +
 
 +
Modify DConf with ''gsettings'', as the database file ($XDG_CONFIG_HOME/dconf/users) is binary:
 +
 
 +
$ gsettings set org.gtk.Settings.FileChooser startup-mode cwd
 +
 
 +
'''GTK+ 2'''
 +
 
 +
Modify {{ic|~/.config/gtk-2.0/gtkfilechooser.ini}} configuration file:
 +
 
 +
{{hc|~/.config/gtk-2.0/gtkfilechooser.ini|
 +
StartupMode=cwd}}
 +
 
 +
=== Legacy scrolling behavior ===
 +
 
 +
{{Note|This setting is not obeyed by all GTK+ applications.}}
 +
{{Tip|Legacy scrolling behaviour can be achieved reliably simply by using right click instead of left click.}}
 +
 
 +
Prior to GTK+ 3.6, clicking on either side of the slider in the scrollbar would move the scrollbar in the direction of the click by approximately one page. Since GTK+ 3.6, the slider will move directly to the position of the click. This behaviour can be reverted in some applications by creating the file with the content below:
 +
 
 +
{{hc|~/.config/gtk-3.0/settings.ini|<nowiki>
 +
[Settings]
 +
gtk-primary-button-warps-slider = false
 +
</nowiki>}}
 +
 
 +
=== Disable overlay scrollbars ===
 +
 
 +
Since GTK+ 3.15, overlay scrollbars are enabled by default, meaning that scrollbars will be shown only on mouseover in GTK+ 3 applications. This behavior can be reverted by setting the following environment variable: {{ic|1=GTK_OVERLAY_SCROLLING=0}}.
 +
 
 +
See [[Environment variables#Graphical applications]].
 +
 
 +
==== Remove overlay scroll indicators ====
 +
 
 +
The positions of the overlay scrollbars are indicated by thin dashed lines in the application window. These dashed lines will be present even when overlay scrolling is disabled using the environment variable discussed in the section above. To remove the indicator lines, create the following file:
 +
 
 +
{{hc|~/.config/gtk-3.0/gtk.css|
 +
/* Remove dotted lines from GTK+ 3 applications */
 +
undershoot.top, undershoot.right, undershoot.bottom, undershoot.left { background-image: none; }
 +
}}
 +
 
 +
== GDK backends  ==
 +
 
 +
GDK (the underlying abstraction layer of GTK+) supports multiple backends to display GTK+ applications. The default backend is ''x11''.
  
=== GTK+ and HTML with Broadway ===
+
=== Broadway backend ===
 
The GDK Broadway backend provides support for displaying GTK+ applications in a web browser, using HTML5 and web sockets.  
 
The GDK Broadway backend provides support for displaying GTK+ applications in a web browser, using HTML5 and web sockets.  
 
[https://developer.gnome.org/gtk3/3.8/gtk-broadway.html]
 
[https://developer.gnome.org/gtk3/3.8/gtk-broadway.html]
Line 119: Line 249:
  
 
Port Used on default
 
Port Used on default
  port &#61; 8080 + ($display_number - 1)
+
  port &#61; 8080 + $display_number
  
Point your browser to http://localhost:port
+
Point your browser to http://127.0.0.1:port
  
 
To Start apps
 
To Start apps
Line 131: Line 261:
 
  $ broadwayd --port $port_number --address $address $display_number
 
  $ broadwayd --port $port_number --address $address $display_number
  
== Configuration file ==
+
=== Wayland backend ===
  
{{Note|See the [http://library.gnome.org/devel/gtk/stable/GtkSettings.html#GtkSettings.properties ''GtkSettings'' properties] in the GTK+ programming reference manual for the full list of GTK configuration options.}}
+
The GDK [[Wayland]] backend can be enabled by setting the {{ic|GDK_BACKEND&#61;wayland}} environment variable.
  
The purpose of this section is to collect GTK+ configuration settings which can e.g. be used within one's GTK+ configuration files.
+
== Troubleshooting ==
  
There are two relevant locations for  GTK+ configuration files (which are in an ini format) : $XDG_CONFIG_HOME/gtk-3.0/ (usually ~/.config/gtk-3.0/) and /etc/gtk-3.0/. The former is reserved for user wide settings, and the latter for system wide settings.
+
=== Different themes between GTK+ 2 and GTK+ 3 applications ===
  
=== Enabling Customizable Keyboard Shortcuts ===
+
In general, if a selected theme has support for both GTK+ 2 and GTK+ 3, the theme will be applied to all GTK+ 2 and GTK+ 3 applications. If a selected theme has support for only GTK+ 2, it will be used for GTK+ 2 applications and the default GTK+ theme will be used for GTK+ 3 applications. If the selected theme has support for only GTK+ 3, it will be used for GTK+ 3 applications and the default GTK+ theme will be used for GTK+ 2 applications. Thus for application theme consistency, it is best to use a theme which has support for both GTK+ 2 and GTK+ 3.
  
You can customize your GTK+ applications' keyboard shortcuts (those are called ''accelerators'' in GTK+ terminology) by hovering your mouse over a menu item and pressing your desired key combination. However, this feature is disabled by default. To enable it, set
+
You could find what themes installed on your system  have both an GTK+ 2 and GTK+ 3 version by using this command (does not work with names containing spaces):
  gtk-can-change-accels = 1
+
  find $(find ~/.themes /usr/share/themes/ -wholename "*/gtk-3.0" | sed -e "s/^\(.*\)\/gtk-3.0$/\1/") -wholename "*/gtk-2.0" | sed -e "s/.*\/\(.*\)\/gtk-2.0/\1"/
  
=== Speed up your GNOME menu ===
+
=== Theme not applied to root applications ===
  
This setting controls the delay between you pointing the mouse at a menu and that menu opening in GNOME. Change this to a setting you prefer. I guess the number is in milliseconds, e.g. 250 being a quarter of a second.
+
As user theme files ({{ic|$XDG_CONFIG_HOME/gtk-3.0/settings.ini}}, {{ic|~/.gtkrc-2.0}}) are not read by other accounts, the selected theme will not apply to [[Running_X_apps_as_root|X applications run as root]]. Possible solutions include:
gtk-menu-popup-delay = 0
+
  
=== Reduce widget sizes ===
+
* Create symlinks, e.g
 +
# ln -s /home/[username]/.gtkrc-2.0 /etc/gtk-2.0/gtkrc
 +
# ln -s /home/[username]/.config/gtk-3.0/settings.ini /etc/gtk-3.0/settings.ini
 +
* Configure system-wide theme files: {{ic|/etc/gtk-3.0/settings.ini}} (GTK+ 3) or {{ic|/etc/gtk-2.0/gtkrc}} (GTK+ 2)
 +
* Adjust the theme as root
 +
# gksu lxappearance
 +
* Use a settings daemon (this is what most desktop environments do). A desktop-agnostic variant using [http://standards.freedesktop.org/xsettings-spec/xsettings-spec-0.5.html XSettings] is available in the [[AUR]] under {{aur|xsettingsd-git}}.
  
If you have a small screen or you just do not like big icons and widgets, you can resize things easily.
+
=== Client-side decorations ===
To have icons without text in toolbars, use
+
gtk-toolbar-style = GTK_TOOLBAR_ICONS
+
To use smaller icons, use a line like this:
+
gtk-icon-sizes = "panel-menu=16,16:panel=16,16:gtk-menu=16,16:gtk-large-toolbar=16,16\
+
:gtk-small-toolbar=16,16:gtk-button=16,16"
+
Or to remove icons from buttons completely:
+
gtk-button-images = 0
+
You can also remove icons from menus:
+
gtk-menu-images = 0
+
  
There is some more tweaking to do in your themes gtkrc like explained [http://martin.ankerl.com/2008/10/10/how-to-make-a-compact-gnome-theme/ here] and there's another [http://gnome-look.org/content/show.php/Simple+eGTK?content=119812 theme] that does it all.
+
GTK 3.12 introduced [http://blogs.gnome.org/mclasen/2013/12/05/client-side-decorations-in-themes/ client-side decorations], which move the title-bar away from the window manager. This may present issues such as [http://redmine.audacious-media-player.org/boards/1/topics/1135 double title-bars], no title-bar at all or [https://github.com/chjj/compton/issues/189 double shadows] with compositing enabled.
  
== Development ==
+
To remove the shadow and gap around windows (for example in combination with a tiling window manager), create the following file:
  
When writing a start-from-scratch GTK+ 3 program with C, it's necessary to add CFLAGS for gcc:
+
{{hc|~/.config/gtk-3.0/gtk.css|<nowiki>.window-frame, .window-frame:backdrop {
gcc -g -Wall `pkg-config --cflags --libs gtk+-3.0` -o base base.c
+
box-shadow: 0 0 0 black;
-g and -Wall parameters are not necessary since they are only for verbose debugging outputs.
+
border-style: none;
You may try out the official [http://developer.gnome.org/gtk-tutorial/stable/c39.html#SEC-HELLOWORLD Hello World example].
+
margin: 0;
 +
border-radius: 0;
 +
}
  
=== Write a simple message dialog app ===
+
.titlebar {
You can write your own GTK+ 3 message dialog easily in many programming languages through GObject-Introspection or bindings, or you can simply use bash.
+
border-radius: 0;
 +
}
  
The following examples display a simple "Hello world" in a message dialog.
+
.window-frame.csd.popup {
 +
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13);
 +
}
  
====Bash====
+
.header-bar {
*Dependency: {{Pkg|zenity}}
+
  background-image: none;
{{hc|hello_world.sh|<nowiki>#!/bin/bash
+
  background-color: #ededed;
zenity --info --title='Hello world!' --text='This is an example dialog.'</nowiki>}}
+
  box-shadow: none;
 +
}
 +
/* You may want to use this if you don't like the double title.
 +
GtkLabel.title {
 +
    opacity: 0;
 +
}*/
 +
</nowiki>}}
  
====Boo====
+
To adjust the buttons in the header bar, use the {{ic|gtk-decoration-layout}} setting. [https://developer.gnome.org/gtk3/stable/GtkSettings.html#GtkSettings--gtk-decoration-layout] The below examples removes all buttons:
*Dependency: {{AUR|gtk-sharp-3}} from AUR ({{Pkg|boo}})
+
*Makedependency:  {{Pkg|boo}}
+
*Build with: {{ic|booc hello_world.boo}}
+
*Run with: {{ic|mono hello_world.exe}} (or {{ic|booi hello_world.boo}})
+
  
{{hc|hello_world.boo|<nowiki>import Gtk from "gtk-sharp"
+
{{hc|~/.config/gtk-3.0/settings.ini|2=
Application.Init()
+
gtk-decoration-layout=menu:
Hello = MessageDialog(null, DialogFlags.Modal, MessageType.Info, ButtonsType.Close, "Hello world!")
+
}}
Hello.SecondaryText = "This is an example dialog."
+
Hello.Run()</nowiki>}}
+
  
====C====
+
=== cedilla ç/Ç instead of ć/Ć ===
*Dependency: {{Pkg|gtk3}} and {{Pkg|pkg-config}}
+
*Build with: {{Ic|gcc -o hello_world `pkg-config --cflags --libs gtk+-3.0` hello_world.c}}
+
{{hc|hello_world.c|<nowiki>#include <gtk/gtk.h>
+
void main (int argc, char *argv[]) {
+
gtk_init (&argc, &argv);
+
        GtkWidget *hello = gtk_message_dialog_new (NULL, GTK_DIALOG_MODAL, GTK_MESSAGE_INFO, GTK_BUTTONS_OK, "Hello world!");
+
gtk_message_dialog_format_secondary_text (GTK_MESSAGE_DIALOG (hello), "This is an example dialog.");
+
        gtk_dialog_run(GTK_DIALOG (hello));
+
}</nowiki>}}
+
  
====C++====
+
See [https://bugs.launchpad.net/ubuntu/+source/gtk+2.0/+bug/518056], and [https://bugs.launchpad.net/ubuntu/+source/gtk+2.0/+bug/518056/comments/37] for a workaround using Xcompose (US international layout).
*Dependency: {{Pkg|gtkmm3}}
+
*Build with: {{Ic|g++ -o hello_world `pkg-config --cflags --libs gtkmm-3.0` hello_world.cc}}
+
{{hc|hello_world.cc|<nowiki>#include <gtkmm/main.h>
+
#include <gtkmm/messagedialog.h>
+
int main(int argc, char *argv[]) {
+
Gtk::Main kit(argc, argv);
+
Gtk::MessageDialog Hello("Hello world!", false, Gtk::MESSAGE_INFO, Gtk::BUTTONS_OK);
+
Hello.set_secondary_text("This is an example dialog.");
+
Hello.run();
+
}</nowiki>}}
+
  
====C#====
+
===Suppress warning about accessibility bus===
*Dependency: {{AUR|gtk-sharp-3}} from AUR
+
*Build with: {{ic|mcs -pkg:gtk-sharp-3.0 hello_world.cs}}
+
*Run with: {{ic|mono hello_world.exe}}
+
{{hc|hello_world.cs|<nowiki>using Gtk;
+
public class HelloWorld {
+
static void Main() {
+
Application.Init ();
+
MessageDialog Hello = new MessageDialog (null, DialogFlags.Modal, MessageType.Info, ButtonsType.Close, "Hello world!");
+
Hello.SecondaryText="This is an example dialog.";
+
Hello.Run ();
+
}
+
}</nowiki>}}
+
  
====Genie====
+
If you do not use any [https://wiki.gnome.org/Accessibility Gnome Accessibility] features, you may receive warnings like:
*Dependency: {{Pkg|gtk3}}
+
*Makedependency: {{Pkg|vala}}
+
*Build with: {{Ic|valac --pkg gtk+-3.0 hello_world.gs}}
+
{{hc|hello_world.gs|<nowiki>uses
+
Gtk
+
init
+
Gtk.init (ref args)
+
var Hello=new MessageDialog (null, Gtk.DialogFlags.MODAL, Gtk.MessageType.INFO, Gtk.ButtonsType.OK, "Hello world!")
+
Hello.format_secondary_text ("This is an example dialog.")
+
Hello.run ()</nowiki>}}
+
  
====Java====
+
WARNING **: Couldn't connect to accessibility bus:
*Dependency: {{AUR|java-gnome}} from AUR
+
*Makedependency: java-environment
+
*Build with: {{ic|mkdir HelloWorld && javac -classpath /usr/share/java/gtk.jar -d HelloWorld HelloWorld.java}}
+
*Run with: {{ic|java -classpath /usr/share/java/gtk.jar:HelloWorld HelloWorld}}
+
  
{{hc|HelloWorld.java|<nowiki>import org.gnome.gtk.Gtk;
+
To suppress these warnings, execute programs with {{ic|1=NO_AT_BRIDGE=1}} or set that as a global [[environment variable]].
import org.gnome.gtk.Dialog;
+
import org.gnome.gtk.InfoMessageDialog;
+
  
public class HelloWorld
+
=== Titlebar background color mismatch ===
{
+
    public static void main(String[] args) {
+
        Gtk.init(args);
+
        Dialog Hello = new InfoMessageDialog(null, "Hello world!", "This is an example dialog.");
+
        Hello.run();
+
    }
+
}</nowiki>}}
+
  
====JavaScript====
+
If you are using a [[window manager]] which uses a window decoration theme that mimics the GTK+ theme background color, you may find that the titlebar color no longer completely matches the application color in some GTK+ 3 applications. As a workaround, create the following file:
*Dependencies: {{Pkg|gtk3}}, {{Pkg|gjs}} (works also with {{Pkg|seed}})
+
{{hc|~/.config/gtk-3.0/gtk.css|
{{hc|hello_world.js|<nowiki>#!/usr/bin/gjs
+
/* Always use background color */
Gtk = imports.gi.Gtk
+
GtkWindow {
Gtk.init(null, null)
+
    background-color: @theme_bg_color;
Hello = new Gtk.MessageDialog({type: Gtk.MessageType.INFO,
+
}
                              buttons: Gtk.ButtonsType.OK,
+
                              text: "Hello world!",
+
                              "secondary-text": "This is an example dialog."})
+
Hello.run()</nowiki>}}
+
  
====Perl====
+
/* Fix tooltip background override */
*Dependency: {{AUR|perl-gtk3}} from AUR
+
.tooltip {
{{hc|hello_world.pl|<nowiki>#!/usr/bin/perl
+
    background-color: rgba(0, 0, 0, 0.8);
use Gtk3 -init;
+
}
my $hello = Gtk3::MessageDialog->new (undef, 'modal', 'info', 'ok', "Hello world!");
+
$hello->set ('secondary-text' => 'This is an example dialog.');
+
$hello->run;</nowiki>}}
+
  
====Python====
+
.tooltip * {
*Dependencies: {{Pkg|gtk3}}, {{Pkg|python-gobject}}
+
    background-color: transparent;
{{hc|hello_world.py|<nowiki>#!/usr/bin/python
+
}
from gi.repository import Gtk
+
Gtk.init(None)
+
Hello=Gtk.MessageDialog(None, Gtk.DialogFlags.MODAL, Gtk.MessageType.INFO, Gtk.ButtonsType.CLOSE, "Hello world!")
+
Hello.format_secondary_text("This is an example dialog.")
+
Hello.run()</nowiki>}}
+
  
====Vala====
+
/* Fix Nautilus desktop window background override */
*Dependency: {{Pkg|gtk3}}
+
NautilusWindow {
*Makedependency: {{Pkg|vala}}
+
    background-color: transparent;  
*Build with: {{Ic|valac --pkg gtk+-3.0 hello_world.vala}}
+
}
{{hc|hello_world.vala|<nowiki>using Gtk;
+
}}
public class HelloWorld {
+
static void main (string[] args) {
+
Gtk.init (ref args);
+
var Hello=new MessageDialog (null, Gtk.DialogFlags.MODAL, Gtk.MessageType.INFO, Gtk.ButtonsType.OK, "Hello world!");
+
Hello.format_secondary_text ("This is an example dialog.");
+
Hello.run ();
+
}
+
}</nowiki>}}
+
  
====Visual Basic .NET====
+
=== Wrong focus events with tiling window managers ===
*Dependency: {{AUR|gtk-sharp-3}} from AUR
+
 
*Makedependency: {{Pkg|mono-basic}}
+
{{Note|1=This disables touchscreen support for GTK3 applications. [https://bugzilla.gnome.org/show_bug.cgi?id=677329#c14]}}
*Build with: {{ic|vbnc -r:/usr/lib/mono/gtk-sharp-3.0/gio-sharp.dll -r:/usr/lib/mono/gtk-sharp-3.0/glib-sharp.dll -r:/usr/lib/mono/gtk-sharp-3.0/gtk-sharp.dll hello_world.vb}}
+
 
*Run with: {{ic|mono hello_world.exe}}
+
[[Define]] {{ic|1=GDK_CORE_DEVICE_EVENTS=1}} to use GTK2 style input, instead of xinput2. [https://bugzilla.gnome.org/show_bug.cgi?id=677329#c10]
 +
 
 +
=== Thumbnail support for GTK+ 2 file dialog ===
 +
 
 +
Install {{AUR|gtk2-patched-filechooser-icon-view}} to have the option to view files as thumbnails instead of list in the GTK+ file chooser.
 +
 
 +
== Tips and tricks ==
 +
 
 +
=== Enable typeahead search feature of file chooser widget ===
 +
As of [https://bugzilla.gnome.org/show_bug.cgi?id=748672 v3.16], the typeahead search feature of [https://developer.gnome.org/gtk3/stable/GtkFileChooserDialog.html file chooser widget] (that is, to type the first few letters of a filename to quickly navigate to a file) is intentionally [https://mail.gnome.org/archives/commits-list/2015-January/msg05538.html disabled] in gtk3 codebase.  To re-enable this feature, patching is required. A patched gtk3 package is available in AUR as {{aur|gtk3-typeahead}}, install it if desired.
 +
 
 +
== Examples ==
 +
 
 +
GTK+ 2 configuration example:
 +
 
 +
{{hc|~/.gtkrc-2.0|2=
 +
# GTK theme
 +
include "/usr/share/themes/Clearlooks/gtk-2.0/gtkrc"
 +
 
 +
# Font
 +
style "myfont" {
 +
    font_name = "DejaVu Sans 8"
 +
}
 +
widget_class "*" style "myfont"
 +
gtk-font-name = "DejaVu Sans 8"
 +
 
 +
# Icon theme
 +
gtk-icon-theme-name = "Tango"
 +
 
 +
# Toolbar style
 +
gtk-toolbar-style = GTK_TOOLBAR_ICONS
 +
}}
 +
 
 +
GTK+ 3 example of a configuration as converted from GTK+ 2.x to GTK+ 3.x by {{Pkg|lxappearance}}:
 +
 
 +
{{hc|$XDG_CONFIG_HOME/gtk-3.0/settings.ini|2=
 +
[Settings]
 +
gtk-theme-name=TraditionalOk
 +
gtk-icon-theme-name=Fog
 +
gtk-font-name=Luxi Sans 12
 +
gtk-cursor-theme-name=mate
 +
gtk-cursor-theme-size=24
 +
gtk-toolbar-style=GTK_TOOLBAR_BOTH_HORIZ
 +
gtk-toolbar-icon-size=GTK_ICON_SIZE_LARGE_TOOLBAR
 +
gtk-button-images=1
 +
gtk-menu-images=1
 +
gtk-enable-event-sounds=0
 +
gtk-enable-input-feedback-sounds=0
 +
gtk-xft-antialias=1
 +
gtk-xft-hinting=1
 +
gtk-xft-hintstyle=hintslight
 +
gtk-xft-rgba=rgb
 +
}}
  
{{hc|hello_world.vb|<nowiki>Imports Gtk
+
== See also ==
Public Class Hello
+
Inherits MessageDialog
+
Public Sub New
+
MyBase.New(Me, DialogFlags.Modal, MessageType.Info, ButtonsType.Close, "Hello world!")
+
Me.SecondaryText = "This is an example dialog."
+
End Sub
+
Public Shared Sub Main
+
Application.Init
+
Dim Dialog As New Hello
+
Dialog.Run
+
End Sub
+
End Class</nowiki>}}
+
  
== Resources ==
 
 
* [http://www.gtk.org/ The official GTK+ website]
 
* [http://www.gtk.org/ The official GTK+ website]
* [[wikipedia:GTK+|Wikipedia article about GTK+]]
+
* [[Wikipedia:GTK+|Wikipedia article about GTK+]]
 
* [http://developer.gnome.org/gtk-tutorial/stable/ GTK+ 2.0 Tutorial]
 
* [http://developer.gnome.org/gtk-tutorial/stable/ GTK+ 2.0 Tutorial]
 
* [http://developer.gnome.org/gtk3/stable/ GTK+ 3 Reference Manual]
 
* [http://developer.gnome.org/gtk3/stable/ GTK+ 3 Reference Manual]
 
* [http://developer.gnome.org/gtkmm-tutorial/stable/ gtkmm Tutorial]
 
* [http://developer.gnome.org/gtkmm-tutorial/stable/ gtkmm Tutorial]
 
* [http://developer.gnome.org/gtkmm/stable/ gtkmm Reference Manual]
 
* [http://developer.gnome.org/gtkmm/stable/ gtkmm Reference Manual]

Latest revision as of 00:34, 14 August 2016

From the GTK+ website:

GTK+, or the GIMP Toolkit, is a multi-platform toolkit for creating graphical user interfaces. Offering a complete set of widgets, GTK+ is suitable for projects ranging from small one-off tools to complete application suites.

GTK+, The GIMP Toolkit, was initially made by the GNU Project for the GIMP but is now a very popular toolkit with bindings for many languages. This article will explore the tools used to configure the GTK+ theme, style, icon, font and font size, and also detail manual configuration.

Installation

Two versions of GTK+ are currently available in the official repositories. They can be installed with the following packages:

  • GTK+ 3.x is available with the gtk3 package.
  • GTK+ 2.x is available with the gtk2 package.
  • GTK+ 1.x is available with the gtkAUR package.

Themes

In GTK+ 2, the default theme is Raleigh, but Arch Linux has a custom configuration file at /usr/share/gtk-2.0/gtkrc, which sets the default theme to Adwaita. In GTK+ 3, the default theme is Adwaita, but HighContrast, HighContrastInverse and Raleigh themes are also included.

To force a specific theme, you can set environment variables.

  • For GTK+ 2, use the GTK2_RC_FILES environment variable, for example:
$ GTK2_RC_FILES=/usr/share/themes/Industrial/gtk-2.0/gtkrc gimp
will launch GIMP with the Industrial theme.
  • For GTK+ 3, use the GTK_THEME environment variable, for example:
$ GTK_THEME=Adwaita:dark gnome-calculator
will launch GNOME Calculator with the dark variant of Adwaita theme.

More themes can be installed from the official repositories or the AUR.

GTK+ 2 and GTK+ 3.20 or newer are supported:

  • Breeze — GTK+ version of KDE's default widget theme.
https://quickgit.kde.org/?p=breeze-gtk.git || breeze-gtk
  • Deepin — Default theme for the Deepin desktop.
https://github.com/linuxdeepin/deepin-gtk-theme || deepin-gtk-theme
  • GNOME Standard Themes — Default themes for the GNOME desktop. Includes: Adwaita, HighContrast
https://github.com/GNOME/gnome-themes-standard || gnome-themes-standard
  • MATE Themes — Default themes for the MATE desktop. Includes: BlackMATE, BlueMenta, Blue-Submarine, ContrastHighInverse, Green-Submarine, Menta, TraditionalGreen, TraditionalOk
https://github.com/mate-desktop/mate-themes || mate-themes
  • Numix — A flat and light theme with a modern look (GNOME, Openbox, Unity, Xfce).
https://github.com/shimmerproject/Numix || numix-themes
  • Adapta — An adaptive Gtk+ theme based on Material Design Guidelines.
https://github.com/tista500/Adapta || adapta-gtk-themeAUR
  • Arc — A flat theme with a modern look and transparent elements.
https://github.com/horst3180/arc-theme || gtk-theme-arcAUR
  • Blackbird — Dark Desktop Suite for Xfce.
https://github.com/shimmerproject/Blackbird || xfce-theme-blackbirdAUR
  • Flat-Plat — A Material Design-like flat theme for GTK3, GTK2, and GNOME-Shell.
https://github.com/nana-4/Flat-Plat || flatplat-theme-gitAUR
  • Gnome-breeze — A GTK theme created to match with the new Plasma 5 Breeze.
https://github.com/dirruk1/gnome-breeze || gnome-breeze-gitAUR
  • Greybird — A grey and blue Xfce theme, used by default in Xubuntu 12.04.
https://github.com/shimmerproject/Greybird || xfce-theme-greybirdAUR
  • Vertex — Theme for GTK 3, GTK 2, Gnome-Shell and Cinnamon.
https://github.com/horst3180/vertex-theme || vertex-themesAUR
  • Zuki — Themes for GTK, gnome-shell and more.
https://github.com/lassekongo83/zuki-themes || zuki-themes-gitAUR

Only GTK+ 2 is supported:

  • GTK+ Engines — Theme engines for GTK+ 2. Includes: Clearlooks, Crux, Industrial, Mist, Redmond, ThinIce
https://github.com/GNOME/gtk-engines || gtk-engines
  • Xfce Gtk+ Engine — Xfce Gtk+-2.0 engine and themes
http://git.xfce.org/xfce/gtk-xfce-engine/ || gtk-xfce-engine
  • Oxygen-Gtk — Port of the default KDE widget theme (Oxygen) to GTK2
https://projects.kde.org/projects/playground/artwork/oxygen-gtk/ || oxygen-gtk2
  • Aurora Gtk Engine — Latest member of the Clearlooks family.
http://gnome-look.org/content/show.php/Aurora+Gtk+Engine?content=56438 || gtk-engine-aurora
  • Openbox Themes — Various themes for the Openbox window manager.
https://www.debian.org/ || openbox-themes
  • QtCurve — A configurable set of widget styles for KDE and Gtk.
https://projects.kde.org/projects/playground/base/qtcurve || qtcurve-gtk2

There are a number of additional GTK+ themes in the AUR: search for gtk-theme, search for gtk2-theme.

Note: Because GTK+ 3 changes rapidly, GTK+ 3 themes often require re-working after a GTK+ 3 release. For this reason, not all GTK+ 3 themes may look as intended when used with the latest GTK+ 3 version.

GTK+ and Qt

If you have GTK+ and Qt (KDE) applications on your desktop then you know that their looks do not blend well. If you wish to make your GTK+ styles match your Qt styles please read Uniform look for Qt and GTK applications.

Configuration tools

Most major desktop environments provide tools to configure the GTK+ theme, icons, font and font size, and manage these settings via XSettings:

  • If you use Cinnamon, use Themes tool (cinnamon-settings themes): go to System Settings > Themes.
  • If you use Enlightenment: go to Settings > All > Look > Application Theme.
  • If you use GNOME, use GNOME Tweak Tool (gnome-tweak-tool): install gnome-tweak-tool.
  • If you use MATE, use the Appearance Preferences tool (mate-appearance-properties): go to System > Settings > Appearance.
  • If you use Xfce, use the Appearance tool: go to Settings > Appearance.

Other GUI tools generally overwrite the configuration files.

Both GTK+ 2 and GTK+ 3 are supported:

  • KDE GTK Configurator — Application that allows you to change style and font of GTK+ 2 and Gtk+ 3 applications.
https://projects.kde.org/kde-gtk-config || kde-gtk-config
After installation, kde-gtk-config can also be found in System Settings > Application Style > GTK.
  • LXAppearance — Desktop independent GTK+ 2 and GTK+ 3 style configuration tool from the LXDE project (it does not require other parts of the LXDE desktop).
http://wiki.lxde.org/en/LXAppearance || lxappearance
  • Oo-mox — Graphical application for generating different color variations of Numix theme (GTK2, GTK3) and gnome-colors icon theme.
https://github.com/actionless/oomox || oomoxAUR

Only GTK+ 2 is supported:

  • GTK+ Change Theme — Little program that lets you change your GTK+ 2.0 theme (considered a better alternative to switch2).
http://plasmasturm.org/code/gtk-chtheme/ || gtk-chtheme
  • GTK+ Preference Tool — GTK+ theme selector and font switcher.
http://gtk-win.sourceforge.net/home/index.php/Main/GTKPreferenceTool || gtk2_prefs
  • GTK+ Theme Switch — Simple GTK+ theme switcher.
http://muhri.net/nav.php3?node=gts || gtk-theme-switch2

Configuration

GTK+ settings can be specified manually in configuration files, but desktop environments and applications can override these settings. Depending on GTK+ version, these files are located at:

  • GTK+ 2 user specific: ~/.gtkrc-2.0
  • GTK+ 2 system wide: /etc/gtk-2.0/gtkrc
  • GTK+ 3 user specific: $XDG_CONFIG_HOME/gtk-3.0/settings.ini, or $HOME/.config/gtk-3.0/settings.ini if $XDG_CONFIG_HOME is not set
  • GTK+ 3 system wide: /etc/gtk-3.0/settings.ini
Note:
  • See the GTK+ 3 GtkSettings properties (and GTK+ 2 properties) in the GTK+ programming reference manual for the full list of currently supported GTK+ configuration options.
  • Some of the settings described below (such as gtk-icon-sizes) are deprecated and ignored since GTK+ 3.10.
  • If you edit your GTK+ configuration files, only newly started applications will display the changes.

Basic theme configuration

To manually change the GTK+ theme, icons, font and font size, add the following to the configuration files, for example:

GTK+ 2:

~/.gtkrc-2.0
gtk-icon-theme-name = "Adwaita"
gtk-theme-name = "Adwaita"
gtk-font-name = "DejaVu Sans 11"

GTK+ 3:

$XDG_CONFIG_HOME/gtk-3.0/settings.ini
[Settings]
gtk-icon-theme-name = Adwaita
gtk-theme-name = Adwaita
gtk-font-name = DejaVu Sans 11
Note: The icon theme name is the name defined in the theme's index file, not the name of its directory.

Dark theme variant

Some GTK+ 3 theme contain a dark theme variant, but it's only used by default, when the application request it explicitly. To use dark theme variant with all GTK+ 3 applications, set:

gtk-application-prefer-dark-theme = true

Keyboard shortcuts

Keyboard shortcuts (otherwise known as accelerators in GTK+) may be changed by hovering the mouse over the respective menu item, and pressing the desired key combination. To enable this feature, set:

gtk-can-change-accels = 1

Emacs keybindings

To get Emacs-like keybindings in gtk apps:

For GTK2, add gtk-key-theme-name = "Emacs" to ~/.gtkrc-2.0.

For GTK3 add the following to the noted file:

~/.config/gtk-3.0/settings.ini
[Settings]
gtk-key-theme-name = Emacs

Then run:

$ gsettings set org.gnome.desktop.interface gtk-key-theme "Emacs"

XFCE has a similar setting:

$ xfconf-query -c xsettings -p /Gtk/KeyThemeName -s Emacs

The config files in /usr/share/themes/Emacs/ determine what the Emacs bindings are, and can be changed. Copying sections to the users ~/.gtkrc-2.0 file allows for changes on a per user basis.

GNOME menu delay

This setting controls the delay between pointing the mouse at a menu and that menu opening. This delay is measured in milliseconds.

gtk-menu-popup-delay = 0

Reduce widget sizes

If you have a small screen or you just do not like big icons and widgets, you can resize things easily.

To have icons without text in toolbars (valid values), use

gtk-toolbar-style = GTK_TOOLBAR_ICONS

To use smaller icons, use a line like this:

gtk-icon-sizes = "panel-menu=16,16:panel=16,16:gtk-menu=16,16:gtk-large-toolbar=16,16\
:gtk-small-toolbar=16,16:gtk-button=16,16"

Or to remove icons from buttons completely:

gtk-button-images = 0

You can also remove icons from menus:

gtk-menu-images = 0

See also [1] and [2].

File-Chooser Startup-Location

Open the file-chooser within the current-working-directory and not the recent location. Normally the current-working-directory is home-directory.

GTK+ 3

Modify DConf with gsettings, as the database file ($XDG_CONFIG_HOME/dconf/users) is binary:

$ gsettings set org.gtk.Settings.FileChooser startup-mode cwd

GTK+ 2

Modify ~/.config/gtk-2.0/gtkfilechooser.ini configuration file:

~/.config/gtk-2.0/gtkfilechooser.ini
StartupMode=cwd

Legacy scrolling behavior

Note: This setting is not obeyed by all GTK+ applications.
Tip: Legacy scrolling behaviour can be achieved reliably simply by using right click instead of left click.

Prior to GTK+ 3.6, clicking on either side of the slider in the scrollbar would move the scrollbar in the direction of the click by approximately one page. Since GTK+ 3.6, the slider will move directly to the position of the click. This behaviour can be reverted in some applications by creating the file with the content below:

~/.config/gtk-3.0/settings.ini
[Settings]
gtk-primary-button-warps-slider = false

Disable overlay scrollbars

Since GTK+ 3.15, overlay scrollbars are enabled by default, meaning that scrollbars will be shown only on mouseover in GTK+ 3 applications. This behavior can be reverted by setting the following environment variable: GTK_OVERLAY_SCROLLING=0.

See Environment variables#Graphical applications.

Remove overlay scroll indicators

The positions of the overlay scrollbars are indicated by thin dashed lines in the application window. These dashed lines will be present even when overlay scrolling is disabled using the environment variable discussed in the section above. To remove the indicator lines, create the following file:

~/.config/gtk-3.0/gtk.css
/* Remove dotted lines from GTK+ 3 applications */
undershoot.top, undershoot.right, undershoot.bottom, undershoot.left { background-image: none; }

GDK backends

GDK (the underlying abstraction layer of GTK+) supports multiple backends to display GTK+ applications. The default backend is x11.

Broadway backend

The GDK Broadway backend provides support for displaying GTK+ applications in a web browser, using HTML5 and web sockets. [3]

When using broadwayd, specify the display number to use, prefixed with a colon, similar to X. The default display number is 1.

$ display_number=:5

Start it.

$ broadwayd $display_number 

Port Used on default

port = 8080 + $display_number

Point your browser to http://127.0.0.1:port

To Start apps

$ GDK_BACKEND=broadway BROADWAY_DISPLAY=$display_number <<app>>

Alternatively can set address and port

$ broadwayd --port $port_number --address $address $display_number

Wayland backend

The GDK Wayland backend can be enabled by setting the GDK_BACKEND=wayland environment variable.

Troubleshooting

Different themes between GTK+ 2 and GTK+ 3 applications

In general, if a selected theme has support for both GTK+ 2 and GTK+ 3, the theme will be applied to all GTK+ 2 and GTK+ 3 applications. If a selected theme has support for only GTK+ 2, it will be used for GTK+ 2 applications and the default GTK+ theme will be used for GTK+ 3 applications. If the selected theme has support for only GTK+ 3, it will be used for GTK+ 3 applications and the default GTK+ theme will be used for GTK+ 2 applications. Thus for application theme consistency, it is best to use a theme which has support for both GTK+ 2 and GTK+ 3.

You could find what themes installed on your system have both an GTK+ 2 and GTK+ 3 version by using this command (does not work with names containing spaces):

find $(find ~/.themes /usr/share/themes/ -wholename "*/gtk-3.0" | sed -e "s/^\(.*\)\/gtk-3.0$/\1/") -wholename "*/gtk-2.0" | sed -e "s/.*\/\(.*\)\/gtk-2.0/\1"/

Theme not applied to root applications

As user theme files ($XDG_CONFIG_HOME/gtk-3.0/settings.ini, ~/.gtkrc-2.0) are not read by other accounts, the selected theme will not apply to X applications run as root. Possible solutions include:

  • Create symlinks, e.g
# ln -s /home/[username]/.gtkrc-2.0 /etc/gtk-2.0/gtkrc
# ln -s /home/[username]/.config/gtk-3.0/settings.ini /etc/gtk-3.0/settings.ini
  • Configure system-wide theme files: /etc/gtk-3.0/settings.ini (GTK+ 3) or /etc/gtk-2.0/gtkrc (GTK+ 2)
  • Adjust the theme as root
# gksu lxappearance
  • Use a settings daemon (this is what most desktop environments do). A desktop-agnostic variant using XSettings is available in the AUR under xsettingsd-gitAUR.

Client-side decorations

GTK 3.12 introduced client-side decorations, which move the title-bar away from the window manager. This may present issues such as double title-bars, no title-bar at all or double shadows with compositing enabled.

To remove the shadow and gap around windows (for example in combination with a tiling window manager), create the following file:

~/.config/gtk-3.0/gtk.css
.window-frame, .window-frame:backdrop {
 box-shadow: 0 0 0 black;
 border-style: none;
 margin: 0;
 border-radius: 0;
}

.titlebar {
 border-radius: 0;
}

.window-frame.csd.popup {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13);
}

.header-bar {
  background-image: none;
  background-color: #ededed;
  box-shadow: none;
}
/* You may want to use this if you don't like the double title.
GtkLabel.title {
    opacity: 0;
}*/

To adjust the buttons in the header bar, use the gtk-decoration-layout setting. [4] The below examples removes all buttons:

~/.config/gtk-3.0/settings.ini
gtk-decoration-layout=menu:

cedilla ç/Ç instead of ć/Ć

See [5], and [6] for a workaround using Xcompose (US international layout).

Suppress warning about accessibility bus

If you do not use any Gnome Accessibility features, you may receive warnings like:

WARNING **: Couldn't connect to accessibility bus:

To suppress these warnings, execute programs with NO_AT_BRIDGE=1 or set that as a global environment variable.

Titlebar background color mismatch

If you are using a window manager which uses a window decoration theme that mimics the GTK+ theme background color, you may find that the titlebar color no longer completely matches the application color in some GTK+ 3 applications. As a workaround, create the following file:

~/.config/gtk-3.0/gtk.css
/* Always use background color */
GtkWindow {
    background-color: @theme_bg_color;
}

/* Fix tooltip background override */
.tooltip {
    background-color: rgba(0, 0, 0, 0.8);
}

.tooltip * {
    background-color: transparent;
}

/* Fix Nautilus desktop window background override */
NautilusWindow {
     background-color: transparent; 
}

Wrong focus events with tiling window managers

Note: This disables touchscreen support for GTK3 applications. [7]

Define GDK_CORE_DEVICE_EVENTS=1 to use GTK2 style input, instead of xinput2. [8]

Thumbnail support for GTK+ 2 file dialog

Install gtk2-patched-filechooser-icon-viewAUR to have the option to view files as thumbnails instead of list in the GTK+ file chooser.

Tips and tricks

Enable typeahead search feature of file chooser widget

As of v3.16, the typeahead search feature of file chooser widget (that is, to type the first few letters of a filename to quickly navigate to a file) is intentionally disabled in gtk3 codebase. To re-enable this feature, patching is required. A patched gtk3 package is available in AUR as gtk3-typeaheadAUR, install it if desired.

Examples

GTK+ 2 configuration example:

~/.gtkrc-2.0
# GTK theme
include "/usr/share/themes/Clearlooks/gtk-2.0/gtkrc"

# Font
style "myfont" {
    font_name = "DejaVu Sans 8"
}
widget_class "*" style "myfont"
gtk-font-name = "DejaVu Sans 8"

# Icon theme
gtk-icon-theme-name = "Tango"

# Toolbar style
gtk-toolbar-style = GTK_TOOLBAR_ICONS

GTK+ 3 example of a configuration as converted from GTK+ 2.x to GTK+ 3.x by lxappearance:

$XDG_CONFIG_HOME/gtk-3.0/settings.ini
[Settings] 
gtk-theme-name=TraditionalOk
gtk-icon-theme-name=Fog
gtk-font-name=Luxi Sans 12
gtk-cursor-theme-name=mate
gtk-cursor-theme-size=24
gtk-toolbar-style=GTK_TOOLBAR_BOTH_HORIZ
gtk-toolbar-icon-size=GTK_ICON_SIZE_LARGE_TOOLBAR
gtk-button-images=1
gtk-menu-images=1
gtk-enable-event-sounds=0
gtk-enable-input-feedback-sounds=0
gtk-xft-antialias=1
gtk-xft-hinting=1
gtk-xft-hintstyle=hintslight
gtk-xft-rgba=rgb

See also