GTK+
Related |
---|
GNU Project |
GNOME |
QT |
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 GIMP, but it 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.
Contents
- 1 Installation
- 2 Themes
- 3 Configuration tools
- 4 Configuration
- 5 GDK backends
- 6 Troubleshooting
- 6.1 Different themes between GTK+ 2 and GTK+ 3 applications
- 6.2 Theme not applied to root applications
- 6.3 Client-side decorations
- 6.4 Cedilla ç/Ç instead of ć/Ć
- 6.5 Suppress warning about accessibility bus
- 6.6 Titlebar background color mismatch
- 6.7 Wrong focus events with tiling window managers
- 6.8 GTK+ 3 without polkit
- 6.9 Some GTK+ 2 themes only change the UI color palette
- 7 See also
- 8 Acknowledgement
1 Installation
Three versions of GTK+ are currently available in the repositories. They can be installed with the following packages:
- GTK+ 4.x is available with the gtk4 package.
- GTK+ 3.x is available with the gtk3 package.
- GTK+ 2.x is available with the gtk2 package.
2 Themes
In GTK+ 2, the default theme is Raleigh(in ArchLinux Adawaita). In GTK+ 3, the default theme is Adwaita, but HighContrast, HighContrastInverse and Raleigh themes are also included.
To force a specific theme, set the following environment variables:
- For GTK+ 2, use GTK2_RC_FILES. For example to launch GIMP with the theme Raleigh:
$ GTK2_RC_FILES=/usr/share/themes/Raleigh/gtk-2.0/gtkrc gimp
- For GTK+ 3, use GTK_THEME. For example to launch GNOME Calculator with the dark variant of Adwaita:
$ GTK_THEME=Adwaita:dark gnome-calculator
2.1 List of themes
More themes can be installed from the official repositories. Manually extracted themes go in ~/.themes/ or ~/.local/share/themes/ directory.
GTK+ 2 and GTK+ 3.20 or newer are supported:
- Adapta — An adaptive Gtk+ theme based on Material Design Guidelines. Includes: Adapta, Adapta-Eta, Adapta-Nokto, Adapta-Nokto-Eta
- Arc — A flat theme with a modern look and transparent elements. Includes: Arc, Arc-Dark, Arc-Darker
- https://github.com/nicohood/arc-theme || with transparency: arc-gtk-theme, without transparency: arc-solid-gtk-theme || GPLv3
- Breeze-gtk — GTK+ version of KDE's default widget theme. Includes: Breeze, Breeze-Dark
- Deepin — Default theme for the Deepin desktop. Includes: deepin, deepin-dark
- GNOME Extra Themes — Extra themes for the GNOME desktop. Includes: Adwaita, Adwaita-dark, HighContrast
- Materia — A Material Design-like flat theme for GTK3, GTK2, and GNOME-Shell.
- MATE Themes — Default themes for the MATE desktop. Includes: BlackMATE, Blue-Submarine, BlueMenta, ContrastHighInverse, Green-Submarine, GreenLaguna, Menta, TraditionalGreen, TraditionalOk
- Numix — A flat and light theme with a modern look (GNOME, Openbox, Unity, Xfce). Includes: Numix
2.2 GTK+ and Qt
If you have GTK+ and Qt (KDE toolkit) 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 a:Uniform look for Qt and GTK applications.
3 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 Tweaks (gnome-tweaks): install gnome-tweaks.
- 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://cgit.kde.org/kde-gtk-config.git || kde-gtk-config || GPLv2
- After installation, kde-gtk-config can also be found in System Settings > Application Style > GNOME/GTK Application Style.
- 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).
- Oo-mox — Graphical application for generating different color variations of Numix and Flat-Plat themes (GTK+ 2 and 3), Archdroid and Gnome-Colors icon themes. Also allows generating pre-scaled GTK+ 2 themes for HiDPI displays.
4 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
- 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.
4.1 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
4.2 Dark theme variant
Some GTK+ 3 themes contain a dark theme variant, but it's only used by default when the application requests it explicitly. To use dark theme variant with all GTK+ 3 applications, set:
gtk-application-prefer-dark-theme = true
4.3 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
4.3.1 Emacs key bindings
To have Emacs-like key bindings in GTK+ applications add the following:
~/.gtkrc-2.0
gtk-key-theme-name = "Emacs"
~/.config/gtk-3.0/settings.ini
[Settings] gtk-key-theme-name = Emacs
For GTK+ 3 also 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.
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
4.5 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 How to make a compact gnome theme.
4.6 Hide CSD buttons
To remove the minimize and maximize buttons from GTK+ 3 windows:
gtk-decoration-layout=menu:close
4.7 Disable mouse paste
To turn off pasting on middle mouse button click:
gtk-enable-primary-paste=false
4.8 File-chooser start-up location
Open the file-chooser within the current working directory and not the recent location. Normally the current working directory is the Home directory.
GTK+ 3
Change setting with the following command:
$ gsettings set org.gtk.Settings.FileChooser startup-mode cwd
GTK+ 2
Add the following to ~/.config/gtk-2.0/gtkfilechooser.ini:
StartupMode=cwd
4.9 Legacy scrolling behavior
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 behavior 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
4.10 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 a:Environment_variables#Graphical_environment.
GTK+ 4 will no longer support GTK_OVERLAY_SCROLLING. It has already been dropped from master. As of GTK+ 4, the overlay nature of the scrollbars is part of the toolkit. The blanket toggle has been removed to prevent developers from breaking applications that haven't been tested with both combinations. To allow application developers to decide what their applications should look like, the toolkit instead provides a mechanism to opt-out or add a setting for users. The function gtk_scrolled_window_set_overlay_scrolling() can be used to enable/disable overlay scrolling on a per-application basis. Application developers can optionally use GSettings to have a user setting bound to the property.
4.10.1 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; }
4.11 Examples
GTK+ example configurations:
~/.gtkrc-2.0
gtk-theme-name="Arc-Dark" gtk-icon-theme-name="breeze-dark" gtk-font-name="Sans 11" gtk-cursor-theme-name="Breeze_Amber" gtk-cursor-theme-size=0 gtk-toolbar-style=GTK_TOOLBAR_BOTH_HORIZ gtk-toolbar-icon-size=GTK_ICON_SIZE_SMALL_TOOLBAR gtk-button-images=0 gtk-menu-images=0 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"
~/.config/gtk-3.0/settings.ini
[Settings] gtk-theme-name=Arc-Dark gtk-icon-theme-name=breeze-dark gtk-font-name=Sans 11 gtk-cursor-theme-name=Breeze_Amber gtk-cursor-theme-size=0 gtk-toolbar-style=GTK_TOOLBAR_BOTH_HORIZ gtk-toolbar-icon-size=GTK_ICON_SIZE_SMALL_TOOLBAR gtk-button-images=0 gtk-menu-images=0 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 # gtk-decoration-layout=menu:close # gtk-application-prefer-dark-theme=1
5 GDK backends
GDK (the underlying abstraction layer of GTK+) supports multiple backends to display GTK+ applications. The default backend is X11.
5.1 Broadway backend
The GDK Broadway backend provides support for displaying GTK+ applications in a web browser, using HTML5 and web sockets.
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
5.2 Wayland backend
The GDK Wayland backend can be enabled by setting the GDK_BACKEND=wayland environment variable.
6 Troubleshooting
6.1 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"/
6.2 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
# sudo lxappearance
- Use a settings daemon (this is what most desktop environments do). A desktop-agnostic variant using XSettings is available in the repositories under xsettingsd.
6.3 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.
The below example removes all buttons:
~/.config/gtk-3.0/settings.ini
gtk-decoration-layout=menu:
6.4 Cedilla ç/Ç instead of ć/Ć
See [1], and [2] for a workaround using Xcompose (US international layout).
6.5 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.
6.6 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; }
6.7 Wrong focus events with tiling window managers
Define GDK_CORE_DEVICE_EVENTS=1 to use GTK2 style input, instead of xinput2. [4]
6.8 GTK+ 3 without polkit
GTK+ 3 depends on polkit through colord, which is required for printing. However printing works fine without polkit installed; at least with a monochrome printer and package versions gtk3-print-backends=3.22.19-2 and colord=1.4.1-1.
6.9 Some GTK+ 2 themes only change the UI color palette
Depending on the theme of choice's support for GTK+ 2, UI controls may still have the default Raleigh appearance, possibly with a different color palette. This is due to these themes requiring the GTK+ 2 Murrine engine, which is missing (GTK+ 2 programs should complain about it on their standard error output). Install the gtk-engine-murrine package.