# Summer Of Making Catppuccin

[![Hackatime badge](https://hackatime-badge.hackclub.com/U0822JX63S9/summer-of-making-catppuccin?logo=wakatime)](https://hackatime.hackclub.com)
[![Part of Hack Club's Summer of Making program](https://raw.githubusercontent.com/ascpixi-test-org/test/refs/heads/main/summer-of-making-shield.svg)](https://summer.hack.club/op)

[![Install the theme with Stylus](https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f)](https://raw.githubusercontent.com/GGORG0/summer-of-making-catppuccin/refs/heads/master/som.user.less)

A [Catppuccin](https://catppuccin.com/) theme for the [Summer of Making](https://summer.hackclub.com/) dashboard!

## Usage

1. Install the [Stylus](https://github.com/openstyles/stylus) extension for [Chrome (or Chromium-based browsers)](https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) or [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/).

   **Note:** 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`).

2. Go into the Stylus settings (by clicking the Stylus icon in your browser toolbar, and then the cogwheel icon), and then enable `Patch CSP to allow style assets` in the `Advanced` section.
3. Click the [![Install the theme with Stylus](https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f)](https://raw.githubusercontent.com/GGORG0/summer-of-making-catppuccin/refs/heads/master/som.user.less) button, and confirm it by clicking `Install style` in the top left corner of the page that opens.
4. If you use [Dark Reader](https://darkreader.org/) or any similar dark mode extension, make sure to disable it for the Summer Of Making site.

For more information, see the [Catppuccin userstyles documentation](https://userstyles.catppuccin.com/USAGE.html).

## Screenshots

![Campfire](./screenshots/campfire/preview.webp)

![Profile](./screenshots/profile/preview.webp)

![Project](./screenshots/project/preview.webp)

![Shop](./screenshots/shop/preview.webp)

![Voting](./screenshots/voting/preview.webp)