docs: Rename GTK+ to GTK
The upstream dropped the '+' sign from GTK.
See https://gitlab.gnome.org/GNOME/gtk/issues/1439
By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.
The upstream dropped the '+' sign from GTK.
See https://gitlab.gnome.org/GNOME/gtk/issues/1439
roundabout,
created on Tuesday, 26 February 2019, 01:03:26 (1551143006),
received on Sunday, 11 May 2025, 13:22:33 (1746969753)
Author identity: nana-4 <hnmaigo@gmail.com>
b4cbde2bb1c3cf72e36b316b8a7cfd50cc7560d7
| `_variables.scss` | Variables to allow easier definition of widget sizing/styling. |
| `_color-palette.scss` | Material Design color palette definitions. We don't recommend editing this unless Google updates the color scheme. |
| `_colors.scss` | Global color definitions. We keep the number of defined colors to a necessary minimum. It covers both the light variant and the dark variant. |
| `_colors-public.scss` | SCSS colors exported through gtk to allow for 3rd party apps color mixing. |
| `_colors-public.scss` | SCSS colors exported through GTK to allow for 3rd party apps color mixing. |
| `_drawing<-version>.scss` | Drawing helper mixings/functions to allow easier definition of widget drawing under specific context. |
| `_common<-version>.scss` | Actual definitions of style for each widget. This is where you are likely to add/remove your changes. |
| `_apps<-version>.scss` <br> `_extensions.scss` | App/extension specific stylings. |
### Upstream theme sources
- [GTK+ 4.0](https://gitlab.gnome.org/GNOME/gtk/tree/master/gtk/theme/Adwaita) (master)
- [GTK+ 3](https://gitlab.gnome.org/GNOME/gtk/tree/gtk-3-24/gtk/theme/Adwaita) (3.24)
- [GTK+ 2](https://gitlab.gnome.org/GNOME/gnome-themes-extra/tree/master/themes/Adwaita/gtk-2.0)
- [GTK 4.0](https://gitlab.gnome.org/GNOME/gtk/tree/master/gtk/theme/Adwaita) (master)
- [GTK 3](https://gitlab.gnome.org/GNOME/gtk/tree/gtk-3-24/gtk/theme/Adwaita) (3.24)
- [GTK 2](https://gitlab.gnome.org/GNOME/gnome-themes-extra/tree/master/themes/Adwaita/gtk-2.0)
- [GNOME Shell](https://gitlab.gnome.org/GNOME/gnome-shell/tree/master/data/theme)
- [Sass sources](https://gitlab.gnome.org/GNOME/gnome-shell-sass) (legacy)
- [Metacity](https://gitlab.gnome.org/GNOME/gnome-themes-extra/tree/gnome-3-14/themes/Adwaita/metacity-1) (legacy)
- [Material Design Guidelines](https://www.material.io/guidelines/)
- [CSS Guidelines for Materia](https://github.com/nana-4/materia-theme/wiki/CSS-Guidelines)
- [The GTK+ Inspector](https://blog.gtk.org/2017/04/05/the-gtk-inspector/)
- [Theming in GTK+ 4](https://developer.gnome.org/gtk4/stable/theming.html)
- [Theming in GTK+ 3](https://developer.gnome.org/gtk3/stable/theming.html)
- [GTK+ 2 Theming Tutorial](https://wiki.gnome.org/Attic/GnomeArt/Tutorials/GtkThemes)
- [The GTK Inspector](https://blog.gtk.org/2017/04/05/the-gtk-inspector/)
- [Theming in GTK 4](https://developer.gnome.org/gtk4/stable/theming.html)
- [Theming in GTK 3](https://developer.gnome.org/gtk3/stable/theming.html)
- [GTK 2 Theming Tutorial](https://wiki.gnome.org/Attic/GnomeArt/Tutorials/GtkThemes)
- [The Pixmap Engine](https://wiki.gnome.org/Attic/GnomeArt/Tutorials/GtkEngines/PixmapEngine)
- [Designing Metacity Themes](https://wiki.gnome.org/Attic/GnomeArt/Tutorials/MetacityThemes)
- [Unity/Theming](https://wiki.ubuntu.com/Unity/Theming)
# Materia
Materia is a [Material Design](https://material.io) theme for GNOME/GTK+ based desktop environments.
Materia is a [Material Design](https://material.io) theme for GNOME/GTK based desktop environments.
It supports GTK+ 3, GTK+ 2, GNOME Shell, Budgie, Cinnamon, MATE, Unity, Xfce, LightDM, GDM, Chrome theme, etc.
It supports GTK 2, GTK 3, GNOME Shell, Budgie, Cinnamon, MATE, Unity, Xfce, LightDM, GDM, Chrome theme, etc.
## Preview
## Features
**Ripple effect** animations for GTK+ 3 are supported:
**Ripple effect** animations for GTK 3 are supported:

## Requirements
- GTK+ `>=3.20`
- GTK `>=3.20`
- `gnome-themes-extra` (or `gnome-themes-standard`)
- Murrine engine — The package name depends on the distro.
- `gtk-engine-murrine` on Arch Linux
## Supports
- GTK+ 4
- GTK 4
- [Firefox theme](../../issues/78)
- ~waiting for the upstream to provide [next-gen themes](https://blog.mozilla.org/addons/2017/02/24/improving-themes-in-firefox/)~
- Or, is it unnecessary because the new Quantum UI looks well-integrated with Materia?
SIZE_VARIANTS="$SIZE_VARIANTS" COLOR_VARIANTS="$COLOR_VARIANTS" THEME_DIR_BASE="$DEST_PATH" ./parse-sass.sh
# NOTE we use the functions we already have in render-assets.sh
echo "== Rendering GTK+2 assets..."
echo "== Rendering GTK 2 assets..."
if [[ "$MATERIA_COLOR_VARIANT" != "dark" ]]; then
GTK2_HIDPI="$OPTION_GTK2_HIDPI" ./render-assets.sh gtk2-light
else
GTK2_HIDPI="$OPTION_GTK2_HIDPI" ./render-assets.sh gtk2-dark
fi
echo "== Rendering GTK+3 assets..."
echo "== Rendering GTK 3 assets..."
./render-assets.sh gtk
./install.sh --dest "$HOME/.themes" --name "${OUTPUT_THEME_NAME/\//-}" --color "$COLOR_VARIANT" --size "$SIZE_VARIANT"
sudo cp -av /usr/share/gnome-shell/theme/Yaru/gnome-shell.css{,~}
```
2. Select a **GTK+** theme to decide which variant to install.
2. Select a **GTK** theme to decide which variant to install.
3. Replace the default theme file(s):
```sh
# Based on Bridge by ScionicSpectre and Adwaita by GNOME
# vim:set ts=2 sw=2 sts=2 ai et:
#
# This is the GTK+ 2 version of Materia. It's whole purpose is to look as the
# GTK+ 3 version as much as possible until GTK+ 2 dies completely.
# This is the GTK 2 version of Materia. It's whole purpose is to look as the
# GTK 3 version as much as possible until GTK 2 dies completely.
#
# Note: comments for explaining styles are on the bottom of each file beside the
# widget matches.
# Based on Bridge by ScionicSpectre and Adwaita by GNOME
# vim:set ts=2 sw=2 sts=2 ai et:
#
# This is the GTK+ 2 version of Materia. It's whole purpose is to look as the
# GTK+ 3 version as much as possible until GTK+ 2 dies completely.
# This is the GTK 2 version of Materia. It's whole purpose is to look as the
# GTK 3 version as much as possible until GTK 2 dies completely.
#
# Note: comments for explaining styles are on the bottom of each file beside the
# widget matches.
# Based on Bridge by ScionicSpectre and Adwaita by GNOME
# vim:set ts=2 sw=2 sts=2 ai et:
#
# This is the GTK+ 2 version of Materia. It's whole purpose is to look as the
# GTK+ 3 version as much as possible until GTK+ 2 dies completely.
# This is the GTK 2 version of Materia. It's whole purpose is to look as the
# GTK 3 version as much as possible until GTK 2 dies completely.
#
# Note: comments for explaining styles are on the bottom of each file beside the
# widget matches.
# vim:set ft=gtkrc ts=2 sw=2 sts=2 ai et:
#
# This file contains horrible hacks to make this theme work with some programs
# This is mostly due to the limitations of gtk2 but sometimes its the fault of
# This is mostly due to the limitations of GTK 2 but sometimes its the fault of
# the programs themselves. Not going to point fingers.
#
# Either way, it's a WONTFIX for both, hence this horrible file.
class "SexySpellEntry" style:highest "normal_entry"
# Chromium uses base as the fill colour of its own entries
# This would be fine but Gtk+ uses it to fill the surrounding space, so its set to bg
# This would be fine but GTK uses it to fill the surrounding space, so its set to bg
# That results in Chromium using it for the fill, so we need to handle that
widget_class "*Chrom*<GtkEntry>" style "chrome_entry"
# vim:set ft=gtkrc ts=2 sw=2 sts=2 ai et:
#
# This is the main theme file, handling all the default widgets and theme
# properties. Since GTK+ 2 is old, we need to overcome some of its limitations,
# properties. Since GTK 2 is old, we need to overcome some of its limitations,
# which is also mostly done in this file. Sadly not all of them can be overcome
# so there will always be a visible difference between the GTK+ 2 and 3 theme.
# so there will always be a visible difference between the GTK 2 and 3 theme.
style "default" {
xthickness = 1
# vim:set ft=gtkrc ts=2 sw=2 sts=2 ai et:
#
# This is the main theme file, handling all the default widgets and theme
# properties. Since GTK+ 2 is old, we need to overcome some of its limitations,
# properties. Since GTK 2 is old, we need to overcome some of its limitations,
# which is also mostly done in this file. Sadly not all of them can be overcome
# so there will always be a visible difference between the GTK+ 2 and 3 theme.
# so there will always be a visible difference between the GTK 2 and 3 theme.
style "default" {
xthickness = 2