Skip to content

Latest commit

 

History

History
56 lines (42 loc) · 2.87 KB

userstyle-creation.md

File metadata and controls

56 lines (42 loc) · 2.87 KB
Raw

🎨 Userstyle Creation

Guidelines for requesting and creating userstyles.

 

Table of Contents

Requesting userstyles

To request a website to be themed, please create a Port Request discussion on catppuccin/catppuccin. While this may seem odd, this ensures to keep all of our requests in one place and makes it easier for all people to request what they want without needing to learn what "Stylus" exactly is.

If you have already created a userstyle, please raise a Pull Request!

 

Creating userstyles

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 run into any difficulties or have any questions, please check our Tips and tricks page first.

  1. Fork this repository.
  2. Create a new branch under the name feat/<name-of-website>, (e.g. feat/nixos-search instead of NixOS Search).
  3. Create a new folder styles/<name-of-website>. The name must be lower-kebab-case.
  4. Copy the contents of the template folder into styles/<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.
  5. Write the userstyle.
  6. Edit the userstyles.yml file and put in the details of your port. More details given in userstylesyml.md.
  7. 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.
  8. 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.