Important
Websites should be popular or otherwise commonly known by members of the Catppuccin community; personal or niche sites may not meet the criteria. If you are unsure if a website qualifies, consider creating a discussion before submitting an initial PR.
To create a userstyle, follow the instructions below. If you are unsure how to theme something, see Guide. If you run into any difficulties or have any questions, feel free to join the Catppuccin Discord server and find us in the #userstyles channel!
- Fork the
catppuccin/userstyles
repository. - Create a new branch under the name
feat/<name-of-website>
, (e.g.feat/nixos-search
instead of NixOS Search). - Create a new folder
styles/<name-of-website>
. The name must belower-kebab-case
. - Copy the contents of the
template
folder intostyles/<name-of-website>
.- The template uses LESS, a preprocessor for Stylus. Please do not change this as we will only accept userstyles based on the template.
- Write the userstyle.
- Edit the
userstyles.yml
file and enter the details of your port. - Create your image preview.
- Take a screenshot of the themed website in each flavor, with the accent set to
mauve
(the default), and then convert all four images to WebP (e.g.mocha.webp
,macchiato.webp
,frappe.webp
&latte.webp
). - Use Catwalk to generate a composite or grid image of all the images. This must be saved as
styles/<name-of-website>/preview.webp
.
- Take a screenshot of the themed website in each flavor, with the accent set to
- Raise a pull request, making sure to read and fill out the template properly. The title of your pull request should follow the format of
feat(<port-name>): init
.