Skip to content

catppuccin/userstyles

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Logo
Catppuccin Userstyles

This repository is a curated collection of customized themes designed for various websites and web applications. These themes showcase delightful pastel colors, creating a soothing and visually pleasing experience when browsing the web.

Userstyles are essentially modified CSS files which can be applied to a specific website, giving it a unique and appealing aesthetic in line with Catppuccin's color palette.

ย 

Usage

For both of the below installation methods, you will need the Stylus browser extension installed. Install Stylus for Chrome or Firefox. If you use Chrome, make sure to enable "Allow access to file URLs" in the Chrome extension settings for Stylus (visit chrome://extensions/?id=clngdbkpkpeebahjckkjfobafhncgmne).

Tip

If you use Dark Reader, make sure to disable the extension on websites with Catppuccin userstyles installed to avoid conflicts.

All Userstyles

  1. Download the compiled Stylus export file, containing our recommended Stylus settings and all userstyles preloaded: import.json (download).
    • Alternatively, if you want more control over what is included in the import.json file, e.g. all userstyles with the accent color peach, you can download the Stylus export file from "All Userstyles Import Generator" by @uncenter instead.
  2. Open the Stylus "manage" page.
  3. On the sidebar panel, click the Import button in the Backup section, and select the downloaded file from step 2.
  4. Enjoy!

Individual Userstyles

  1. Enable CSP Patching from Stylus's Settings > Advanced.
  2. Install userstyles from the list below by clicking the Stylus Install badge in each README.
  3. Enjoy!

Configuration

All usertyles come with three default configuration options; the light flavor, the dark flavor, and the accent color. Some userstyles may offer additional site-specific options as well.

Decentralized/self-hosted applications

For decentralized or self-hosted applications, you can apply a theme to one or multiple instances across updates by following the instructions below.

  1. Open the Stylus "Manage" page.
  2. Click on the userstyle's name in the list.
  3. Click on Style settings in the left panel.
  4. Enter the URL patterns for your instance(s) in the text box labeled Custom included sites. For example, to apply a userstyle to example.org, you would add a line with https://example.org/* to the textbox. The trailing asterisk applies it to all pages on the domain - without it, only the root page is themed.

ย 

๐Ÿ‘ Contributing

Note

If you would like to submit a userstyle or learn how to port Catppuccin to a website, please refer to userstyle-creation.md.

See CONTRIBUTING.md.

ย 

๐Ÿ–Œ Userstyles

Important

Userstyles labeled with the "๐Ÿšง" emoji are looking for maintainers, and may not work as intended. Contributions are still welcome and encouraged. If you would like to become a maintainer, follow the instructions outlined in "Adding yourself as a maintainer."

๐Ÿ’ญ Development Tools
๐Ÿงฉ Browser Extensions
๐Ÿ”Ž Search Engines
๐Ÿ—บ๏ธ Translation Tools
๐Ÿง  Wikis
๐Ÿ“ธ Photo & Video
๐ŸŽต Music
๐Ÿ“– Productivity
๐Ÿ’Œ Email Clients
๐Ÿ•น๏ธ Game Development
๐ŸŽ“ Education
โœจ Social Networking
๐Ÿ—ฃ๏ธ Discussion Forums
๐ŸŒˆ Entertainment
๐ŸŽฎ Games
๐Ÿค– Artificial Intelligence

ย 

Copyright ยฉ 2021-present Catppuccin Org