Coder Social home page Coder Social logo

catppuccin-gtk's Introduction

Logo
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)
  • Murrine engine

Installation

  1. Download and extract the theme zip from releases or you can install the theme from the AUR.
  2. Move the theme folder to ".themes" in your home directory. (~/.themes) (Skip this step if you are using the AUR package)
  3. 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

The catppuccin-gtk package in Nixpkgs allows you to specify the accents, size, tweaks and variant (flavour) of the theme by overriding the package.

By default, the variant is frappe, the accent is blue, the size is standard, and no tweaks are enabled. To change them, override the package. A list of valid choices are available in the package definition here.

Example:

pkgs.catppuccin-gtk.override {
  accents = [ "pink" ]; # You can specify multiple accents here to output multiple themes 
  size = "compact";
  tweaks = [ "rimless" "black" ]; # You can also specify multiple tweaks here
  variant = "macchiato";
}

To use it in home-manager:

# home.nix
{
  pkgs,
  ...
}: {
  gtk = {
    enable = true;
    theme = {
      name = "Catppuccin-Macchiato-Compact-Pink-Dark";
      package = pkgs.catppuccin-gtk.override {
        accents = [ "pink" ];
        size = "compact";
        tweaks = [ "rimless" "black" ];
        variant = "macchiato";
      };
    };
  };
}

For gtk-4.0 users

To theme gtk-4.0 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

  1. To give your Flatpaks access to your themes folder run:
sudo flatpak override --filesystem=$HOME/.themes
  1. 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##
  1. For a more in depth tutorial see Hamza Algohary's tutorial on It's Foss

Using the script

Note: Ensure that you have atleast python version 3.10 installed

Clone the repository using

git clone --recurse-submodules [email protected]:catppuccin/gtk.git
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 - for working on the build and CI script

Previous maintainer(s)

ย 

Copyright ยฉ 2021-present Catppuccin Org

catppuccin-gtk's People

Contributors

pocco81 avatar npv12 avatar sadrach-cl avatar ghostx31 avatar kcoderhtml avatar rubyowo avatar isabelincorp avatar dixslyf avatar sakkke avatar griimick avatar bronsen avatar nekowinston avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.