Catppuccin for GTK

About

This GTK theme is based on the Colloid theme made by Vinceliuice

Usage

Requirements

GTK >=3.20
gnome-themes-extra (or gnome-themes-standard)

Installation

Download and extract the theme zip from releases.
Move the theme folder to ".themes" in your home directory. (~/.themes) (Skip this step if you are using the AUR package)
Select the downloaded theme via your desktop specific tweaks application (gnome-tweaks on Gnome 3+).

For Arch Linux users

We have 4 AUR packages for all the 4 flavours of the theme:

With your favourite AUR helper, install them:

yay -S catppuccin-gtk-theme-mocha catppuccin-gtk-theme-macchiato catppuccin-gtk-theme-frappe catppuccin-gtk-theme-latte

For Nix users

We suggest you use catppuccin/nix. Alternatively, you can use catppuccin-gtk from nixpkgs.

{inputs, ...}: {
  imports = [inputs.catppuccin.homeManagerModules.catppuccin];

  gtk = {
    enable = true;
    catppuccin = {
      enable = true;
      flavor = "mocha";
      accent = "pink";
      size = "standard";
      tweaks = [ "normal" ];
    };
  };
}

Tip

For further information on the options available, see the full documentation.

For GTK 4 users

To theme GTK 4 applications you have to manually symlink the ~/.config/gtk-4.0/ to the themes folder. Use the following commands

mkdir -p "${HOME}/.config/gtk-4.0"
ln -sf "${THEME_DIR}/gtk-4.0/assets" "${HOME}/.config/gtk-4.0/assets"
ln -sf "${THEME_DIR}/gtk-4.0/gtk.css" "${HOME}/.config/gtk-4.0/gtk.css"
ln -sf "${THEME_DIR}/gtk-4.0/gtk-dark.css" "${HOME}/.config/gtk-4.0/gtk-dark.css"

For Flatpak users

To give your Flatpaks access to your themes folder run:

sudo flatpak override --filesystem=$HOME/.themes

To set the theme for all Flatpaks, replace ##theme## with the name of the theme you want to use and run this command:

sudo flatpak override --env=GTK_THEME=##theme##

For a more in depth tutorial see Hamza Algohary's tutorial on It's FOSS

Handling GTK theme installation from window manager

Install unzip and curl.
Go to your window manager config file.

Add an entrance to the config file to be executed when your window manager is loaded.

i3/sway example:

# catppuccin
set $ctp-version v0.6.1
exec_always if [ ! -e ~/.themes/Catppuccin-Frappe-Standard-Lavender-dark ]; then \
  mkdir -p ~/.themes \
  && curl -L https://github.com/catppuccin/gtk/releases/download/$ctp-version/Catppuccin-Frappe-Standard-Lavender-dark.zip -o ~/.themes/catppuccin.zip \
  && unzip ~/.themes/catppuccin.zip -d ~/.themes/ \
  && rm -rf ~/.themes/catppuccin.zip; fi

Note: The previous example execute that script every time i3/sway is reloaded.

Set the GTK_THEME environment variable:

export GTK_THEME='Catppuccin-Frappe-Standard-Lavender-dark:dark'

Note

in order to update the theme's version, just change the variable $ctp-version.

GDM Theme

Warning

Applying a custom theme to GDM is not recommended as it is not themeable, however you can do it through certain hacks.

To apply the theme to GDM, A new gnome-shell-theme.gresource.xml needs to be complied. To achieve this, you can run the following:

# Backup the current gresource file.
sudo cp -av /usr/share/gnome-shell/gnome-shell-theme.gresource{,~}
sudo glib-compile-resources --target="/usr/share/gnome-shell/gnome-shell-theme.gresource" --sourcedir="$THEME_DIR" "$THEME_DIR/gnome-shell-theme.gresource.xml"

Make sure to replace $THEME_DIR to where the theme was extracted accordingly.

For nix users, it'll be the nix store path of the package.
For AUR users, it'll be in ~/.themes
Otherwise, it'll be wherever you extracted the theme.

Using the script

Note: Ensure that you have at least Python version 3.10 installed

Set up the installer using

git clone --recurse-submodules git@github.com:catppuccin/gtk.git
cd gtk
virtualenv -p python3 venv  # to be created only once and only if you need a virtual env
source venv/bin/activate
pip install -r requirements.txt

To check out the install script, run

python install.py --help

Tip: python install.py --help allows the following options:

Compulsory field        Specify color variant(s) [mocha|frappe|macchiato|latte|all]
-d, --dest DIR          Specify destination directory (Default: ~/.themes)
-n, --name NAME         Specify theme name (Default: Colloid)
-a, --accent VARIANT... Specify theme color variant(s) [rosewater|flamingo|pink|mauve|red|maroon|peach|yellow|green|teal|sky|
                        sapphire|blue|lavender|all] (Default: blue)
-s, --size VARIANT...   Specify size variant [standard|compact] (Default: standard variant)
-l, --link              Link installed gtk-4.0 theme to config folder for all libadwaita app use this theme
--zip                   Zips up the finally produced themes.
--tweaks                Specify versions for tweaks [black|rimless|normal|float]
                        1. black:    Blackness color version
                        2. rimless:  Remove the 1px border about windows and menus
                        3. normal:   Normal windows button style (titlebuttons: max/min/close)
                        4. float:    Floating gnome-shell panel style
-h, --help              Show help

You can install any theme like the following example

python install.py mocha -a sky --tweaks rimless -d ~/.themes

You can build all possible variations of the theme possible using the following command and it will install it to releases folder

python install.py all -a all

Development

You need to install the following packages to build the theme. Check with your distribution for the package names in the repository

sassc
inkscape
optipng

A few important notes to keep in mind

recolor.py handles all changes that needs to be done to colloid to ensure it generated catppuccin colors. If vinceliuice changes anything in his theme in future, that is where you must change
var.py includes all different variables that you can tinker around as per your personal requirements.
create_theme.py consists of a wrapper that will recolor the colloid theme, install it as per the args provided and rename it accordingly.

💝 Thanks to

Current maintainers

Contributions

rubyowo - CI and docs
braheezy - Instructions for the GDM theme.

Previous maintainer(s)

sadrach-cl

sakarie9/gtk