feat: launch catppuccin/userstyles

Co-authored-by: rubyowo <perhaps-you-know@what-is.ml> Co-authored-by: Andreas Grafen <andreas@grafen.info> Co-authored-by: winston <hey@winston.sh> Co-authored-by: Carsten Kragelund <carsten@kragelund.me> Co-authored-by: Andreas Grafen <andreas@grafen.info> Co-authored-by: Alaina <68250402+alaidriel@users.noreply.github.com> Co-authored-by: jolheiser <john.olheiser@gmail.com>
2023-02-26 01:56:56 +00:00 · 2023-02-26 01:56:56 +00:00 · 8cfccfd837
commit 8cfccfd837
186 changed files with 16951 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,34 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# EditorConfig is awesome: https://EditorConfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+indent_style = space
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# go
+[*.go]
+indent_style = tab
+indent_size = 4
+
+# python
+[*.{ini,py,py.tpl,rst}]
+indent_size = 4
+
+# rust
+[*.rs]
+indent_size = 4
+
+# documentation, utils
+[*.{md,mdx,diff}]
+trim_trailing_whitespace = false
+
+# windows shell scripts
+[*.{cmd,bat,ps1}]
+end_of_line = crlf
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1,2 @@
+*.webp filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@ -0,0 +1,48 @@
+# THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND.
+# /styles/anilist @AnubisNekhet
+#
+# /styles/brave-search @ndsboy
+#
+# /styles/cinny @jn-sena
+#
+# /styles/codeberg @justTOBBI
+#
+# /styles/deepl @watatomo
+#
+# /styles/elk @ryanccn
+#
+# /styles/github @Pocco81 @GlowingUmbreon
+#
+# /styles/hacker-news @lucasmelin
+#
+# /styles/ichi.moe @watatomo
+#
+# /styles/invidious @nekowinston
+#
+# /styles/lastfm @AnubisNekhet
+#
+# /styles/libreddit @isabelroses
+#
+# /styles/mastodon @isabelroses
+#
+# /styles/modrinth @thismoon
+#
+# /styles/nitter @AnubisNekhet
+#
+# /styles/nixos-search @alaidriel
+#
+# /styles/proton @soya-daizu
+#
+# /styles/reddit @jayylmao
+#
+# /styles/searxng @Sekki21956 @ryanccn
+#
+# /styles/tutanota @ryanccn
+#
+# /styles/twitch @GitMuslim @isabelroses
+#
+# /styles/vercel @ryanccn
+#
+# /styles/wikiwand @tnixc
+#
+# /styles/youtube @isabelroses
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -0,0 +1,11 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Theme Request
+    url: https://github.com/catppuccin/catppuccin/discussions/new?category=port-requests
+    about: Request a website to be themed here!
+  - name: Theme Review
+    url: https://github.com/catppuccin/userstyles/compare
+    about: Already made a theme? Raise a Pull Request here!
+  - name: Community Discord
+    url: https://discord.com/servers/catppuccin-907385605422448742
+    about: Ask questions and chat to other community members!
--- a/.github/ISSUE_TEMPLATE/meta.yml
+++ b/.github/ISSUE_TEMPLATE/meta.yml
@ -0,0 +1,17 @@
+name: Meta Issue
+description: Report your issues with the repository here!
+labels: [meta]
+body:
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue outlining your problem?
+      description: Please search to see if an issue already exists for your problem.
+      options:
+        - label: I have searched the existing issues and they do not solve my problem.
+          required: true
+  - type: textarea
+    attributes:
+      label: Describe your issue.
+      description: "Issues relating to individual themes should be raised via a [Userstyle Issue](https://github.com/catppuccin/userstyles/issues/new?assignees=&labels=&template=userstyle.yml) instead."
+    validations:
+      required: true
--- a/.github/ISSUE_TEMPLATE/userstyle.yml
+++ b/.github/ISSUE_TEMPLATE/userstyle.yml
@ -0,0 +1,65 @@
+# THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND.
+name: Userstyle Issue
+description: Report your problems with any of the userstyles here!
+body:
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue outlining your problem?
+      description: Please search to see if an issue already exists for your problem.
+      options:
+        - label: I have searched the existing issues and they do not solve my problem.
+          required: true
+  - type: dropdown
+    attributes:
+      label: What userstyles are you seeing the problem on?
+      description: "Don't worry about the `lbl:` prefix, it allows issues to be automatically labelled!"
+      multiple: true
+      options: 
+        - lbl:anilist
+        - lbl:brave-search
+        - lbl:cinny
+        - lbl:codeberg
+        - lbl:deepl
+        - lbl:elk
+        - lbl:github
+        - lbl:hacker-news
+        - lbl:ichi.moe
+        - lbl:invidious
+        - lbl:lastfm
+        - lbl:libreddit
+        - lbl:mastodon
+        - lbl:modrinth
+        - lbl:nitter
+        - lbl:nixos-search
+        - lbl:proton
+        - lbl:reddit
+        - lbl:searxng
+        - lbl:tutanota
+        - lbl:twitch
+        - lbl:vercel
+        - lbl:wikiwand
+        - lbl:youtube
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Describe your problem.
+      description: Also tell us, what do you expect to see?
+      placeholder: The navigation bar on the website is highlighted incorrectly...
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Attach screenshots.
+      description: If applicable, attach screenshots which clearly highlight the issue.
+  - type: input
+    attributes:
+      label: What browser(s) are you seeing the problem on?
+      description: "The browser version is also important, you can find out how to get that info [here](https://github.com/catppuccin/userstyles/blob/main/docs/browsers.md)."
+      placeholder: Firefox v112.0.2
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Any additional comments?
+      description: Add any information that hasn't been covered in the previous sections!
--- a/.github/issue-labeler.yml
+++ b/.github/issue-labeler.yml
@ -0,0 +1,49 @@
+# THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND.
+anilist:
+  - '(lbl:anilist)'
+brave-search:
+  - '(lbl:brave-search)'
+cinny:
+  - '(lbl:cinny)'
+codeberg:
+  - '(lbl:codeberg)'
+deepl:
+  - '(lbl:deepl)'
+elk:
+  - '(lbl:elk)'
+github:
+  - '(lbl:github)'
+hacker-news:
+  - '(lbl:hacker-news)'
+ichi.moe:
+  - '(lbl:ichi.moe)'
+invidious:
+  - '(lbl:invidious)'
+lastfm:
+  - '(lbl:lastfm)'
+libreddit:
+  - '(lbl:libreddit)'
+mastodon:
+  - '(lbl:mastodon)'
+modrinth:
+  - '(lbl:modrinth)'
+nitter:
+  - '(lbl:nitter)'
+nixos-search:
+  - '(lbl:nixos-search)'
+proton:
+  - '(lbl:proton)'
+reddit:
+  - '(lbl:reddit)'
+searxng:
+  - '(lbl:searxng)'
+tutanota:
+  - '(lbl:tutanota)'
+twitch:
+  - '(lbl:twitch)'
+vercel:
+  - '(lbl:vercel)'
+wikiwand:
+  - '(lbl:wikiwand)'
+youtube:
+  - '(lbl:youtube)'
--- a/.github/pr-labeler.yml
+++ b/.github/pr-labeler.yml
@ -0,0 +1,25 @@
+# THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND.
+anilist: styles/anilist/**/*
+brave-search: styles/brave-search/**/*
+cinny: styles/cinny/**/*
+codeberg: styles/codeberg/**/*
+deepl: styles/deepl/**/*
+elk: styles/elk/**/*
+github: styles/github/**/*
+hacker-news: styles/hacker-news/**/*
+ichi.moe: styles/ichi.moe/**/*
+invidious: styles/invidious/**/*
+lastfm: styles/lastfm/**/*
+libreddit: styles/libreddit/**/*
+mastodon: styles/mastodon/**/*
+modrinth: styles/modrinth/**/*
+nitter: styles/nitter/**/*
+nixos-search: styles/nixos-search/**/*
+proton: styles/proton/**/*
+reddit: styles/reddit/**/*
+searxng: styles/searxng/**/*
+tutanota: styles/tutanota/**/*
+twitch: styles/twitch/**/*
+vercel: styles/vercel/**/*
+wikiwand: styles/wikiwand/**/*
+youtube: styles/youtube/**/*
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@ -0,0 +1,29 @@
+<!-- DELETE THIS IF YOUR PULL REQUEST DOES NOT ADD AN USERSTYLE" -->
+
+<!-- Replace "Website" with a markdown link to the website that you have themed. -->
+## 🎉 Theme for Website 🎉
+
+<!--
+You should give a short description of the website that you have themed.
+E.g. YouTube is a video sharing platform that allows users to upload, view, and share videos.
+
+You should also attach some screenshots of the themed website, show it off!
+-->
+
+## 💬 Additional Comments 💬
+
+<!--
+Include any difficulties you had theming this port, or any general comments that would be useful for the reviewer to know.
+Feel free to leave this section empty if you don't have anything more to say.
+-->
+
+## 🗒 Checklist 🗒
+
+- [ ] I have read and followed Catppuccin's [submission guidelines](https://github.com/catppuccin/userstyles/blob/main/docs/userstyle-creation.md).
+- [ ] I have made a new directory underneath `/styles/<name-of-website>` containing the contents of the [`/template`](https://github.com/catppuccin/userstyles/blob/main/template/) directory.
+  - [ ] I have ensured that the new directory is in **lower-kebab-case**.
+- [ ] I have made sure to update the [`userstyles.yml`](https://github.com/catppuccin/userstyles/blob/main/src/userstyles.yml) file with information about the new directory.
+- [ ] I have included the following files:
+  - `catppuccin.user.css` - all stylus code.
+  - `mocha.webp`, `macchiato.webp`, `frappe.webp` and `latte.webp` - individual screenshots of the themed website, in all 4 Catppuccin flavors.
+  - `catwalk.webp` - image of all individual screenshots stitched together, generated via [catwalk](https://github.com/catppuccin/toolbox#-catwalk).
--- a/.github/workflows/generate.yml
+++ b/.github/workflows/generate.yml
@ -0,0 +1,41 @@
+name: Generate Health Files
+
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - "src/**/*"
+
+env:
+  DENO_DIR: deno_cache
+
+jobs:
+  generate-health-files:
+    runs-on: ubuntu-latest
+    name: Re-generate README, CODEOWNERS, pr-labeler.yml & issue-labeler.yml
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          ref: ${{ github.ref }}
+
+      - name: Set up Deno
+        uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
+      - name: Cache Deno dependencies
+        uses: actions/cache@v3
+        with:
+          key: ${{ hashFiles('src/generate/deno.lock') }}
+          path: ${{ env.DENO_DIR }}
+
+      - name: Update README, CODEOWNERS, pr-labeler.yml & issue-labeler.yml
+        working-directory: src/generate
+        run: ./generate.ts
+
+      - name: Push Changes
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: "chore: README, CODEOWNERS & labeler.yml"
+          branch: ${{ github.ref }}
+# yaml-language-server: $schema=https://json.schemastore.org/github-workflow.json
--- a/.github/workflows/issues.yml
+++ b/.github/workflows/issues.yml
@ -0,0 +1,19 @@
+name: Issue Labeler
+
+on:
+  workflow_dispatch:
+  issues:
+    types: [opened, edited]
+
+jobs:
+  triage:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: github/issue-labeler@v3.1
+      with:
+        repo-token: "${{ secrets.GITHUB_TOKEN }}"
+        configuration-path: .github/issue-labeler.yml
+        enable-versioned-regex: 0
+        include-title: 1
+        sync-labels: 1
+# yaml-language-server: $schema=https://json.schemastore.org/github-workflow.json
--- a/.github/workflows/pull-requests.yml
+++ b/.github/workflows/pull-requests.yml
@ -0,0 +1,17 @@
+name: Pull Request Labeler
+
+on:
+  pull_request_target:
+
+jobs:
+  triage:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/labeler@v4.0.3
+        with:
+          configuration-path: .github/pr-labeler.yml
+          sync-labels: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+# yaml-language-server: $schema=https://json.schemastore.org/github-workflow.json
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+deno_cache/
+node_modules/
+.DS_Store
+.idea
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Catppuccin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,132 @@
+<h3 align="center">
+  <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+  <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+  Catppuccin Userstyles
+  <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+</h3>
+
+<h6 align="center">
+  <a href="#%EF%B8%8F-install">Install</a>
+  ·
+  <a href="#-contributing">Contributing</a>
+  ·
+  <a href="#-userstyles">Userstyles</a>
+</h6>
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/palette/macchiato.png" width="400" />
+</p>
+
+<p align="center">
+	<a href="https://github.com/catppuccin/userstyles/stargazers">
+		<img alt="Stargazers" src="https://img.shields.io/github/stars/catppuccin/userstyles?style=for-the-badge&logo=starship&color=C9CBFF&logoColor=D9E0EE&labelColor=302D41"></a>
+	<a href="https://github.com/catppuccin/userstyles/releases/latest">
+		<img alt="Releases" src="https://img.shields.io/github/release/catppuccin/userstyles.svg?style=for-the-badge&logo=github&color=F2CDCD&logoColor=D9E0EE&labelColor=302D41"/></a>
+	<a href="https://github.com/catppuccin/userstyles/issues">
+		<img alt="Issues" src="https://img.shields.io/github/issues/catppuccin/userstyles?style=for-the-badge&logo=gitbook&color=B5E8E0&logoColor=D9E0EE&labelColor=302D41"></a>
+</p>
+
+<p align="center">
+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.
+</p>
+
+<p align="center">
+<strong>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.</strong>
+</p>
+
+&nbsp;
+
+## 🖥️ Install
+
+To install these userstyles:
+
+1. Install [Stylus](https://github.com/openstyles/stylus)
+   - [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/)/[Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) extension.
+2. Enable CSP Patching from `Stylus Settings` > `Advanced`.
+3. Install the theme:
+   - `https://github.com/catppuccin/userstyles/raw/main/styles/<name>/catppuccin.user.css`
+   - Replacing `<name>` with the name of the userstyle.
+4. Enjoy!
+
+&nbsp;
+
+## 👐 Contributing
+
+> **Note** <br>
+> If you would like to submit a userstyle or learn how to port Catppuccin to a website, please refer to the [userstyle-creation.md](docs/userstyle-creation.md).
+
+See [CONTRIBUTING.md](docs/CONTRIBUTING.md)
+
+&nbsp;
+
+## 🖌 Userstyles
+
+<!-- AUTOGEN:USERSTYLES START -->
+<!-- the following section is auto-generated, do not edit -->
+<details open>
+<summary>💭 Development tools</summary>
+
+- [Vercel](styles/vercel)
+
+</details>
+<details open>
+<summary>🔎 Search Engines</summary>
+
+- [Brave Search](styles/brave-search)
+- [NixOS Search](styles/nixos-search)
+- [SearXNG](styles/searxng)
+
+</details>
+<details open>
+<summary>💬 Messaging</summary>
+
+- [Cinny](styles/cinny)
+
+</details>
+<details open>
+<summary>🗂️ Productivity</summary>
+
+- [Codeberg](styles/codeberg)
+- [DeepL](styles/deepl)
+- [GitHub](styles/github)
+- [ichi.moe](styles/ichi.moe)
+- [Proton](styles/proton)
+- [Tutanota](styles/tutanota)
+- [WikiWand](styles/wikiwand)
+
+</details>
+<details open>
+<summary>✨ Social</summary>
+
+- [Elk](styles/elk)
+- [Hacker News](styles/hacker-news)
+- [Invidious](styles/invidious)
+- [Libreddit](styles/libreddit)
+- [Mastodon](styles/mastodon)
+- [Nitter](styles/nitter)
+- [Reddit](styles/reddit)
+- [Twitch](styles/twitch)
+- [YouTube](styles/youtube)
+
+</details>
+<details open>
+<summary>🌈 Leisure</summary>
+
+- [AniList, AniChart](styles/anilist)
+- [Last.fm](styles/lastfm)
+
+</details>
+<details open>
+<summary>🎮 Games</summary>
+
+- [Modrinth](styles/modrinth)
+
+</details>
+<!-- AUTOGEN:USERSTYLES END -->
+
+&nbsp;
+
+<p align="center"><img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" /></p>
+<p align="center">Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
--- a/docs/CONTRIBUTING.md
+++ b/docs/CONTRIBUTING.md
@ -0,0 +1,20 @@
+# Contributing!
+
+🎉 First off, thanks for taking the time to contribute! 🎉
+
+## Guidelines
+
+The following is a set of guidelines for contributing to this repository. Use your best judgment, and feel free to propose changes to this document in a pull request.
+
+## Types of PRs
+
+It is important to note that there are **two types of PRs** for this repository:
+
+1. New Userstyles: Please see [userstyle-creation.md](userstyle-creation.md)
+2. Other improvements: These should follow the recommendations below, to help improve the chances of a merged PR.
+
+## General Recommendations
+
+- Create a [topic branch](https://git-scm.com/book/en/v2/Git-Branching-Branching-Workflows#_topic_branch) on your fork for your specific PR.
+- Consider using [conventionalcommits.org](https://www.conventionalcommits.org/en/v1.0.0/)'s rules for creating explicit and meaningful commit messages.
+- If it's your first time contributing to a project then you should look to the popular [first-contributions](https://github.com/firstcontributions/first-contributions) repository on GitHub. This will give you hands-on experience with the features of GitHub required to make a contribution. As always, feel free to join our [Discord](https://discord.com/servers/catppuccin-907385605422448742) to ask any questions and clarify your understanding, we are more than happy to help!
--- a/docs/browsers.md
+++ b/docs/browsers.md
@ -0,0 +1,26 @@
+# Browsers
+
+> **Note**:
+> If you see a popular browser that hasn't been added, please create a pull request to do so!
+
+Find your browser version by following the instructions below:
+
+<table>
+<tr>
+ <td> Browser
+ <td> Instructions
+<tr>
+ <td> Chromium
+ <td> Type <code>chrome://version/</code>
+<tr>
+ <td> Firefox
+ <td> Type <code>about:support</code>
+<tr>
+ <td> Opera (GX)
+ <td> Type <code>opera://about/</code>
+<tr>
+ <td> Microsoft Edge
+ <td> Type <code>edge://version/</code>
+</table>
+
+TODO: Populate this document with common issues that are run into with these browsers
--- a/docs/userstyle-creation.md
+++ b/docs/userstyle-creation.md
@ -0,0 +1,98 @@
+<p align="center">
+  <h2 align="center">🎨 Userstyle Creation</h2>
+</p>
+
+<p align="center">
+	Guidelines for requesting and creating userstyles
+</p>
+
+&nbsp;
+
+### Requesting Userstyles
+
+To request a website to be themed, please create a [Port Request](https://github.com/catppuccin/catppuccin/discussions/new?category=port-requests) discussion on [catppuccin/catppuccin](https://github.com/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](https://github.com/catppuccin/userstyles/compare)!**
+
+&nbsp;
+
+### Creating Userstyles
+
+Creating userstyles should be very simple if you follow the instructions given below:
+
+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`](../template/) folder into `styles/<name-of-website>`.
+5. Edit the [`catppuccin.user.css`](../template/catppuccin.user.css) file and replace all the words wrapped with `<>` to fit the details of your port.
+6. Edit the [`userstyle.yml`](../src/userstyles.yml) file and put in the details of your port. **More details given below.**
+7. Create your image previews in the [`assets/`](../template/assets/) folder
+   - **All previews must be `.webp` files.**
+   - Create a preview image for each flavor. (e.g. `mocha.webp`, `macchiato.webp`, `frappe.webp` & `latte.webp`)
+   - Use [catwalk](https://github.com/catppuccin/toolbox#catwalk) to generate a composite or grid image of all the flavors. **This must be saved as `catwalk.webp`.**
+8. Raise a [Pull Request](https://github.com/catppuccin/userstyles/compare), making sure to read and fill out the template properly.
+
+&nbsp;
+
+### `userstyles.yml`
+
+Please note that the `README`'s for each port are auto-generated by scripts defined in [`src/generate`](../src/generate), along with many other parts of this repository.
+This file, `userstyles.yml`, is responsible for holding the necessary data to auto-generate everything.
+
+[`userstyles.schema.json`](../src/userstyles.schema.json) is the schema specification for this file. The fields in the following instructions are based on the schema:
+
+1. Add your name to the list of collaborators.
+
+   ```yaml
+   collaborators:
+     - &<github-username>
+     name: <your name, this is optional>
+     url: https://github.com/<github-username>
+   ```
+
+2. Locate the `userstyles` section and add your port to the list.
+
+   You should make changes to everything wrapped in `<>` and remove the `<>` characters.
+   If you need help with any of the fields, you should refer to other ports in the `userstyle.yml` file.
+   If you still cannot figure it out, you can ask for help in the pull request or join our [Discord](https://discord.com/servers/catppuccin-907385605422448742).
+
+   `Required Fields:`
+
+   ```yaml
+    <port>:
+      name: <name>
+      category: <category>
+      readme:
+        app-link: <url>
+        current-maintainers: [ *<github-username> ]
+   ```
+
+   `All Fields:`
+
+   These extra `usage` & `faq` keys will ensure that you can add important information about the port to the README.
+
+   The keys `color` & `icon` are best explained the schema specification itself.
+
+   The key `past-maintainers` is a list of people who have maintained the port in the past. We encourage all maintainers to add/remove themselves from this list as they see fit.
+
+   Remember that these 5 fields are **optional**.
+
+   ```yaml
+    <port>:
+      name: <name>
+      category: <category>
+      color: <color>                                  # OPTIONAL
+      icon: <icon>                                    # OPTIONAL
+      readme:
+        app-link: "<url>"
+        usage: |+                                     # OPTIONAL
+          > **Note** <br>
+          > <your notes>
+        faq:                                          # OPTIONAL
+          - question: <question>
+            answer: <answer>
+        current-maintainers: [ *<github-username> ]
+        past-maintainers: [ *<github-username> ]       # OPTIONAL
+   ```
--- a/src/generate/deno.json
+++ b/src/generate/deno.json
@ -0,0 +1,3 @@
+{
+  "lock": "deno.lock"
+}
--- a/src/generate/deno.lock
+++ b/src/generate/deno.lock
@ -0,0 +1,150 @@
+{
+  "version": "2",
+  "remote": {
+    "https://deno.land/std@0.172.0/_util/asserts.ts": "178dfc49a464aee693a7e285567b3d0b555dc805ff490505a8aae34f9cfb1462",
+    "https://deno.land/std@0.172.0/_util/os.ts": "d932f56d41e4f6a6093d56044e29ce637f8dcc43c5a90af43504a889cf1775e3",
+    "https://deno.land/std@0.172.0/bytes/bytes_list.ts": "b4cbdfd2c263a13e8a904b12d082f6177ea97d9297274a4be134e989450dfa6a",
+    "https://deno.land/std@0.172.0/bytes/concat.ts": "d26d6f3d7922e6d663dacfcd357563b7bf4a380ce5b9c2bbe0c8586662f25ce2",
+    "https://deno.land/std@0.172.0/bytes/copy.ts": "939d89e302a9761dcf1d9c937c7711174ed74c59eef40a1e4569a05c9de88219",
+    "https://deno.land/std@0.172.0/encoding/_yaml/dumper/dumper.ts": "49053c293a2250b33f2efc0ce3973280c6dc3bc0b41397af3863b5f03340e01b",
+    "https://deno.land/std@0.172.0/encoding/_yaml/dumper/dumper_state.ts": "975a3702752a29251c5746206507dfebbfede60dd2c0dec161dc22633fbc6085",
+    "https://deno.land/std@0.172.0/encoding/_yaml/error.ts": "e60ab51d7c0253cf0d1cf7d445202e8e3da5c77aae0032071ba7400121c281b4",
+    "https://deno.land/std@0.172.0/encoding/_yaml/loader/loader.ts": "6c59f60faaf78d73db0e016293f4bfed19e6356d7064230d07d6b68a65a1df5d",
+    "https://deno.land/std@0.172.0/encoding/_yaml/loader/loader_state.ts": "fcc82fcdf167acb0e9e5e32b32682e58b45f2d44210bf685794797ccb5621232",
+    "https://deno.land/std@0.172.0/encoding/_yaml/mark.ts": "0027d6f62a70a6c64b85bd1751ddf1646ea97edcefbf5bea1706d5e519f4e34f",
+    "https://deno.land/std@0.172.0/encoding/_yaml/parse.ts": "63e79582e07145ca1d3205d1ac72b82bf5ce14159dabae195abe7e36de8111bd",
+    "https://deno.land/std@0.172.0/encoding/_yaml/schema.ts": "0833c75c59bf72c8a8f96f6c0615bcd98d23fdd9b076657f42b5c1a4f9d972b0",
+    "https://deno.land/std@0.172.0/encoding/_yaml/schema/core.ts": "366f56673336ba24f5723c04319efcc7471be5f55d5f8d95c9b4a38ec233d4c6",
+    "https://deno.land/std@0.172.0/encoding/_yaml/schema/default.ts": "96e9ed6ead36f53a0832c542fc9b8cca7f8b4a67c1c8424e1423a39ee7154db7",
+    "https://deno.land/std@0.172.0/encoding/_yaml/schema/extended.ts": "f9bd75c79ebdfb92a8e167488b6bde7113a31b8fabe20ad7eed0904fba11bcd2",
+    "https://deno.land/std@0.172.0/encoding/_yaml/schema/failsafe.ts": "cddcbf0258bbe0cd77ca10e2f5aec13439f50d4068f96aab08ca2d64496dabe8",
+    "https://deno.land/std@0.172.0/encoding/_yaml/schema/json.ts": "c86905dfb1b6c4633750bfbb5bd529a30be5c08287ab7eb6694390b40e276487",
+    "https://deno.land/std@0.172.0/encoding/_yaml/schema/mod.ts": "051f93dd97a15aaad2da62bd24627e8fd2f02fb026d21567d924b720d606f078",
+    "https://deno.land/std@0.172.0/encoding/_yaml/state.ts": "ef03d55ec235d48dcfbecc0ab3ade90bfae69a61094846e08003421c2cf5cfc6",
+    "https://deno.land/std@0.172.0/encoding/_yaml/stringify.ts": "426b73e4dbaeed26ed855add3862786d7e374bd4c59e5e1bd9a6fcd5082be3c7",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type.ts": "5ded5472a0f17a219ac3b0e90d96dc8472a68654a40258a31e03a6c6297b6788",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/binary.ts": "935d39794420ac3718d26716192239de6a53566c6f2ba5010e8ed26936b94a89",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/bool.ts": "1c99cfbaa94b022575b636a73e1549569b26fc6bbff2cd5e539aa77b49bdf303",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/float.ts": "f60ad19b27050add694bfc255b7efef27103f047861aa657823ff3f6853bad11",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/function.ts": "65a37f6bef43ef141854ee48a1058d9c9c4c80ed6eed6cd35608329a6957e27a",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/int.ts": "892f59bb7b2dbd64dd9b643c17441af95c0b962ad027e454cb84a68864787b86",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/map.ts": "92e647a6aec0dc184ea4b039a77a15883b54da754311189c595b43f6aaa50030",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/merge.ts": "8192bf3e4d637f32567917f48bb276043da9cf729cf594e5ec191f7cd229337e",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/mod.ts": "060e2b3d38725094b77ea3a3f05fc7e671fced8e67ca18e525be98c4aa8f4bbb",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/nil.ts": "606e8f0c44d73117c81abec822f89ef81e40f712258c74f186baa1af659b8887",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/omap.ts": "fbd5da9970c211335ff7c8fa11e9c5e9256e568d52418ac237d1538c5cb0d5e6",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/pairs.ts": "ea487a44c0ae64d8d952779fa1cb5fa0a12f32a0b5d3d1e8c1f06f446448427c",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/regexp.ts": "672000d22a1062d61577d30b218c28f5cb1d039a7a60079fdde6a4e558d5ca51",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/seq.ts": "39b28f7c7aa41263c5c42cab9d184f03555e9ba19493766afc0c0c325a9ac49f",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/set.ts": "0e30a9f750306b514c8ae9869d1ac2548d57beab55b33e85ea9673ca0a08264c",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/str.ts": "a67a3c6e429d95041399e964015511779b1130ea5889fa257c48457bd3446e31",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/timestamp.ts": "706ea80a76a73e48efaeb400ace087da1f927647b53ad6f754f4e06d51af087f",
+    "https://deno.land/std@0.172.0/encoding/_yaml/type/undefined.ts": "94a316ca450597ccbc6750cbd79097ad0d5f3a019797eed3c841a040c29540ba",
+    "https://deno.land/std@0.172.0/encoding/_yaml/utils.ts": "26b311f0d42a7ce025060bd6320a68b50e52fd24a839581eb31734cd48e20393",
+    "https://deno.land/std@0.172.0/encoding/yaml.ts": "02571d1bbbcfd7c5647789cee872ecf9c1c470e1b1a40948ed219fb661e19d87",
+    "https://deno.land/std@0.172.0/io/buf_reader.ts": "90a7adcb3638d8e1361695cdf844d58bcd97c41711dc6f9f8acc0626ebe097f5",
+    "https://deno.land/std@0.172.0/io/buf_writer.ts": "759c69d304b04d2909976f2a03a24a107276fbd81ed13593c5c2d43d104b52f3",
+    "https://deno.land/std@0.172.0/io/buffer.ts": "24abd4a65403ca3fdffcb6d3f985b0285adfd785f1311ce681708a21126776ad",
+    "https://deno.land/std@0.172.0/io/read_delim.ts": "7e102c66f00a118fa1e1ccd4abb080496f43766686907fd8b9522fdf85443586",
+    "https://deno.land/std@0.172.0/io/read_lines.ts": "baee9e35034f2fdfccf63bc24b7e3cb45aa1c1c5de26d178f7bcbc572e87772f",
+    "https://deno.land/std@0.172.0/io/read_string_delim.ts": "46eb0c9db3547caf8c759631effa200bbe48924f9b34f41edc627bde36cee52d",
+    "https://deno.land/std@0.172.0/path/_constants.ts": "e49961f6f4f48039c0dfed3c3f93e963ca3d92791c9d478ac5b43183413136e0",
+    "https://deno.land/std@0.172.0/path/_interface.ts": "6471159dfbbc357e03882c2266d21ef9afdb1e4aa771b0545e90db58a0ba314b",
+    "https://deno.land/std@0.172.0/path/_util.ts": "86c2375a996c1931b2f2ac71fefd5ddf0cf0e579fa4ab12d3e4c552d4223b8d8",
+    "https://deno.land/std@0.172.0/path/common.ts": "ee7505ab01fd22de3963b64e46cff31f40de34f9f8de1fff6a1bd2fe79380000",
+    "https://deno.land/std@0.172.0/path/glob.ts": "d479e0a695621c94d3fd7fe7abd4f9499caf32a8de13f25073451c6ef420a4e1",
+    "https://deno.land/std@0.172.0/path/mod.ts": "4b83694ac500d7d31b0cdafc927080a53dc0c3027eb2895790fb155082b0d232",
+    "https://deno.land/std@0.172.0/path/posix.ts": "0874b341c2c6968ca38d323338b8b295ea1dae10fa872a768d812e2e7d634789",
+    "https://deno.land/std@0.172.0/path/separator.ts": "0fb679739d0d1d7bf45b68dacfb4ec7563597a902edbaf3c59b50d5bcadd93b1",
+    "https://deno.land/std@0.172.0/path/win32.ts": "672942919dd66ce1b8c224e77d3447e2ad8254eaff13fe6946420a9f78fa141e",
+    "https://deno.land/std@0.172.0/types.d.ts": "220ed56662a0bd393ba5d124aa6ae2ad36a00d2fcbc0e8666a65f4606aaa9784",
+    "https://deno.land/std@0.181.0/_util/asserts.ts": "178dfc49a464aee693a7e285567b3d0b555dc805ff490505a8aae34f9cfb1462",
+    "https://deno.land/std@0.181.0/_util/os.ts": "d932f56d41e4f6a6093d56044e29ce637f8dcc43c5a90af43504a889cf1775e3",
+    "https://deno.land/std@0.181.0/bytes/copy.ts": "939d89e302a9761dcf1d9c937c7711174ed74c59eef40a1e4569a05c9de88219",
+    "https://deno.land/std@0.181.0/encoding/yaml.ts": "1434324316e821dd76c4d4dcaa88ce792449360335a598b88e7625644c721766",
+    "https://deno.land/std@0.181.0/fs/_util.ts": "65381f341af1ff7f40198cee15c20f59951ac26e51ddc651c5293e24f9ce6f32",
+    "https://deno.land/std@0.181.0/fs/walk.ts": "ea95ffa6500c1eda6b365be488c056edc7c883a1db41ef46ec3bf057b1c0fe32",
+    "https://deno.land/std@0.181.0/io/buffer.ts": "17f4410eaaa60a8a85733e8891349a619eadfbbe42e2f319283ce2b8f29723ab",
+    "https://deno.land/std@0.181.0/path/_constants.ts": "e49961f6f4f48039c0dfed3c3f93e963ca3d92791c9d478ac5b43183413136e0",
+    "https://deno.land/std@0.181.0/path/_interface.ts": "6471159dfbbc357e03882c2266d21ef9afdb1e4aa771b0545e90db58a0ba314b",
+    "https://deno.land/std@0.181.0/path/_util.ts": "d7abb1e0dea065f427b89156e28cdeb32b045870acdf865833ba808a73b576d0",
+    "https://deno.land/std@0.181.0/path/common.ts": "ee7505ab01fd22de3963b64e46cff31f40de34f9f8de1fff6a1bd2fe79380000",
+    "https://deno.land/std@0.181.0/path/glob.ts": "d479e0a695621c94d3fd7fe7abd4f9499caf32a8de13f25073451c6ef420a4e1",
+    "https://deno.land/std@0.181.0/path/mod.ts": "bf718f19a4fdd545aee1b06409ca0805bd1b68ecf876605ce632e932fe54510c",
+    "https://deno.land/std@0.181.0/path/posix.ts": "8b7c67ac338714b30c816079303d0285dd24af6b284f7ad63da5b27372a2c94d",
+    "https://deno.land/std@0.181.0/path/separator.ts": "0fb679739d0d1d7bf45b68dacfb4ec7563597a902edbaf3c59b50d5bcadd93b1",
+    "https://deno.land/std@0.181.0/path/win32.ts": "d186344e5583bcbf8b18af416d13d82b35a317116e6460a5a3953508c3de5bba",
+    "https://deno.land/std@0.181.0/types.d.ts": "dbaeb2c4d7c526db9828fc8df89d8aecf53b9ced72e0c4568f97ddd8cda616a4",
+    "https://deno.land/std@0.181.0/yaml/_dumper/dumper.ts": "a2c937a53a2b0473125a31a330334cc3f30e98fd82f8143bc225583d1260890b",
+    "https://deno.land/std@0.181.0/yaml/_dumper/dumper_state.ts": "f0d0673ceea288334061ca34b63954c2bb5feb5bf6de5e4cfe9a942cdf6e5efe",
+    "https://deno.land/std@0.181.0/yaml/_error.ts": "b59e2c76ce5a47b1b9fa0ff9f96c1dd92ea1e1b17ce4347ece5944a95c3c1a84",
+    "https://deno.land/std@0.181.0/yaml/_loader/loader.ts": "04cf748a736a9b3a29bd3d4b3c77d81489f82cfe8391627fd6ba8327e1e8cec2",
+    "https://deno.land/std@0.181.0/yaml/_loader/loader_state.ts": "0841870b467169269d7c2dfa75cd288c319bc06f65edd9e42c29e5fced91c7a4",
+    "https://deno.land/std@0.181.0/yaml/_mark.ts": "dcd8585dee585e024475e9f3fe27d29740670fb64ebb970388094cad0fc11d5d",
+    "https://deno.land/std@0.181.0/yaml/_state.ts": "ef03d55ec235d48dcfbecc0ab3ade90bfae69a61094846e08003421c2cf5cfc6",
+    "https://deno.land/std@0.181.0/yaml/_type/binary.ts": "d34d8c8d8ed521e270cfede3401c425b971af4f6c69da1e2cb32b172d42c7da7",
+    "https://deno.land/std@0.181.0/yaml/_type/bool.ts": "5bfa75da84343d45347b521ba4e5aeace9fe6f53447405290d53315a3fc20e66",
+    "https://deno.land/std@0.181.0/yaml/_type/float.ts": "056bd3cb9c5586238b20517511014fb24b0e36f98f9f6073e12da308b6b9808a",
+    "https://deno.land/std@0.181.0/yaml/_type/function.ts": "ff574fe84a750695302864e1c31b93f12d14ada4bde79a5f93197fc33ad17471",
+    "https://deno.land/std@0.181.0/yaml/_type/int.ts": "563ad074f0fa7aecf6b6c3d84135bcc95a8269dcc15de878de20ce868fd773fa",
+    "https://deno.land/std@0.181.0/yaml/_type/map.ts": "7b105e4ab03a361c61e7e335a0baf4d40f06460b13920e5af3fb2783a1464000",
+    "https://deno.land/std@0.181.0/yaml/_type/merge.ts": "8192bf3e4d637f32567917f48bb276043da9cf729cf594e5ec191f7cd229337e",
+    "https://deno.land/std@0.181.0/yaml/_type/mod.ts": "060e2b3d38725094b77ea3a3f05fc7e671fced8e67ca18e525be98c4aa8f4bbb",
+    "https://deno.land/std@0.181.0/yaml/_type/nil.ts": "606e8f0c44d73117c81abec822f89ef81e40f712258c74f186baa1af659b8887",
+    "https://deno.land/std@0.181.0/yaml/_type/omap.ts": "cfe59a294726f5cea705c39a61fd2b08199cf48f4ccd6b040cb550ec0f38d0a1",
+    "https://deno.land/std@0.181.0/yaml/_type/pairs.ts": "0032fdfe57558d21696a4f8cf5b5cfd1f698743177080affc18629685c905666",
+    "https://deno.land/std@0.181.0/yaml/_type/regexp.ts": "1ce118de15b2da43b4bd8e4395f42d448b731acf3bdaf7c888f40789f9a95f8b",
+    "https://deno.land/std@0.181.0/yaml/_type/seq.ts": "95333abeec8a7e4d967b8c8328b269e342a4bbdd2585395549b9c4f58c8533a2",
+    "https://deno.land/std@0.181.0/yaml/_type/set.ts": "f28ba44e632ef2a6eb580486fd47a460445eeddbdf1dbc739c3e62486f566092",
+    "https://deno.land/std@0.181.0/yaml/_type/str.ts": "a67a3c6e429d95041399e964015511779b1130ea5889fa257c48457bd3446e31",
+    "https://deno.land/std@0.181.0/yaml/_type/timestamp.ts": "706ea80a76a73e48efaeb400ace087da1f927647b53ad6f754f4e06d51af087f",
+    "https://deno.land/std@0.181.0/yaml/_type/undefined.ts": "94a316ca450597ccbc6750cbd79097ad0d5f3a019797eed3c841a040c29540ba",
+    "https://deno.land/std@0.181.0/yaml/_utils.ts": "26b311f0d42a7ce025060bd6320a68b50e52fd24a839581eb31734cd48e20393",
+    "https://deno.land/std@0.181.0/yaml/parse.ts": "1fbbda572bf3fff578b6482c0d8b85097a38de3176bf3ab2ca70c25fb0c960ef",
+    "https://deno.land/std@0.181.0/yaml/schema.ts": "96908b78dc50c340074b93fc1598d5e7e2fe59103f89ff81e5a49b2dedf77a67",
+    "https://deno.land/std@0.181.0/yaml/schema/core.ts": "fa406f18ceedc87a50e28bb90ec7a4c09eebb337f94ef17468349794fa828639",
+    "https://deno.land/std@0.181.0/yaml/schema/default.ts": "0047e80ae8a4a93293bc4c557ae8a546aabd46bb7165b9d9b940d57b4d88bde9",
+    "https://deno.land/std@0.181.0/yaml/schema/extended.ts": "0784416bf062d20a1626b53c03380e265b3e39b9409afb9f4cb7d659fd71e60d",
+    "https://deno.land/std@0.181.0/yaml/schema/failsafe.ts": "d219ab5febc43f770917d8ec37735a4b1ad671149846cbdcade767832b42b92b",
+    "https://deno.land/std@0.181.0/yaml/schema/json.ts": "5f41dd7c2f1ad545ef6238633ce9ee3d444dfc5a18101e1768bd5504bf90e5e5",
+    "https://deno.land/std@0.181.0/yaml/schema/mod.ts": "4472e827bab5025e92bc2eb2eeefa70ecbefc64b2799b765c69af84822efef32",
+    "https://deno.land/std@0.181.0/yaml/stringify.ts": "fffc09c65c68d3d63f8159e8cbaa3f489bc20a8e55b4fbb61a8c2e9f914d1d02",
+    "https://deno.land/std@0.181.0/yaml/type.ts": "1aabb8e0a3f4229ce0a3526256f68826d9bdf65a36c8a3890ead8011fcba7670",
+    "https://raw.githubusercontent.com/catppuccin/catppuccin/main/resources/generate/types.d.ts": "d0c5ac99cbb0d55d54efd56c9d7d4dcae1ef690ed3f1d5ecf7eb56c56eb0396a",
+    "https://raw.githubusercontent.com/catppuccin/catppuccin/main/resources/ports.schema.json": "58dce2a85f75f4afedd48e69870dc42c43b08cbb9cf683c1c25bf9f2fd354287"
+  },
+  "npm": {
+    "specifiers": { "ajv@8.12.0": "ajv@8.12.0" },
+    "packages": {
+      "ajv@8.12.0": {
+        "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+        "dependencies": {
+          "fast-deep-equal": "fast-deep-equal@3.1.3",
+          "json-schema-traverse": "json-schema-traverse@1.0.0",
+          "require-from-string": "require-from-string@2.0.2",
+          "uri-js": "uri-js@4.4.1"
+        }
+      },
+      "fast-deep-equal@3.1.3": {
+        "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+        "dependencies": {}
+      },
+      "json-schema-traverse@1.0.0": {
+        "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+        "dependencies": {}
+      },
+      "punycode@2.3.0": {
+        "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+        "dependencies": {}
+      },
+      "require-from-string@2.0.2": {
+        "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+        "dependencies": {}
+      },
+      "uri-js@4.4.1": {
+        "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+        "dependencies": { "punycode": "punycode@2.3.0" }
+      }
+    }
+  }
+}
--- a/src/generate/deps.ts
+++ b/src/generate/deps.ts
@ -0,0 +1,10 @@
+export { parse as parseYaml } from "https://deno.land/std@0.181.0/encoding/yaml.ts";
+
+import Ajv from "npm:ajv@8.12.0";
+import * as path from "https://deno.land/std@0.181.0/path/mod.ts";
+import { walkSync } from "https://deno.land/std@0.181.0/fs/walk.ts";
+import schema from "../userstyles.schema.json" assert { type: "json" };
+import portsSchema from "https://raw.githubusercontent.com/catppuccin/catppuccin/main/resources/ports.schema.json" assert { type: "json" };
+
+export type { Categories as PortCategories } from "https://raw.githubusercontent.com/catppuccin/catppuccin/main/resources/generate/types.d.ts";
+export { Ajv, path, walkSync, portsSchema, schema };
--- a/src/generate/generate.ts
+++ b/src/generate/generate.ts
@ -0,0 +1,269 @@
+#!/usr/bin/env -S deno run --allow-env --allow-read --allow-write --allow-net
+import {
+  Ajv,
+  parseYaml,
+  path,
+  portsSchema,
+  schema,
+  PortCategories,
+} from "./deps.ts";
+import {
+  FAQ,
+  Userstyle,
+  CurrentMaintainers,
+  PastMaintainers,
+  Userstyles,
+  Usage,
+  ApplicationLink,
+  Name,
+} from "./types.d.ts";
+
+const ROOT = new URL(".", import.meta.url).pathname;
+const REPO_ROOT = path.join(ROOT, "../..");
+const ISSUE_PREFIX = "lbl:";
+
+type Metadata = {
+  userstyles: Userstyles;
+};
+
+type PortMetadata = {
+  categories: PortCategories;
+};
+
+type CollaboratorsData = {
+  collaborators: CurrentMaintainers | PastMaintainers;
+  heading: string;
+};
+
+export type MappedPort = Userstyle & { path: string };
+
+const ajv = new (Ajv as unknown as (typeof Ajv)["default"])();
+const validate = ajv.compile<Metadata>(schema);
+const validatePorts = ajv.compile<PortMetadata>(portsSchema);
+
+const userstylesYaml = Deno.readTextFileSync(
+  path.join(ROOT, "../userstyles.yml")
+);
+const userstylesData = parseYaml(userstylesYaml);
+if (!validate(userstylesData)) {
+  console.log(validate.errors);
+  Deno.exit(1);
+}
+
+const portsYaml = await fetch(
+  "https://raw.githubusercontent.com/catppuccin/catppuccin/main/resources/ports.yml"
+);
+const portsData = parseYaml(await portsYaml.text());
+if (!validatePorts(portsData)) {
+  console.log(validate.errors);
+  Deno.exit(1);
+}
+
+const categorized = Object.entries(userstylesData.userstyles).reduce(
+  (acc, [slug, { category, ...port }]) => {
+    acc[category] ||= [];
+    acc[category].push({ path: `styles/${slug}`, category, ...port });
+    acc[category].sort((a, b) => {
+      const aName = typeof a.name === "string" ? a.name : a.name.join(", ");
+      const bName = typeof b.name === "string" ? b.name : b.name.join(", ");
+      return aName.localeCompare(bName);
+    });
+    return acc;
+  },
+  {} as Record<string, MappedPort[]>
+);
+
+const portListData = portsData.categories
+  .filter((category) => categorized[category.key] !== undefined)
+  .map((category) => {
+    return {
+      meta: category,
+      ports: categorized[category.key],
+    };
+  });
+
+const portContent = portListData
+  .map(
+    (data) => `<details open>
+<summary>${data.meta.emoji} ${data.meta.name}</summary>
+
+${data.ports
+  .map((port) => {
+    const name = Array.isArray(port.name) ? port.name.join(", ") : port.name;
+    return `- [${name}](${port.path})`;
+  })
+  .join("\n")}
+
+</details>`
+  )
+  .join("\n");
+
+const updateReadme = ({
+  readme,
+  section,
+  newContent,
+}: {
+  readme: string;
+  section: string;
+  newContent: string;
+}): string => {
+  const preamble =
+    "<!-- the following section is auto-generated, do not edit -->";
+  const startMarker = `<!-- AUTOGEN:${section.toUpperCase()} START -->`;
+  const endMarker = `<!-- AUTOGEN:${section.toUpperCase()} END -->`;
+  const wrapped = `${startMarker}\n${preamble}\n${newContent}\n${endMarker}`;
+
+  if (
+    !(readmeContent.includes(startMarker) && readmeContent.includes(endMarker))
+  ) {
+    throw new Error("Markers not found in README.md");
+  }
+
+  const pre = readme.split(startMarker)[0];
+  const end = readme.split(endMarker)[1];
+  return pre + wrapped + end;
+};
+
+const updateFile = (filePath: string, fileContent: string, comment = true) => {
+  const preamble = comment
+    ? "# THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND.\n"
+    : "";
+  Deno.writeTextFileSync(filePath, preamble + fileContent);
+};
+
+const readmePath = path.join(REPO_ROOT, "README.md");
+let readmeContent = Deno.readTextFileSync(readmePath);
+try {
+  readmeContent = updateReadme({
+    readme: readmeContent,
+    section: "userstyles",
+    newContent: portContent,
+  });
+  updateFile(readmePath, readmeContent, false);
+} catch (e) {
+  console.log("Failed to update the README:", e);
+}
+
+const pullRequestLabelerPath = path.join(REPO_ROOT, ".github/pr-labeler.yml");
+const pullRequestLabelerContent = Object.entries(userstylesData.userstyles)
+  .map(([key]) => `${key}: styles/${key}/**/*`)
+  .join("\n");
+updateFile(pullRequestLabelerPath, pullRequestLabelerContent);
+
+const issuesLabelerPath = path.join(REPO_ROOT, ".github/issue-labeler.yml");
+const issuesLabelerContent = Object.entries(userstylesData.userstyles)
+  .map(([key]) => {
+    return `${key}:
+  - '(${ISSUE_PREFIX + key})'`;
+  })
+  .join("\n");
+updateFile(issuesLabelerPath, issuesLabelerContent);
+
+const ownersPath = path.join(REPO_ROOT, ".github/CODEOWNERS");
+const ownersContent = Object.entries(userstylesData.userstyles)
+  .map(([key, style]) => {
+    const currentMaintainers = style.readme["current-maintainers"]
+      .map((maintainer) => `@${maintainer.url.split("/").pop()}`)
+      .join(" ");
+    return `/styles/${key} ${currentMaintainers}`;
+  })
+  .join("\n#\n");
+updateFile(ownersPath, ownersContent);
+
+const userstyleIssuePath = path.join(ROOT, "templates/userstyle-issue.yml");
+const userstyleIssueContent = Deno.readTextFileSync(userstyleIssuePath);
+const replacedUserstyleIssueContent = userstyleIssueContent.replace(
+  "$PORTS",
+  `${Object.entries(userstylesData.userstyles)
+    .map(([key]) => `- ${ISSUE_PREFIX + key}`)
+    .join("\n        ")}`
+);
+Deno.writeTextFileSync(
+  path.join(REPO_ROOT, ".github/ISSUE_TEMPLATE/userstyle.yml"),
+  replacedUserstyleIssueContent
+);
+
+const heading = (name: Name, link: ApplicationLink) => {
+  const nameArray = Array.isArray(name) ? name : [name];
+  const linkArray = Array.isArray(link) ? link : [link];
+
+  if (nameArray.length !== linkArray.length) {
+    throw new Error(
+      'The "name" and "app-link" arrays must have the same length'
+    );
+  }
+
+  return `Catppuccin for ${nameArray
+    .map((name, index) => `<a href="${linkArray[index]}">${name}</a>`)
+    .join(", ")}`;
+};
+
+const usageContent = (usage?: Usage) => {
+  return !usage ? "" : `## Usage  \n${usage}`;
+};
+
+const faqContent = (faq?: FAQ) => {
+  if (!faq) {
+    return "";
+  }
+  return `## 🙋 FAQ
+${faq
+  .map(({ question, answer }) => `- Q: ${question}  \n\tA: ${answer}`)
+  .join("\n")}`;
+};
+
+const collaboratorsContent = (allCollaborators: CollaboratorsData[]) => {
+  return allCollaborators
+    .filter(({ collaborators }) => collaborators !== undefined)
+    .map(({ collaborators, heading }) => {
+      const collaboratorBody = collaborators
+        .map(({ name, url }) => `- [${name ?? url.split("/").pop()}](${url})`)
+        .join("\n");
+      return `${heading}\n${collaboratorBody}`;
+    })
+    .join("\n\n");
+};
+
+const updateStylesReadmeContent = (
+  readme: string,
+  key: string,
+  userstyle: Userstyle
+) => {
+  return readme
+    .replace("$TITLE", heading(userstyle.name, userstyle.readme["app-link"]))
+    .replaceAll("$LOWERCASE-PORT", key)
+    .replace("$USAGE", usageContent(userstyle.readme.usage))
+    .replace("$FAQ", faqContent(userstyle.readme.faq))
+    .replace(
+      "$COLLABORATORS",
+      collaboratorsContent([
+        {
+          collaborators: userstyle.readme["current-maintainers"],
+          heading: "## 💝 Current Maintainer(s)",
+        },
+        {
+          collaborators: userstyle.readme["past-maintainers"],
+          heading: "## 💖 Past Maintainer(s)",
+        },
+      ])
+    );
+};
+
+const stylesReadmePath = path.join(ROOT, "templates/userstyle.md");
+const stylesReadmeContent = Deno.readTextFileSync(stylesReadmePath);
+for (const [key, userstyle] of Object.entries(userstylesData.userstyles)) {
+  try {
+    console.log(`Generating README for ${key}`);
+    readmeContent = updateStylesReadmeContent(
+      stylesReadmeContent,
+      key,
+      userstyle
+    );
+    Deno.writeTextFileSync(
+      path.join(REPO_ROOT, "styles", key, "README.md"),
+      readmeContent
+    );
+  } catch (e) {
+    console.log(`Failed to update ${userstyle} README:`, e);
+  }
+}
--- a/src/generate/templates/userstyle-issue.yml
+++ b/src/generate/templates/userstyle-issue.yml
@ -0,0 +1,42 @@
+# THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND.
+name: Userstyle Issue
+description: Report your problems with any of the userstyles here!
+body:
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue outlining your problem?
+      description: Please search to see if an issue already exists for your problem.
+      options:
+        - label: I have searched the existing issues and they do not solve my problem.
+          required: true
+  - type: dropdown
+    attributes:
+      label: What userstyles are you seeing the problem on?
+      description: "Don't worry about the `lbl:` prefix, it allows issues to be automatically labelled!"
+      multiple: true
+      options: 
+        $PORTS
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Describe your problem.
+      description: Also tell us, what do you expect to see?
+      placeholder: The navigation bar on the website is highlighted incorrectly...
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Attach screenshots.
+      description: If applicable, attach screenshots which clearly highlight the issue.
+  - type: input
+    attributes:
+      label: What browser(s) are you seeing the problem on?
+      description: "The browser version is also important, you can find out how to get that info [here](https://github.com/catppuccin/userstyles/blob/main/docs/browsers.md)."
+      placeholder: Firefox v112.0.2
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Any additional comments?
+      description: Add any information that hasn't been covered in the previous sections!
--- a/src/generate/templates/userstyle.md
+++ b/src/generate/templates/userstyle.md
@ -0,0 +1,55 @@
+<!-- AUTOGEN:README START -->
+<!-- THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND -->
+
+<h3 align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+  $TITLE
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+</h3>
+
+<p align="center">
+	<a href="https://github.com/catppuccin/userstyles/issues?q=is%3Aissue+is+label%3A$LOWERCASE-PORT"><img src="https://img.shields.io/github/issues/catppuccin/userstyles?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
+	<a href="https://raw.githubusercontent.com/catppuccin/userstyles/main/styles/$LOWERCASE-PORT/catppuccin.user.css"><img src="https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f&style=for-the-badge"></a>
+</p>
+
+<p align="center">
+  <img src="assets/catwalk.webp"/>
+</p>
+
+## Previews
+
+<details>
+<summary>🌻 Latte</summary>
+<img src="assets/latte.webp"/>
+</details>
+<details>
+<summary>🪴 Frappé</summary>
+<img src="assets/frappe.webp"/>
+</details>
+<details>
+<summary>🌺 Macchiato</summary>
+<img src="assets/macchiato.webp"/>
+</details>
+<details>
+<summary>🌿 Mocha</summary>
+<img src="assets/mocha.webp"/>
+</details>
+
+$USAGE
+
+$FAQ
+
+$COLLABORATORS
+
+&nbsp;
+
+<p align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
+</p>
+
+<p align="center">
+	Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
+</p>
+
+<!-- AUTOGEN:README END -->
--- a/src/generate/types.d.ts
+++ b/src/generate/types.d.ts
@ -0,0 +1,180 @@
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+/**
+ * The name of the userstyle(s).
+ */
+export type Name = [string, string, ...string[]] | string;
+/**
+ * The category that fits the port the most.
+ */
+export type Category =
+  | "browser"
+  | "browser_extension"
+  | "cli"
+  | "code_editor"
+  | "development"
+  | "game"
+  | "leisure"
+  | "library"
+  | "messaging"
+  | "note_taking"
+  | "productivity"
+  | "search_engine"
+  | "social"
+  | "system"
+  | "terminal";
+/**
+ * The fill color for the icon on the Catppuccin website.
+ */
+export type Color =
+  | "rosewater"
+  | "flamingo"
+  | "pink"
+  | "mauve"
+  | "red"
+  | "maroon"
+  | "peach"
+  | "yellow"
+  | "green"
+  | "teal"
+  | "sky"
+  | "sapphire"
+  | "blue"
+  | "lavender"
+  | "text";
+/**
+ * The icon to use on the website. This should be the same name as the SVG file on https://simpleicons.org/. If a `.svg` suffix is present, it's taken from the local website repository resources.
+ */
+export type Icon = string;
+/**
+ * The hyperlink of the app that is being themed.
+ */
+export type ApplicationLink = [string, string, ...string[]] | string;
+/**
+ * The Usage section of the userstyle README.
+ */
+export type Usage = string;
+/**
+ * The FAQ section of the userstyle README.
+ *
+ * @minItems 1
+ */
+export type FAQ = [
+  {
+    question: Question;
+    answer: Answer;
+    [k: string]: unknown;
+  },
+  ...{
+    question: Question;
+    answer: Answer;
+    [k: string]: unknown;
+  }[]
+];
+/**
+ * A question that a user may have about the userstyle.
+ */
+export type Question = string;
+/**
+ * An answer to the question about the userstyle.
+ */
+export type Answer = string;
+/**
+ * List of all active maintainers for this userstyle.
+ *
+ * @minItems 1
+ */
+export type CurrentMaintainers = [
+  {
+    name?: DisplayName;
+    url: GitHubProfile;
+    [k: string]: unknown;
+  },
+  ...{
+    name?: DisplayName;
+    url: GitHubProfile;
+    [k: string]: unknown;
+  }[]
+];
+/**
+ * The display name of the collaborator to show in the userstyle README.
+ */
+export type DisplayName = string;
+/**
+ * The GitHub profile link of the collaborator to show in the userstyle README.
+ */
+export type GitHubProfile = string;
+/**
+ * List of all maintainers that have maintained on this userstyle in the past.
+ *
+ * @minItems 1
+ */
+export type PastMaintainers = [
+  {
+    name?: DisplayName;
+    url: GitHubProfile;
+    [k: string]: unknown;
+  },
+  ...{
+    name?: DisplayName;
+    url: GitHubProfile;
+    [k: string]: unknown;
+  }[]
+];
+/**
+ * Represents all maintainers and contributors to all userstyles.
+ *
+ * @minItems 1
+ */
+export type AllCollaborators = [
+  {
+    name?: DisplayName;
+    url: GitHubProfile;
+    [k: string]: unknown;
+  },
+  ...{
+    name?: DisplayName;
+    url: GitHubProfile;
+    [k: string]: unknown;
+  }[]
+];
+
+export interface UserstylesSchema {
+  userstyles?: Userstyles;
+  collaborators?: AllCollaborators;
+}
+/**
+ * All userstyles in the Catppuccin org.
+ */
+export interface Userstyles {
+  [k: string]: Userstyle;
+}
+/**
+ * The directory of the userstyle.
+ *
+ * This interface was referenced by `Userstyles`'s JSON-Schema definition
+ * via the `patternProperty` "[A-Za-z0-9_\-]".
+ */
+export interface Userstyle {
+  name: Name;
+  category: Category;
+  color?: Color;
+  icon?: Icon;
+  readme: README;
+}
+/**
+ * Options to help in the auto-generation of the userstyle README.
+ */
+export interface README {
+  "app-link": ApplicationLink;
+  usage?: Usage;
+  faq?: FAQ;
+  "current-maintainers": CurrentMaintainers;
+  "past-maintainers"?: PastMaintainers;
+  [k: string]: unknown;
+}
--- a/src/userstyles.schema.json
+++ b/src/userstyles.schema.json
@ -0,0 +1,203 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "additionalProperties": false,
+  "properties": {
+    "userstyles": {
+      "$id": "#userstyles",
+      "title": "Userstyles",
+      "type": "object",
+      "description": "All userstyles in the Catppuccin org.",
+      "patternProperties": {
+        "[A-Za-z0-9_\\-]": {
+          "$id": "#userstyles/userstyle",
+          "title": "Userstyle",
+          "type": "object",
+          "description": "The directory of the userstyle.",
+          "examples": ["youtube"],
+          "required": ["name", "category", "readme"],
+          "additionalProperties": false,
+          "properties": {
+            "name": {
+              "$id": "#userstyles/userstyle/name",
+              "title": "Name",
+              "description": "The name of the userstyle(s).",
+              "oneOf": [
+                {
+                  "type": "array",
+                  "items": {
+                    "type": "string"
+                  },
+                  "minItems": 2,
+                  "examples": [["AniList", "AniChart"]]
+                },
+                {
+                  "type": "string",
+                  "examples": ["YouTube"]
+                }
+              ]
+            },
+            "category": {
+              "$id": "#userstyles/userstyle/category",
+              "title": "Category",
+              "description": "The category that fits the port the most.",
+              "$ref": "#/$defs/category"
+            },
+            "color": {
+              "$id": "#userstyles/userstyle/color",
+              "title": "Color",
+              "description": "The fill color for the icon on the Catppuccin website.",
+              "type": "string",
+              "enum": [
+                "rosewater",
+                "flamingo",
+                "pink",
+                "mauve",
+                "red",
+                "maroon",
+                "peach",
+                "yellow",
+                "green",
+                "teal",
+                "sky",
+                "sapphire",
+                "blue",
+                "lavender",
+                "text"
+              ],
+              "examples": ["pink"]
+            },
+            "icon": {
+              "$id": "#userstyles/userstyle/icon",
+              "title": "Icon",
+              "description": "The icon to use on the website. This should be the same name as the SVG file on https://simpleicons.org/. If a `.svg` suffix is present, it's taken from the local website repository resources.",
+              "type": "string",
+              "examples": ["twitch", "twitch.svg"]
+            },
+            "readme": {
+              "$id": "#userstyles/userstyle/readme",
+              "title": "README",
+              "description": "Options to help in the auto-generation of the userstyle README.",
+              "type": "object",
+              "required": ["app-link", "current-maintainers"],
+              "properties": {
+                "app-link": {
+                  "$id": "#userstyles/userstyle/readme/app-link",
+                  "title": "Application Link",
+                  "description": "The hyperlink of the app that is being themed.",
+                  "oneOf": [
+                    {
+                      "type": "array",
+                      "items": {
+                        "type": "string"
+                      },
+                      "minItems": 2,
+                      "examples": [
+                        ["https://anilist.co", "https://anichart.net"]
+                      ]
+                    },
+                    {
+                      "type": "string",
+                      "examples": ["https://github.com"]
+                    }
+                  ]
+                },
+                "usage": {
+                  "$id": "#userstyles/userstyle/readme/usage",
+                  "title": "Usage",
+                  "description": "The Usage section of the userstyle README.",
+                  "type": "string"
+                },
+                "faq": {
+                  "$id": "#userstyles/userstyle/readme/faq",
+                  "title": "FAQ",
+                  "description": "The FAQ section of the userstyle README.",
+                  "type": "array",
+                  "minItems": 1,
+                  "items": {
+                    "type": "object",
+                    "properties": {
+                      "question": {
+                        "type": "string",
+                        "title": "Question",
+                        "description": "A question that a user may have about the userstyle."
+                      },
+                      "answer": {
+                        "type": "string",
+                        "title": "Answer",
+                        "description": "An answer to the question about the userstyle."
+                      }
+                    },
+                    "required": ["question", "answer"]
+                  }
+                },
+                "current-maintainers": {
+                  "$id": "#userstyles/userstyle/readme/current-maintainers",
+                  "title": "Current Maintainers",
+                  "description": "List of all active maintainers for this userstyle.",
+                  "$ref": "#/$defs/collaborators"
+                },
+                "past-maintainers": {
+                  "$id": "#userstyles/userstyle/readme/past-maintainers",
+                  "title": "Past Maintainers",
+                  "description": "List of all maintainers that have maintained on this userstyle in the past.",
+                  "$ref": "#/$defs/collaborators"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "collaborators": {
+      "$id": "#all-collaborators",
+      "title": "All Collaborators",
+      "description": "Represents all maintainers and contributors to all userstyles.",
+      "$ref": "#/$defs/collaborators"
+    }
+  },
+  "$defs": {
+    "collaborators": {
+      "$id": "#collaborators",
+      "type": "array",
+      "minItems": 1,
+      "items": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string",
+            "title": "Display Name",
+            "description": "The display name of the collaborator to show in the userstyle README."
+          },
+          "url": {
+            "type": "string",
+            "title": "GitHub Profile",
+            "description": "The GitHub profile link of the collaborator to show in the userstyle README."
+          }
+        },
+        "required": ["url"]
+      }
+    },
+    "category": {
+      "$id": "#category",
+      "type": "string",
+      "enum": [
+        "browser",
+        "browser_extension",
+        "cli",
+        "code_editor",
+        "development",
+        "game",
+        "leisure",
+        "library",
+        "messaging",
+        "note_taking",
+        "productivity",
+        "search_engine",
+        "social",
+        "system",
+        "terminal"
+      ]
+    }
+  }
+}
--- a/src/userstyles.yml
+++ b/src/userstyles.yml
@ -0,0 +1,261 @@
+collaborators:
+  - &anubisnekhet
+    url: https://github.com/AnubisNekhet
+  - &ndsboy
+    url: https://github.com/ndsboy
+  - &jn-sena
+    name: jan Sena
+    url: https://github.com/jn-sena
+  - &watatomo
+    name: Ren
+    url: https://github.com/watatomo
+  - &ryanccn
+    name: Ryan Cao
+    url: https://github.com/ryanccn
+  - &pocco81
+    url: https://github.com/Pocco81
+  - &glowingumbreon
+    name: Umbreon
+    url: https://github.com/GlowingUmbreon
+  - &justtobbi
+    url: https://github.com/justTOBBI
+  - &andreasgrafen
+    name: Andreas Grafen
+    url: https://github.com/andreasgrafen
+  - &lucasmelin
+    name: Lucas Melin
+    url: https://github.com/lucasmelin
+  - &gingeh
+    url: https://github.com/Gingeh
+  - &isabelroses
+    name: Isabel
+    url: https://github.com/isabelroses
+  - &thismoon
+    url: https://github.com/thismoon
+  - &alaidriel
+    url: https://github.com/alaidriel
+  - &soya-daizu
+    name: soya_daizu
+    url: https://github.com/soya-daizu
+  - &jayylmao
+    url: https://github.com/jayylmao
+  - &sekki21956
+    name: Sekki
+    url: https://github.com/Sekki21956
+  - &winston
+    name: winston
+    url: https://github.com/nekowinston
+  - &gitmuslim
+    url: https://github.com/GitMuslim
+  - &tnixc
+    name: Tnixc
+    url: https://github.com/tnixc
+  - &elkrien
+    name: Elkrien
+    url: https://github.com/elkrien
+
+userstyles:
+  anilist:
+    name: ["AniList", "AniChart"]
+    category: leisure
+    color: blue
+    readme:
+      app-link: ["https://anilist.co", "https://anichart.net"]
+      usage: |+
+        > **Note** <br>
+        > This theme applies to [AniChart](https://anichart.net/) as well, which is an extension of AniList.
+      current-maintainers: [*anubisnekhet]
+  brave-search:
+    name: Brave Search
+    category: search_engine
+    icon: brave
+    color: peach
+    readme:
+      app-link: "https://search.brave.com"
+      usage: "Set theme to dark or light in Brave Search settings, the automatic setting will not work"
+      current-maintainers: [*ndsboy]
+  cinny:
+    name: Cinny
+    category: messaging
+    readme:
+      app-link: "https://github.com/cinnyapo/cinny"
+      current-maintainers: [*jn-sena]
+  codeberg:
+    name: Codeberg
+    category: productivity
+    readme:
+      app-link: "https://codeberg.org"
+      faq:
+        - question: "How do I change the accent color?"
+          answer: "Changing `--color-primary` to any other color should change the accent color in most places"
+      current-maintainers: [*justtobbi]
+  deepl:
+    name: DeepL
+    category: productivity
+    readme:
+      app-link: "https://deepl.com"
+      current-maintainers: [*watatomo]
+  elk:
+    name: Elk
+    category: social
+    readme:
+      app-link: "https://elk.zone"
+      current-maintainers: [*ryanccn]
+  github:
+    name: GitHub
+    category: productivity
+    color: text
+    readme:
+      app-link: "https://github.com"
+      current-maintainers: [*pocco81, *glowingumbreon]
+      past-maintainers: [*andreasgrafen]
+  hacker-news:
+    name: Hacker News
+    category: social
+    icon: ycombinator
+    readme:
+      app-link: "https://news.ycombinator.com/"
+      current-maintainers: [*lucasmelin]
+  ichi.moe:
+    name: ichi.moe
+    category: productivity
+    readme:
+      app-link: "https://ichi.moe"
+      current-maintainers: [*watatomo]
+  invidious:
+    name: Invidious
+    category: social
+    icon: youtube
+    color: red
+    readme:
+      app-link: "https://invidious.io"
+      current-maintainers: [*winston]
+      past-maintainers: [*andreasgrafen]
+  lastfm:
+    name: Last.fm
+    category: leisure
+    icon: lastdotfm
+    color: red
+    readme:
+      app-link: "https://last.fm"
+      current-maintainers: [*anubisnekhet]
+      past-maintainers: [*gingeh]
+  libreddit:
+    name: Libreddit
+    category: social
+    icon: reddit
+    color: peach
+    readme:
+      app-link: "https://github.com/libreddit/libreddit"
+      current-maintainers: [*isabelroses]
+      past-maintainers: [*andreasgrafen]
+  mastodon:
+    name: Mastodon
+    category: social
+    readme:
+      app-link: "https://github.com/mastodon/mastodon"
+      usage: |+
+        Add urls to `@-moz-document domain("url")` with url being the chosen server
+      faq:
+        - question: "**The theme does not look the same as the preview?**"
+          answer: "Your Mastodon instance may be using its own custom CSS, which is changing the look of the theme"
+        - question: "**Theme is not working?**"
+          answer: |
+            One solution might be changing the theme from the `preferences > application > theme` to light or dark.
+      current-maintainers: [*isabelroses]
+      past-maintainers: [*andreasgrafen]
+  modrinth:
+    name: Modrinth
+    category: game
+    color: green
+    readme:
+      app-link: "https://modrinth.com"
+      current-maintainers: [*thismoon]
+  nitter:
+    name: Nitter
+    category: social
+    icon: twitter
+    color: blue
+    readme:
+      app-link: "https://nitter.net"
+      current-maintainers: [*anubisnekhet]
+  nixos-search:
+    name: NixOS Search
+    category: search_engine
+    icon: nixos
+    color: blue
+    readme:
+      app-link: "https://search.nixos.org"
+      current-maintainers: [*alaidriel]
+  proton:
+    name: Proton
+    category: productivity
+    icon: protonmail
+    color: lavender
+    readme:
+      app-link: "https://proton.me/"
+      usage: "Open Proton Mail and click the settings in the top right, then set the base theme to `Proton` if you are using the Latte flavor, otherwise set it to `Carbon`"
+      current-maintainers: [*soya-daizu]
+  reddit:
+    name: Reddit
+    category: social
+    color: red
+    icon: reddit
+    readme:
+      app-link: "https://reddit.com"
+      current-maintainers: [*jayylmao]
+  searxng:
+    name: SearXNG
+    category: search_engine
+    readme:
+      app-link: "https://github.com/searxng/searxng"
+      current-maintainers: [*sekki21956, *ryanccn]
+  tutanota:
+    name: Tutanota
+    category: productivity
+    color: red
+    readme:
+      app-link: "https://tutanota.com/"
+      usage: |+
+        > **Note** <br>
+        > Set Tutanota's built-in theme to either **light** if you're using Latte or **dark** if you're using the others.
+      current-maintainers: [*ryanccn]
+  twitch:
+    name: Twitch
+    category: social
+    icon: twitch
+    color: mauve
+    readme:
+      app-link: "https://twitch.tv"
+      usage: |+
+        > **Note** <br>
+        > Set Twitch's built-in theme to either **light** if you're using Latte or **dark** if you're using the others.
+      current-maintainers: [*gitmuslim, *isabelroses]
+  vercel:
+    name: Vercel
+    category: development
+    readme:
+      app-link: "https://vercel.com"
+      current-maintainers: [*ryanccn]
+  wikiwand:
+    name: WikiWand
+    category: productivity
+    icon: wikipedia
+    readme:
+      app-link: "https://www.wikiwand.com"
+      current-maintainers: [*tnixc]
+  youtube:
+    name: YouTube
+    category: social
+    color: red
+    readme:
+      app-link: "https://youtube.com"
+      usage: |+
+        > **Note** <br>
+        > Make sure your base YouTube theme is set to **light** mode!
+      faq:
+        - question: "**What does the 'Enable for black bars' option mean?**"
+          answer: "It is there in-case you have an OLED display. If you have one, you might want to enable this."
+      current-maintainers: [*isabelroses]
+      past-maintainers: [*elkrien]
+# yaml-language-server: $schema=userstyles.schema.json
--- a/styles/anilist/README.md
+++ b/styles/anilist/README.md
@ -0,0 +1,59 @@
+<!-- AUTOGEN:README START -->
+<!-- THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND -->
+
+<h3 align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+  Catppuccin for <a href="https://anilist.co">AniList</a>, <a href="https://anichart.net">AniChart</a>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+</h3>
+
+<p align="center">
+	<a href="https://github.com/catppuccin/userstyles/issues?q=is%3Aissue+is+label%3Aanilist"><img src="https://img.shields.io/github/issues/catppuccin/userstyles?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
+	<a href="https://raw.githubusercontent.com/catppuccin/userstyles/main/styles/anilist/catppuccin.user.css"><img src="https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f&style=for-the-badge"></a>
+</p>
+
+<p align="center">
+  <img src="assets/catwalk.webp"/>
+</p>
+
+## Previews
+
+<details>
+<summary>🌻 Latte</summary>
+<img src="assets/latte.webp"/>
+</details>
+<details>
+<summary>🪴 Frappé</summary>
+<img src="assets/frappe.webp"/>
+</details>
+<details>
+<summary>🌺 Macchiato</summary>
+<img src="assets/macchiato.webp"/>
+</details>
+<details>
+<summary>🌿 Mocha</summary>
+<img src="assets/mocha.webp"/>
+</details>
+
+## Usage  
+> **Note** <br>
+> This theme applies to [AniChart](https://anichart.net/) as well, which is an extension of AniList.
+
+
+
+
+## 💝 Current Maintainer(s)
+- [AnubisNekhet](https://github.com/AnubisNekhet)
+
+&nbsp;
+
+<p align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
+</p>
+
+<p align="center">
+	Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
+</p>
+
+<!-- AUTOGEN:README END -->
--- a/styles/anilist/assets/anichart/catwalk.webp
+++ b/styles/anilist/assets/anichart/catwalk.webp
--- a/styles/anilist/assets/anichart/frappe.webp
+++ b/styles/anilist/assets/anichart/frappe.webp
--- a/styles/anilist/assets/anichart/latte.webp
+++ b/styles/anilist/assets/anichart/latte.webp
--- a/styles/anilist/assets/anichart/macchiato.webp
+++ b/styles/anilist/assets/anichart/macchiato.webp
--- a/styles/anilist/assets/anichart/mocha.webp
+++ b/styles/anilist/assets/anichart/mocha.webp
--- a/styles/anilist/assets/catwalk.webp
+++ b/styles/anilist/assets/catwalk.webp
--- a/styles/anilist/assets/frappe.webp
+++ b/styles/anilist/assets/frappe.webp
--- a/styles/anilist/assets/latte.webp
+++ b/styles/anilist/assets/latte.webp
--- a/styles/anilist/assets/macchiato.webp
+++ b/styles/anilist/assets/macchiato.webp
--- a/styles/anilist/assets/mocha.webp
+++ b/styles/anilist/assets/mocha.webp
--- a/styles/anilist/catppuccin.user.css
+++ b/styles/anilist/catppuccin.user.css
@ -0,0 +1,981 @@
+/* ==UserStyle==
+@name           AniList Catppuccin
+@namespace      github.com/catppuccin/userstyles/styles/anilist
+@version        2.1.1
+@description    Soothing pastel theme for AniList
+@author         Catppuccin
+@updateURL      https://github.com/catppuccin/userstyles/raw/main/styles/anilist/catppuccin.user.css
+
+@preprocessor   less
+@var select lightFlavour "Light Flavour" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
+@var select darkFlavour "Dark Flavour" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
+@var select accentColour "Accent Colour" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green*", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey" ]
+@var select contrastColour "Contrast Colour" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green*", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey" ]
+==/UserStyle== */
+@-moz-document domain("anilist.co") {
+
+    body:not(.site-theme-dark) {
+        #catppuccin(@lightFlavour, @accentColour);
+    }
+    .site-theme-dark {
+        #catppuccin(@darkFlavour, @accentColour);
+    }
+
+    @catppuccin: {
+        @latte: {
+            @rosewater: #dc8a78;
+            @flamingo: #dd7878;
+            @pink: #ea76cb;
+            @mauve: #8839ef;
+            @red: #d20f39;
+            @maroon: #e64553;
+            @peach: #fe640b;
+            @yellow: #df8e1d;
+            @green: #40a02b;
+            @teal: #179299;
+            @sky: #04a5e5;
+            @sapphire: #209fb5;
+            @blue: #1e66f5;
+            @lavender: #7287fd;
+            @text: #4c4f69;
+            @subtext1: #5c5f77;
+            @subtext0: #6c6f85;
+            @overlay2: #7c7f93;
+            @overlay1: #8c8fa1;
+            @overlay0: #9ca0b0;
+            @surface2: #acb0be;
+            @surface1: #bcc0cc;
+            @surface0: #ccd0da;
+            @base: #eff1f5;
+            @mantle: #e6e9ef;
+            @crust: #dce0e8;
+        }
+        @frappe: {
+            @rosewater: #f2d5cf;
+            @flamingo: #eebebe;
+            @pink: #f4b8e4;
+            @mauve: #ca9ee6;
+            @red: #e78284;
+            @maroon: #ea999c;
+            @peach: #ef9f76;
+            @yellow: #e5c890;
+            @green: #a6d189;
+            @teal: #81c8be;
+            @sky: #99d1db;
+            @sapphire: #85c1dc;
+            @blue: #8caaee;
+            @lavender: #babbf1;
+            @text: #c6d0f5;
+            @subtext1: #b5bfe2;
+            @subtext0: #a5adce;
+            @overlay2: #949cbb;
+            @overlay1: #838ba7;
+            @overlay0: #737994;
+            @surface2: #626880;
+            @surface1: #51576d;
+            @surface0: #414559;
+            @base: #303446;
+            @mantle: #292c3c;
+            @crust: #232634;
+        }
+        @macchiato: {
+            @rosewater: #f4dbd6;
+            @flamingo: #f0c6c6;
+            @pink: #f5bde6;
+            @mauve: #c6a0f6;
+            @red: #ed8796;
+            @maroon: #ee99a0;
+            @peach: #f5a97f;
+            @yellow: #eed49f;
+            @green: #a6da95;
+            @teal: #8bd5ca;
+            @sky: #91d7e3;
+            @sapphire: #7dc4e4;
+            @blue: #8aadf4;
+            @lavender: #b7bdf8;
+            @text: #cad3f5;
+            @subtext1: #b8c0e0;
+            @subtext0: #a5adcb;
+            @overlay2: #939ab7;
+            @overlay1: #8087a2;
+            @overlay0: #6e738d;
+            @surface2: #5b6078;
+            @surface1: #494d64;
+            @surface0: #363a4f;
+            @base: #24273a;
+            @mantle: #1e2030;
+            @crust: #181926;
+        }
+        @mocha: {
+            @rosewater: #f5e0dc;
+            @flamingo: #f2cdcd;
+            @pink: #f5c2e7;
+            @mauve: #cba6f7;
+            @red: #f38ba8;
+            @maroon: #eba0ac;
+            @peach: #fab387;
+            @yellow: #f9e2af;
+            @green: #a6e3a1;
+            @teal: #94e2d5;
+            @sky: #89dceb;
+            @sapphire: #74c7ec;
+            @blue: #89b4fa;
+            @lavender: #b4befe;
+            @text: #cdd6f4;
+            @subtext1: #bac2de;
+            @subtext0: #a6adc8;
+            @overlay2: #9399b2;
+            @overlay1: #7f849c;
+            @overlay0: #6c7086;
+            @surface2: #585b70;
+            @surface1: #45475a;
+            @surface0: #313244;
+            @base: #1e1e2e;
+            @mantle: #181825;
+            @crust: #11111b;
+        }
+    }
+
+    #rgbify(@color) {
+        @rgb-raw: red(@color) green(@color) blue(@color);
+    }
+
+    #catppuccin(@lookup, @accent) {
+        @rosewater: @catppuccin[@@lookup][@rosewater];
+        @flamingo: @catppuccin[@@lookup][@flamingo];
+        @pink: @catppuccin[@@lookup][@pink];
+        @mauve: @catppuccin[@@lookup][@mauve];
+        @red: @catppuccin[@@lookup][@red];
+        @maroon: @catppuccin[@@lookup][@maroon];
+        @peach: @catppuccin[@@lookup][@peach];
+        @yellow: @catppuccin[@@lookup][@yellow];
+        @green: @catppuccin[@@lookup][@green];
+        @teal: @catppuccin[@@lookup][@teal];
+        @sky: @catppuccin[@@lookup][@sky];
+        @sapphire: @catppuccin[@@lookup][@sapphire];
+        @blue: @catppuccin[@@lookup][@blue];
+        @lavender: @catppuccin[@@lookup][@lavender];
+        @text: @catppuccin[@@lookup][@text];
+        @subtext1: @catppuccin[@@lookup][@subtext1];
+        @subtext0: @catppuccin[@@lookup][@subtext0];
+        @overlay2: @catppuccin[@@lookup][@overlay2];
+        @overlay1: @catppuccin[@@lookup][@overlay1];
+        @overlay0: @catppuccin[@@lookup][@overlay0];
+        @surface2: @catppuccin[@@lookup][@surface2];
+        @surface1: @catppuccin[@@lookup][@surface1];
+        @surface0: @catppuccin[@@lookup][@surface0];
+        @base: @catppuccin[@@lookup][@base];
+        @mantle: @catppuccin[@@lookup][@mantle];
+        @crust: @catppuccin[@@lookup][@crust];
+        @accent: @catppuccin[@@lookup][@@accentColour];
+        @contrast-color: @catppuccin[@@lookup][@@contrastColour];
+        /* raw rgb needs to be defined for some reason */
+        @rgb-raw: @red;
+
+        /* rgbify function converts a less color variable to raw rgb in @rgb-raw */
+        #rgbify(@color) {
+            @rgb-raw: red(@color),
+            green(@color),
+            blue(@color);
+        }
+
+        & when (@lookup =latte) {
+            --color-blue-dim: #rgbify(desaturate(lighten(@accent, 10%), 10%))[@rgb-raw];
+            .nav[data-v-62eacfff],
+            .solid[data-v-62eacfff],
+            .transparent[data-v-62eacfff]:hover {
+                background: darken(@text, 10%);
+                color: @base;
+            }
+        }
+
+        & when not (@lookup =latte) {
+            --color-blue-dim: #rgbify(desaturate(darken(@accent, 10%), 10%))[@rgb-raw];
+        }
+
+        /* BASE VARIABLES */
+        & {
+            --color-background: #rgbify(@crust)[@rgb-raw];
+            --color-foreground: #rgbify(@base)[@rgb-raw];
+            --color-foreground-grey: #rgbify(@surface0)[@rgb-raw];
+            --color-foreground-grey-dark: #rgbify(@surface0)[@rgb-raw];
+            --color-foreground-blue: #rgbify(@mantle)[@rgb-raw];
+            --color-foreground-blue-dark: #rgbify(@mantle)[@rgb-raw];
+            --color-background-blue-dark: #rgbify(@subtext1)[@rgb-raw];
+            --color-overlay: #rgbify(@crust)[@rgb-raw];
+            --color-shadow: #rgbify(@mantle)[@rgb-raw];
+            --color-shadow-dark: #rgbify(@crust)[@rgb-raw];
+            --color-shadow-blue: #rgbify(@blue)[@rgb-raw];
+            --color-text: #rgbify(@text)[@rgb-raw];
+            --color-text-light: #rgbify(@subtext1)[@rgb-raw];
+            --color-text-lighter: #rgbify(@subtext0)[@rgb-raw];
+            --color-text-bright: #rgbify(@text)[@rgb-raw];
+            --color-blue: #rgbify(@accent)[@rgb-raw];
+            --color-white: 255, 255, 255;
+            --color-black: 0, 0, 0;
+            --color-red: #rgbify(@contrast-color)[@rgb-raw];
+            --color-peach: #rgbify(@maroon)[@rgb-raw];
+            --color-orange: #rgbify(@peach)[@rgb-raw];
+            --color-yellow: #rgbify(@yellow)[@rgb-raw];
+            --color-green: #rgbify(@green)[@rgb-raw];
+            --color-background-1200: #rgbify(@text)[@rgb-raw];
+            --color-background-1100: #rgbify(@text)[@rgb-raw];
+            --color-background-1000: #rgbify(@text)[@rgb-raw];
+            --color-background-900: #rgbify(@subtext1)[@rgb-raw];
+            --color-background-800: #rgbify(@subtext0)[@rgb-raw];
+            --color-background-700: #rgbify(@surface1)[@rgb-raw];
+            --color-background-600: #rgbify(@surface0)[@rgb-raw];
+            --color-background-500: #rgbify(@surface0)[@rgb-raw];
+            --color-background-400: #rgbify(@surface0)[@rgb-raw];
+            --color-background-300: #rgbify(@base)[@rgb-raw];
+            --color-background-200: #rgbify(@mantle)[@rgb-raw];
+            --color-background-100: #rgbify(@crust)[@rgb-raw];
+            --color-gray-1200: #rgbify(@text)[@rgb-raw];
+            --color-gray-1100: #rgbify(@text)[@rgb-raw];
+            --color-gray-1000: #rgbify(@text)[@rgb-raw];
+            --color-gray-900: #rgbify(@text)[@rgb-raw];
+            --color-gray-800: #rgbify(@overlay2)[@rgb-raw];
+            --color-gray-700: #rgbify(@overlay1)[@rgb-raw];
+            --color-gray-600: #rgbify(@overlay0)[@rgb-raw];
+            --color-gray-500: #rgbify(@surface2)[@rgb-raw];
+            --color-gray-400: #rgbify(@surface1)[@rgb-raw];
+            --color-gray-300: #rgbify(@surface0)[@rgb-raw];
+            --color-gray-200: #rgbify(@mantle)[@rgb-raw];
+            --color-gray-100: #rgbify(@crust)[@rgb-raw];
+            --color-blue-100: #rgbify(@text)[@rgb-raw];
+            --color-blue-200: #rgbify(@text)[@rgb-raw];
+            --color-blue-300: #rgbify(@text)[@rgb-raw];
+            --color-blue-400: #rgbify(@sapphire)[@rgb-raw];
+            --color-blue-500: #rgbify(@sapphire)[@rgb-raw];
+            --color-blue-600: #rgbify(@blue)[@rgb-raw];
+            --color-blue-700: #rgbify(@blue)[@rgb-raw];
+            --color-blue-800: #rgbify(@blue)[@rgb-raw];
+            --color-blue-900: #rgbify(@blue)[@rgb-raw];
+            --color-blue-1000: #rgbify(@blue)[@rgb-raw];
+            --color-green-100: #rgbify(@teal)[@rgb-raw];
+            --color-green-200: #rgbify(@green)[@rgb-raw];
+            --color-green-300: #rgbify(@green)[@rgb-raw];
+            --color-green-400: #rgbify(@green)[@rgb-raw];
+            --color-green-500: #rgbify(@green)[@rgb-raw];
+            --color-green-600: #rgbify(@green)[@rgb-raw];
+            --color-green-700: #rgbify(@green)[@rgb-raw];
+            --color-green-800: #rgbify(@green)[@rgb-raw];
+            --color-red-100: #rgbify(@text)[@rgb-raw];
+            --color-red-200: #rgbify(@flamingo)[@rgb-raw];
+            --color-red-300: #rgbify(@maroon)[@rgb-raw];
+            --color-red-400: #rgbify(@red)[@rgb-raw];
+            --color-red-500: #rgbify(@red)[@rgb-raw];
+            --color-red-600: #rgbify(@red)[@rgb-raw];
+            --color-red-700: #rgbify(@red)[@rgb-raw];
+        }
+        /* DARK THEME SPECIFIC TWEAKS */
+        & when not (@lookup =latte) {
+            --color-background: #rgbify(@crust)[@rgb-raw];
+            --color-foreground: #rgbify(@base)[@rgb-raw];
+            --color-foreground-grey: #rgbify(@surface0)[@rgb-raw];
+            --color-foreground-grey-dark: #rgbify(@surface0)[@rgb-raw];
+            --color-foreground-blue: #rgbify(@mantle)[@rgb-raw];
+            --color-foreground-blue-dark: #rgbify(@mantle)[@rgb-raw];
+            --color-text: #rgbify(@text)[@rgb-raw];
+            --color-text-light: #rgbify(@subtext0)[@rgb-raw];
+            --color-text-lighter: #rgbify(@subtext1)[@rgb-raw];
+            --color-shadow-blue: #rgbify(@crust)[@rgb-raw];
+            --color-background-1200: #rgbify(@text)[@rgb-raw];
+            --color-background-1100: #rgbify(@text)[@rgb-raw];
+            --color-background-1000: #rgbify(@text)[@rgb-raw];
+            --color-background-900: #rgbify(@subtext1)[@rgb-raw];
+            --color-background-800: #rgbify(@subtext0)[@rgb-raw];
+            --color-background-700: #rgbify(@surface1)[@rgb-raw];
+            --color-background-600: #rgbify(@surface0)[@rgb-raw];
+            --color-background-500: #rgbify(@surface0)[@rgb-raw];
+            --color-background-400: #rgbify(@surface0)[@rgb-raw];
+            --color-background-300: #rgbify(@base)[@rgb-raw];
+            --color-background-200: #rgbify(@mantle)[@rgb-raw];
+            --color-background-100: #rgbify(@crust)[@rgb-raw];
+            --color-gray-1200: #rgbify(@text)[@rgb-raw];
+            --color-gray-1100: #rgbify(@text)[@rgb-raw];
+            --color-gray-1000: #rgbify(@text)[@rgb-raw];
+            --color-gray-900: #rgbify(@text)[@rgb-raw];
+            --color-gray-800: #rgbify(@overlay2)[@rgb-raw];
+            --color-gray-700: #rgbify(@overlay1)[@rgb-raw];
+            --color-gray-600: #rgbify(@overlay0)[@rgb-raw];
+            --color-gray-500: #rgbify(@surface2)[@rgb-raw];
+            --color-gray-400: #rgbify(@surface1)[@rgb-raw];
+            --color-gray-300: #rgbify(@surface0)[@rgb-raw];
+            --color-gray-200: #rgbify(@mantle)[@rgb-raw];
+            --color-gray-100: #rgbify(@crust)[@rgb-raw];
+        }
+        /* DARK THEME NAV BAR */
+        .nav-unscoped when not (@lookup =latte) {
+            background-color: @mantle !important;
+        }
+        /*-----------------PROFILE FIXES-----------------*/
+        #profileColor(@color) {
+            --color-blue: #rgbify(@color)[@rgb-raw];
+            & when (@lookup =latte) {
+                --color-blue-dim: #rgbify(lighten(@color, 10%))[@rgb-raw];
+            }
+            & when not (@lookup =latte) {
+                --color-blue-dim: #rgbify(darken(@color, 10%))[@rgb-raw];
+            }
+            --color-overlay: @crust;
+            .progress .bar {
+                background: linear-gradient(270deg, darken(@color, 10%), @color);
+            }
+        }
+        .user-page-unscoped.orange {
+            #profileColor(@peach)
+        }
+        .user-page-unscoped.green {
+            #profileColor(@green)
+        }
+        .user-page-unscoped.purple {
+            #profileColor(@mauve)
+        }
+        .user-page-unscoped.red {
+            #profileColor(@red)
+        }
+        .user-page-unscoped.blue {
+            #profileColor(@blue)
+        }
+        .user-page-unscoped.pink {
+            #profileColor(@pink)
+        }
+        .user-page-unscoped.gray {
+            #profileColor(@overlay1)
+        }
+
+        /*--------------Tags----------------*/
+        .tag {
+            background: @accent !important;
+            color: @base !important;
+        }
+        .genre {
+            color: @base !important;
+        }
+
+        /*----Tracking Status List Stuff----*/
+        .list[data-v-5776f768],
+        .el-icon-arrow-down:before {
+            color: @mantle !important;
+        }
+        .el-dropdown-menu,
+        .el-dropdown-menu__item--divided:before,
+        .el-select-dropdown {
+            background-color: @base !important;
+        }
+        .el-dropdown-menu {
+            border: 4px @text !important;
+        }
+        .el-dropdown-menu__item:focus,
+        .el-dropdown-menu__item:not(.is-disabled):hover {
+            color: @crust !important;
+        }
+        .el-dropdown-menu__item--divided when not (@lookup =latte) {
+            border-top-color: rgb(21, 31, 46);
+        }
+        .el-select-dropdown__item.hover,
+        .el-select-dropdown__item:hover {
+            background-color: @mantle;
+        }
+
+        /*---------SCORE TWEAKS--------------*/
+        .score[data-v-5ca094da] {
+            color: @base;
+        }
+
+        /*--------------FOOTER (It's hardcoded idk why anilist dumdum)----------*/
+        .footer[data-v-0f519cab] {
+            background: @crust;
+            color: @subtext0;
+        }
+
+        /*------------------MISC EDITS--------------------*/
+        /*--Reset button in notifications-----*/
+        .reset-btn {
+            color: @base !important;
+        }
+        /* Publish Button in Replies and Messages */
+        .save {
+            color: @base !important;
+        }
+        /*------------IMAGE COVER------------*/
+        .cover .image-text,
+        .plus-progress {
+            color: @text !important;
+        }
+
+        .entry .plus-progress,
+        .medialist.table .entry .edit {
+            color: @base !important;
+        }
+        /*--------Settings button--------*/
+        .settings[data-v-3deab077] .button {
+            color: @crust;
+        }
+        .el-checkbox__input.is-checked .el-checkbox__inner,
+        .el-radio__input.is-checked .el-radio__inner {
+            background-color: @accent;
+            border-color: @accent;
+        }
+        .el-checkbox__inner:after {
+            border-color: @crust;
+            border-width: 2px;
+            left: 3px;
+        }
+        .el-radio__input.is-checked + .el-radio__label {
+            color: @accent;
+        }
+        /*--------HIDE SCROLLBAR IN BIO-----*/
+        .section::-webkit-scrollbar {
+            display: none;
+        }
+        .section {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+        /*--------REMOVE DROPDOWN SHADOWS-----*/
+        .dropdown.dropdown {
+            box-shadow: none;
+        }
+        /*---------ANILIST LIKER PLUGIN------*/
+        #AnilistLikerPlugin .mmd2 {
+            font-style: normal !important;
+            font-weight: 700;
+            font-family: Overpass;
+        }
+        #AnilistLikerPlugin .btntop {
+            margin-bottom: -4px;
+            margin-top: 5px;
+        }
+        #AnilistLikerPlugin .btnbottom {
+            margin-top: -2px;
+        }
+    }
+}
+
+@-moz-document domain("anichart.net") {
+
+    body:not(.site-theme-dark) {
+        #catppuccin(@lightFlavour, @accentColour);
+    }
+    .site-theme-dark {
+        #catppuccin(@darkFlavour, @accentColour);
+    }
+
+    @catppuccin: {
+        @latte: {
+            @rosewater: #dc8a78;
+            @flamingo: #dd7878;
+            @pink: #ea76cb;
+            @mauve: #8839ef;
+            @red: #d20f39;
+            @maroon: #e64553;
+            @peach: #fe640b;
+            @yellow: #df8e1d;
+            @green: #40a02b;
+            @teal: #179299;
+            @sky: #04a5e5;
+            @sapphire: #209fb5;
+            @blue: #1e66f5;
+            @lavender: #7287fd;
+            @text: #4c4f69;
+            @subtext1: #5c5f77;
+            @subtext0: #6c6f85;
+            @overlay2: #7c7f93;
+            @overlay1: #8c8fa1;
+            @overlay0: #9ca0b0;
+            @surface2: #acb0be;
+            @surface1: #bcc0cc;
+            @surface0: #ccd0da;
+            @base: #eff1f5;
+            @mantle: #e6e9ef;
+            @crust: #dce0e8;
+        }
+        @frappe: {
+            @rosewater: #f2d5cf;
+            @flamingo: #eebebe;
+            @pink: #f4b8e4;
+            @mauve: #ca9ee6;
+            @red: #e78284;
+            @maroon: #ea999c;
+            @peach: #ef9f76;
+            @yellow: #e5c890;
+            @green: #a6d189;
+            @teal: #81c8be;
+            @sky: #99d1db;
+            @sapphire: #85c1dc;
+            @blue: #8caaee;
+            @lavender: #babbf1;
+            @text: #c6d0f5;
+            @subtext1: #b5bfe2;
+            @subtext0: #a5adce;
+            @overlay2: #949cbb;
+            @overlay1: #838ba7;
+            @overlay0: #737994;
+            @surface2: #626880;
+            @surface1: #51576d;
+            @surface0: #414559;
+            @base: #303446;
+            @mantle: #292c3c;
+            @crust: #232634;
+        }
+        @macchiato: {
+            @rosewater: #f4dbd6;
+            @flamingo: #f0c6c6;
+            @pink: #f5bde6;
+            @mauve: #c6a0f6;
+            @red: #ed8796;
+            @maroon: #ee99a0;
+            @peach: #f5a97f;
+            @yellow: #eed49f;
+            @green: #a6da95;
+            @teal: #8bd5ca;
+            @sky: #91d7e3;
+            @sapphire: #7dc4e4;
+            @blue: #8aadf4;
+            @lavender: #b7bdf8;
+            @text: #cad3f5;
+            @subtext1: #b8c0e0;
+            @subtext0: #a5adcb;
+            @overlay2: #939ab7;
+            @overlay1: #8087a2;
+            @overlay0: #6e738d;
+            @surface2: #5b6078;
+            @surface1: #494d64;
+            @surface0: #363a4f;
+            @base: #24273a;
+            @mantle: #1e2030;
+            @crust: #181926;
+        }
+        @mocha: {
+            @rosewater: #f5e0dc;
+            @flamingo: #f2cdcd;
+            @pink: #f5c2e7;
+            @mauve: #cba6f7;
+            @red: #f38ba8;
+            @maroon: #eba0ac;
+            @peach: #fab387;
+            @yellow: #f9e2af;
+            @green: #a6e3a1;
+            @teal: #94e2d5;
+            @sky: #89dceb;
+            @sapphire: #74c7ec;
+            @blue: #89b4fa;
+            @lavender: #b4befe;
+            @text: #cdd6f4;
+            @subtext1: #bac2de;
+            @subtext0: #a6adc8;
+            @overlay2: #9399b2;
+            @overlay1: #7f849c;
+            @overlay0: #6c7086;
+            @surface2: #585b70;
+            @surface1: #45475a;
+            @surface0: #313244;
+            @base: #1e1e2e;
+            @mantle: #181825;
+            @crust: #11111b;
+        }
+    }
+
+    #rgbify(@color) {
+        @rgb-raw: red(@color) green(@color) blue(@color);
+    }
+
+    #catppuccin(@lookup, @accent) {
+        @rosewater: @catppuccin[@@lookup][@rosewater];
+        @flamingo: @catppuccin[@@lookup][@flamingo];
+        @pink: @catppuccin[@@lookup][@pink];
+        @mauve: @catppuccin[@@lookup][@mauve];
+        @red: @catppuccin[@@lookup][@red];
+        @maroon: @catppuccin[@@lookup][@maroon];
+        @peach: @catppuccin[@@lookup][@peach];
+        @yellow: @catppuccin[@@lookup][@yellow];
+        @green: @catppuccin[@@lookup][@green];
+        @teal: @catppuccin[@@lookup][@teal];
+        @sky: @catppuccin[@@lookup][@sky];
+        @sapphire: @catppuccin[@@lookup][@sapphire];
+        @blue: @catppuccin[@@lookup][@blue];
+        @lavender: @catppuccin[@@lookup][@lavender];
+        @text: @catppuccin[@@lookup][@text];
+        @subtext1: @catppuccin[@@lookup][@subtext1];
+        @subtext0: @catppuccin[@@lookup][@subtext0];
+        @overlay2: @catppuccin[@@lookup][@overlay2];
+        @overlay1: @catppuccin[@@lookup][@overlay1];
+        @overlay0: @catppuccin[@@lookup][@overlay0];
+        @surface2: @catppuccin[@@lookup][@surface2];
+        @surface1: @catppuccin[@@lookup][@surface1];
+        @surface0: @catppuccin[@@lookup][@surface0];
+        @base: @catppuccin[@@lookup][@base];
+        @mantle: @catppuccin[@@lookup][@mantle];
+        @crust: @catppuccin[@@lookup][@crust];
+        @accent: @catppuccin[@@lookup][@@accentColour];
+        @contrast-color: @catppuccin[@@lookup][@@contrastColour];
+        /* raw rgb needs to be defined for some reason */
+        @rgb-raw: @red;
+
+        /* rgbify function converts a less color variable to raw rgb in @rgb-raw */
+        #rgbify(@color) {
+            @rgb-raw: red(@color),
+            green(@color),
+            blue(@color);
+        }
+
+        & when (@lookup =latte) {
+            --color-blue-dim: #rgbify(desaturate(lighten(@accent, 10%), 10%))[@rgb-raw];
+            .nav[data-v-62eacfff],
+            .solid[data-v-62eacfff],
+            .transparent[data-v-62eacfff]:hover {
+                background: darken(@text, 10%);
+                color: @base;
+            }
+        }
+
+        & when not (@lookup =latte) {
+            --color-blue-dim: #rgbify(desaturate(darken(@accent, 10%), 10%))[@rgb-raw];
+        }
+
+        /* BASE VARIABLES */
+        & {
+            --color-background: #rgbify(@crust)[@rgb-raw];
+            --color-foreground: #rgbify(@base)[@rgb-raw];
+            --color-foreground-grey: #rgbify(@surface0)[@rgb-raw];
+            --color-foreground-grey-dark: #rgbify(@surface0)[@rgb-raw];
+            --color-foreground-blue: #rgbify(@mantle)[@rgb-raw];
+            --color-foreground-blue-dark: #rgbify(@mantle)[@rgb-raw];
+            --color-background-blue-dark: #rgbify(@subtext1)[@rgb-raw];
+            --color-overlay: #rgbify(@crust)[@rgb-raw];
+            --color-shadow: #rgbify(@mantle)[@rgb-raw];
+            --color-shadow-dark: #rgbify(@crust)[@rgb-raw];
+            --color-shadow-blue: #rgbify(@blue)[@rgb-raw];
+            --color-text: #rgbify(@text)[@rgb-raw];
+            --color-text-light: #rgbify(@subtext1)[@rgb-raw];
+            --color-text-lighter: #rgbify(@subtext0)[@rgb-raw];
+            --color-text-bright: #rgbify(@text)[@rgb-raw];
+            --color-blue: #rgbify(@accent)[@rgb-raw];
+            --color-white: 255, 255, 255;
+            --color-black: 0, 0, 0;
+            --color-red: #rgbify(@contrast-color)[@rgb-raw];
+            --color-peach: #rgbify(@maroon)[@rgb-raw];
+            --color-orange: #rgbify(@peach)[@rgb-raw];
+            --color-yellow: #rgbify(@yellow)[@rgb-raw];
+            --color-green: #rgbify(@green)[@rgb-raw];
+            --color-background-1200: #rgbify(@text)[@rgb-raw];
+            --color-background-1100: #rgbify(@text)[@rgb-raw];
+            --color-background-1000: #rgbify(@text)[@rgb-raw];
+            --color-background-900: #rgbify(@subtext1)[@rgb-raw];
+            --color-background-800: #rgbify(@subtext0)[@rgb-raw];
+            --color-background-700: #rgbify(@surface1)[@rgb-raw];
+            --color-background-600: #rgbify(@surface0)[@rgb-raw];
+            --color-background-500: #rgbify(@surface0)[@rgb-raw];
+            --color-background-400: #rgbify(@surface0)[@rgb-raw];
+            --color-background-300: #rgbify(@base)[@rgb-raw];
+            --color-background-200: #rgbify(@mantle)[@rgb-raw];
+            --color-background-100: #rgbify(@crust)[@rgb-raw];
+            --color-gray-1200: #rgbify(@text)[@rgb-raw];
+            --color-gray-1100: #rgbify(@text)[@rgb-raw];
+            --color-gray-1000: #rgbify(@text)[@rgb-raw];
+            --color-gray-900: #rgbify(@text)[@rgb-raw];
+            --color-gray-800: #rgbify(@overlay2)[@rgb-raw];
+            --color-gray-700: #rgbify(@overlay1)[@rgb-raw];
+            --color-gray-600: #rgbify(@overlay0)[@rgb-raw];
+            --color-gray-500: #rgbify(@surface2)[@rgb-raw];
+            --color-gray-400: #rgbify(@surface1)[@rgb-raw];
+            --color-gray-300: #rgbify(@surface0)[@rgb-raw];
+            --color-gray-200: #rgbify(@mantle)[@rgb-raw];
+            --color-gray-100: #rgbify(@crust)[@rgb-raw];
+            --color-blue-100: #rgbify(@text)[@rgb-raw];
+            --color-blue-200: #rgbify(@text)[@rgb-raw];
+            --color-blue-300: #rgbify(@text)[@rgb-raw];
+            --color-blue-400: #rgbify(@sapphire)[@rgb-raw];
+            --color-blue-500: #rgbify(@sapphire)[@rgb-raw];
+            --color-blue-600: #rgbify(@blue)[@rgb-raw];
+            --color-blue-700: #rgbify(@blue)[@rgb-raw];
+            --color-blue-800: #rgbify(@blue)[@rgb-raw];
+            --color-blue-900: #rgbify(@blue)[@rgb-raw];
+            --color-blue-1000: #rgbify(@blue)[@rgb-raw];
+            --color-green-100: #rgbify(@teal)[@rgb-raw];
+            --color-green-200: #rgbify(@green)[@rgb-raw];
+            --color-green-300: #rgbify(@green)[@rgb-raw];
+            --color-green-400: #rgbify(@green)[@rgb-raw];
+            --color-green-500: #rgbify(@green)[@rgb-raw];
+            --color-green-600: #rgbify(@green)[@rgb-raw];
+            --color-green-700: #rgbify(@green)[@rgb-raw];
+            --color-green-800: #rgbify(@green)[@rgb-raw];
+            --color-red-100: #rgbify(@text)[@rgb-raw];
+            --color-red-200: #rgbify(@flamingo)[@rgb-raw];
+            --color-red-300: #rgbify(@maroon)[@rgb-raw];
+            --color-red-400: #rgbify(@red)[@rgb-raw];
+            --color-red-500: #rgbify(@red)[@rgb-raw];
+            --color-red-600: #rgbify(@red)[@rgb-raw];
+            --color-red-700: #rgbify(@red)[@rgb-raw];
+        }
+        /* DARK THEME SPECIFIC TWEAKS */
+        & when not (@lookup =latte) {
+            --color-background: #rgbify(@crust)[@rgb-raw];
+            --color-foreground: #rgbify(@base)[@rgb-raw];
+            --color-foreground-grey: #rgbify(@surface0)[@rgb-raw];
+            --color-foreground-grey-dark: #rgbify(@surface0)[@rgb-raw];
+            --color-foreground-blue: #rgbify(@mantle)[@rgb-raw];
+            --color-foreground-blue-dark: #rgbify(@mantle)[@rgb-raw];
+            --color-text: #rgbify(@text)[@rgb-raw];
+            --color-text-light: #rgbify(@subtext0)[@rgb-raw];
+            --color-text-lighter: #rgbify(@subtext1)[@rgb-raw];
+            --color-shadow-blue: #rgbify(@crust)[@rgb-raw];
+            --color-background-1200: #rgbify(@text)[@rgb-raw];
+            --color-background-1100: #rgbify(@text)[@rgb-raw];
+            --color-background-1000: #rgbify(@text)[@rgb-raw];
+            --color-background-900: #rgbify(@subtext1)[@rgb-raw];
+            --color-background-800: #rgbify(@subtext0)[@rgb-raw];
+            --color-background-700: #rgbify(@surface1)[@rgb-raw];
+            --color-background-600: #rgbify(@surface0)[@rgb-raw];
+            --color-background-500: #rgbify(@surface0)[@rgb-raw];
+            --color-background-400: #rgbify(@surface0)[@rgb-raw];
+            --color-background-300: #rgbify(@base)[@rgb-raw];
+            --color-background-200: #rgbify(@mantle)[@rgb-raw];
+            --color-background-100: #rgbify(@crust)[@rgb-raw];
+            --color-gray-1200: #rgbify(@text)[@rgb-raw];
+            --color-gray-1100: #rgbify(@text)[@rgb-raw];
+            --color-gray-1000: #rgbify(@text)[@rgb-raw];
+            --color-gray-900: #rgbify(@text)[@rgb-raw];
+            --color-gray-800: #rgbify(@overlay2)[@rgb-raw];
+            --color-gray-700: #rgbify(@overlay1)[@rgb-raw];
+            --color-gray-600: #rgbify(@overlay0)[@rgb-raw];
+            --color-gray-500: #rgbify(@surface2)[@rgb-raw];
+            --color-gray-400: #rgbify(@surface1)[@rgb-raw];
+            --color-gray-300: #rgbify(@surface0)[@rgb-raw];
+            --color-gray-200: #rgbify(@mantle)[@rgb-raw];
+            --color-gray-100: #rgbify(@crust)[@rgb-raw];
+        }
+        /* DARK THEME NAV BAR */
+        .nav-unscoped when not (@lookup =latte) {
+            background-color: @mantle !important;
+        }
+        /*-----------------PROFILE FIXES-----------------*/
+        #profileColor(@color) {
+            --color-blue: #rgbify(@color)[@rgb-raw];
+            & when (@lookup =latte) {
+                --color-blue-dim: #rgbify(lighten(@color, 10%))[@rgb-raw];
+            }
+            & when not (@lookup =latte) {
+                --color-blue-dim: #rgbify(darken(@color, 10%))[@rgb-raw];
+            }
+            --color-overlay: @crust;
+            .progress .bar {
+                background: linear-gradient(270deg, darken(@color, 10%), @color);
+            }
+        }
+        .user-page-unscoped.orange {
+            #profileColor(@peach)
+        }
+        .user-page-unscoped.green {
+            #profileColor(@green)
+        }
+        .user-page-unscoped.purple {
+            #profileColor(@mauve)
+        }
+        .user-page-unscoped.red {
+            #profileColor(@red)
+        }
+        .user-page-unscoped.blue {
+            #profileColor(@blue)
+        }
+        .user-page-unscoped.pink {
+            #profileColor(@pink)
+        }
+        .user-page-unscoped.gray {
+            #profileColor(@overlay1)
+        }
+
+        /*--------------Tags----------------*/
+        .tag {
+            background: @accent !important;
+            color: @base !important;
+        }
+        .genre {
+            color: @base !important;
+        }
+
+        /*----Tracking Status List Stuff----*/
+        .list[data-v-5776f768],
+        .el-icon-arrow-down:before {
+            color: @mantle !important;
+        }
+        .el-dropdown-menu,
+        .el-dropdown-menu__item--divided:before,
+        .el-select-dropdown {
+            background-color: @base !important;
+        }
+        .el-dropdown-menu {
+            border: 4px @text !important;
+        }
+        .el-dropdown-menu__item:focus,
+        .el-dropdown-menu__item:not(.is-disabled):hover {
+            color: @crust !important;
+        }
+        .el-dropdown-menu__item--divided when not (@lookup =latte) {
+            border-top-color: rgb(21, 31, 46);
+        }
+        .el-select-dropdown__item.hover,
+        .el-select-dropdown__item:hover {
+            background-color: @mantle;
+        }
+
+        /*---------SCORE TWEAKS--------------*/
+        .score[data-v-5ca094da] {
+            color: @base;
+        }
+
+        /*--------------FOOTER (It's hardcoded idk why anilist dumdum)----------*/
+        .footer[data-v-0f519cab] {
+            background: @crust;
+            color: @subtext0;
+        }
+
+        /*------------------MISC EDITS--------------------*/
+        /*--Reset button in notifications-----*/
+        .reset-btn {
+            color: @base !important;
+        }
+        /* Publish Button in Replies and Messages */
+        .save {
+            color: @base !important;
+        }
+        /*------------IMAGE COVER------------*/
+        .cover .image-text,
+        .plus-progress {
+            color: @text !important;
+        }
+
+        .entry .plus-progress,
+        .medialist.table .entry .edit {
+            color: @base !important;
+        }
+        /*--------Settings button--------*/
+        .settings[data-v-3deab077] .button {
+            color: @crust;
+        }
+        .el-checkbox__input.is-checked .el-checkbox__inner,
+        .el-radio__input.is-checked .el-radio__inner {
+            background-color: @accent;
+            border-color: @accent;
+        }
+        .el-checkbox__inner:after {
+            border-color: @crust;
+            border-width: 2px;
+            left: 3px;
+        }
+        .el-radio__input.is-checked + .el-radio__label {
+            color: @accent;
+        }
+        /*--------HIDE SCROLLBAR IN BIO-----*/
+        .section::-webkit-scrollbar {
+            display: none;
+        }
+        .section {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+        /*--------REMOVE DROPDOWN SHADOWS-----*/
+        .dropdown.dropdown {
+            box-shadow: none;
+        }
+        /*---------ANILIST LIKER PLUGIN------*/
+        #AnilistLikerPlugin .mmd2 {
+            font-style: normal !important;
+            font-weight: 700;
+            font-family: Overpass;
+        }
+        #AnilistLikerPlugin .btntop {
+            margin-bottom: -4px;
+            margin-top: 5px;
+        }
+        #AnilistLikerPlugin .btnbottom {
+            margin-top: -2px;
+        }
+		
+        /*--------ANICHART SPECIFIC TWEAKS----*/
+        .login[data-v-0d5bfbcd],
+        .login[data-v-0d5bfbcd]:hover {
+            color: @base;
+        }
+
+        .nav[data-v-e2f25004] {
+            background: @crust;
+        }
+        .season[data-v-e2f25004],
+        .charts .label[data-v-e2f25004],
+        .charts .svg-icon[data-v-e2f25004],
+        .section:first-of-type .section-heading[data-v-309146c2],
+        a.title[data-v-09928904] {
+            color: @text;
+        }
+        .season.router-link-active[data-v-e2f25004],
+        .charts a:hover .svg-icon[data-v-e2f25004],
+        .season[data-v-e2f25004]:hover,
+        .charts .router-link-active .svg-icon[data-v-e2f25004] {
+            color: @accent;
+        }
+        .settings[data-v-3deab077] .button.danger {
+            color: @base;
+        }
+        /* AUTOMAIL TWEAK */
+        .site-theme-dark .el-popper .el-dropdown-menu__item:focus,
+        .el-popper .el-dropdown-menu__item:not(.is-disabled):hover {
+            color: @accent !important;
+        }
+        .hohMediaScore {
+            font-size: 90%;
+            font-family: Overpass;
+            border: 2px solid @surface0;
+            padding: 4px;
+            border-radius: 10px;
+            margin-left: 0px;
+            background-color: @base;
+            color: @accent;
+        }
+        .filter-group.compare-btn,
+        .hohButton {
+            color: @base;
+        }
+        .hohButton {
+            background-color: @accent;
+        }
+        .medialist.table .entry:hover,
+        .medialist.table .entry .title a:hover,
+        .compare-btn[data-v-170179fc]:hover {
+            color: @base;
+        }
+        .hohCompare table {
+            background-color: @crust;
+        }
+        .hohAnimeTable,
+        .hohAnimeTable td,
+        .hohUserRow td,
+        .hohUserRow th,
+        .hohHeaderRow td,
+        .hohHeaderRow th {
+            border: 2px solid @surface0 !important;
+        }
+        .hohUserRow td {
+            border-top: 4px solid @surface0 !important;
+        }
+        .hohUserRow tr {
+            border-right: 4px solid @surface0 !important;
+        }
+		
+        /*---------ANILIST LIKER PLUGIN------*/
+        #AnilistLikerPlugin .mmd2 {
+            font-style: normal !important;
+            font-weight: 700;
+            font-family: Overpass;
+        }
+        #AnilistLikerPlugin .btntop {
+            margin-bottom: -4px;
+            margin-top: 5px;
+        }
+        #AnilistLikerPlugin .btnbottom {
+            margin-top: -2px;
+        }
+    }
+}
--- a/styles/brave-search/README.md
+++ b/styles/brave-search/README.md
@ -0,0 +1,57 @@
+<!-- AUTOGEN:README START -->
+<!-- THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND -->
+
+<h3 align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+  Catppuccin for <a href="https://search.brave.com">Brave Search</a>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+</h3>
+
+<p align="center">
+	<a href="https://github.com/catppuccin/userstyles/issues?q=is%3Aissue+is+label%3Abrave-search"><img src="https://img.shields.io/github/issues/catppuccin/userstyles?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
+	<a href="https://raw.githubusercontent.com/catppuccin/userstyles/main/styles/brave-search/catppuccin.user.css"><img src="https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f&style=for-the-badge"></a>
+</p>
+
+<p align="center">
+  <img src="assets/catwalk.webp"/>
+</p>
+
+## Previews
+
+<details>
+<summary>🌻 Latte</summary>
+<img src="assets/latte.webp"/>
+</details>
+<details>
+<summary>🪴 Frappé</summary>
+<img src="assets/frappe.webp"/>
+</details>
+<details>
+<summary>🌺 Macchiato</summary>
+<img src="assets/macchiato.webp"/>
+</details>
+<details>
+<summary>🌿 Mocha</summary>
+<img src="assets/mocha.webp"/>
+</details>
+
+## Usage  
+Set theme to dark or light in Brave Search settings, the automatic setting will not work
+
+
+
+## 💝 Current Maintainer(s)
+- [ndsboy](https://github.com/ndsboy)
+
+&nbsp;
+
+<p align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
+</p>
+
+<p align="center">
+	Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
+</p>
+
+<!-- AUTOGEN:README END -->
--- a/styles/brave-search/assets/catwalk.webp
+++ b/styles/brave-search/assets/catwalk.webp
--- a/styles/brave-search/assets/frappe.webp
+++ b/styles/brave-search/assets/frappe.webp
--- a/styles/brave-search/assets/latte.webp
+++ b/styles/brave-search/assets/latte.webp
--- a/styles/brave-search/assets/macchiato.webp
+++ b/styles/brave-search/assets/macchiato.webp
--- a/styles/brave-search/assets/mocha.webp
+++ b/styles/brave-search/assets/mocha.webp
--- a/styles/brave-search/catppuccin.user.css
+++ b/styles/brave-search/catppuccin.user.css
@ -0,0 +1,295 @@
+/* ==UserStyle==
+@name           Brave Search Catppuccin
+@namespace      github.com/catppuccin/userstyles/styles/brave-search
+@version        1.0.2
+@description    Soothing pastel theme for Brave Search
+@author         Catppuccin
+@updateURL      https://github.com/catppuccin/userstyles/raw/main/styles/brave-search/catppuccin.user.css
+@preprocessor 	less
+@var select lightTheme "Light Theme" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"]
+@var select darkTheme "Dark Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"]
+==/UserStyle== */
+@-moz-document domain("search.brave.com") {
+  :root.light {
+    #catppuccin(@lightTheme);
+  }
+  :root.dark {
+    #catppuccin(@darkTheme);
+  }
+  :root:not(.light):not(.dark) {
+    @media (prefers-color-scheme: light) {
+      #catppuccin(@lightTheme);
+    }
+    @media (prefers-color-scheme: dark) {
+      #catppuccin(@darkTheme);
+    }
+  }
+
+  @catppuccin: {
+    @latte: {
+      @color-scheme: light;
+      @rosewater: #dc8a78;
+      @flamingo: #dd7878;
+      @pink: #ea76cb;
+      @mauve: #8839ef;
+      @red: #d20f39;
+      @maroon: #e64553;
+      @peach: #fe640b;
+      @yellow: #df8e1d;
+      @green: #40a02b;
+      @teal: #179299;
+      @sky: #04a5e5;
+      @sapphire: #209fb5;
+      @blue: #1e66f5;
+      @lavender: #7287fd;
+      @text: #4c4f69;
+      @subtext1: #5c5f77;
+      @subtext0: #6c6f85;
+      @overlay2: #7c7f93;
+      @overlay1: #8c8fa1;
+      @overlay0: #9ca0b0;
+      @surface2: #acb0be;
+      @surface1: #bcc0cc;
+      @surface0: #ccd0da;
+      @base: #eff1f5;
+      @mantle: #e6e9ef;
+      @crust: #dce0e8;
+    };
+    @frappe: {
+      @color-scheme: dark;
+      @rosewater: #f2d5cf;
+      @flamingo: #eebebe;
+      @pink: #f4b8e4;
+      @mauve: #ca9ee6;
+      @red: #e78284;
+      @maroon: #ea999c;
+      @peach: #ef9f76;
+      @yellow: #e5c890;
+      @green: #a6d189;
+      @teal: #81c8be;
+      @sky: #99d1db;
+      @sapphire: #85c1dc;
+      @blue: #8caaee;
+      @lavender: #babbf1;
+      @text: #c6d0f5;
+      @subtext1: #b5bfe2;
+      @subtext0: #a5adce;
+      @overlay2: #949cbb;
+      @overlay1: #838ba7;
+      @overlay0: #737994;
+      @surface2: #626880;
+      @surface1: #51576d;
+      @surface0: #414559;
+      @base: #303446;
+      @mantle: #292c3c;
+      @crust: #232634;
+    };
+    @macchiato: {
+      @color-scheme: dark;
+      @rosewater: #f4dbd6;
+      @flamingo: #f0c6c6;
+      @pink: #f5bde6;
+      @mauve: #c6a0f6;
+      @red: #ed8796;
+      @maroon: #ee99a0;
+      @peach: #f5a97f;
+      @yellow: #eed49f;
+      @green: #a6da95;
+      @teal: #8bd5ca;
+      @sky: #91d7e3;
+      @sapphire: #7dc4e4;
+      @blue: #8aadf4;
+      @lavender: #b7bdf8;
+      @text: #cad3f5;
+      @subtext1: #b8c0e0;
+      @subtext0: #a5adcb;
+      @overlay2: #939ab7;
+      @overlay1: #8087a2;
+      @overlay0: #6e738d;
+      @surface2: #5b6078;
+      @surface1: #494d64;
+      @surface0: #363a4f;
+      @base: #24273a;
+      @mantle: #1e2030;
+      @crust: #181926;
+    };
+    @mocha: {
+      @color-scheme: dark;
+      @rosewater: #f5e0dc;
+      @flamingo: #f2cdcd;
+      @pink: #f5c2e7;
+      @mauve: #cba6f7;
+      @red: #f38ba8;
+      @maroon: #eba0ac;
+      @peach: #fab387;
+      @yellow: #f9e2af;
+      @green: #a6e3a1;
+      @teal: #94e2d5;
+      @sky: #89dceb;
+      @sapphire: #74c7ec;
+      @blue: #89b4fa;
+      @lavender: #b4befe;
+      @text: #cdd6f4;
+      @subtext1: #bac2de;
+      @subtext0: #a6adc8;
+      @overlay2: #9399b2;
+      @overlay1: #7f849c;
+      @overlay0: #6c7086;
+      @surface2: #585b70;
+      @surface1: #45475a;
+      @surface0: #313244;
+      @base: #1e1e2e;
+      @mantle: #181825;
+      @crust: #11111b;
+    };
+  };
+
+  #catppuccin(@lookup) {
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @flamingo: @catppuccin[@@lookup][@flamingo];
+    @pink: @catppuccin[@@lookup][@pink];
+    @mauve: @catppuccin[@@lookup][@mauve];
+    @red: @catppuccin[@@lookup][@red];
+    @maroon: @catppuccin[@@lookup][@maroon];
+    @peach: @catppuccin[@@lookup][@peach];
+    @yellow: @catppuccin[@@lookup][@yellow];
+    @green: @catppuccin[@@lookup][@green];
+    @teal: @catppuccin[@@lookup][@teal];
+    @sky: @catppuccin[@@lookup][@sky];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @blue: @catppuccin[@@lookup][@blue];
+    @lavender: @catppuccin[@@lookup][@lavender];
+    @text: @catppuccin[@@lookup][@text];
+    @subtext1: @catppuccin[@@lookup][@subtext1];
+    @subtext0: @catppuccin[@@lookup][@subtext0];
+    @overlay2: @catppuccin[@@lookup][@overlay2];
+    @overlay1: @catppuccin[@@lookup][@overlay1];
+    @overlay0: @catppuccin[@@lookup][@overlay0];
+    @surface2: @catppuccin[@@lookup][@surface2];
+    @surface1: @catppuccin[@@lookup][@surface1];
+    @surface0: @catppuccin[@@lookup][@surface0];
+    @base: @catppuccin[@@lookup][@base];
+    @mantle: @catppuccin[@@lookup][@mantle];
+    @crust: @catppuccin[@@lookup][@crust];
+    @color: @catppuccin[@@lookup][@color-scheme];
+
+    & {
+      color-scheme: @color;
+      --body-bg: @base;
+      --bg-glassy: @mantle;
+      --bg-1: @surface1;
+      --bg-2: @surface0;
+      --bg-02: @crust;
+      --bg-04: @mantle;
+      --bg-green: @green;
+      --bg-blue: @blue;
+      --bg-red: @red;
+      --bg-favicon: @surface1;
+      --bg-form-control-selected: @surface2;
+      --bg-form-control-unselected: @surface0;
+      --form-control-selected: @blue;
+      --form-control-hover: @lavender;
+      --form-control-focus: @text;
+      --settings-header-bg: @mantle;
+      --settings-header-text: @text;
+      --settings-header-icon: @blue;
+      --settings-widget-text: @subtext0;
+      --settings-item-text: @text;
+      --settings-item-icon: @blue;
+      --settings-item-border: @overlay0;
+      --settings-item-border-2: @overlay2;
+      --settings-btn-bg: @surface0;
+      --settings-btn-text: @text;
+      --settings-widget-outline: @overlay0;
+      --settings-independent-score: @blue;
+      --settings-global-score: @peach;
+      --brave-supporter-bg: @base;
+      --brave-supporter-text: @text;
+      --context-menu-header-border: @overlay0;
+      --color-primary: @text;
+      --color-primary-2: @subtext1;
+      --color-primary-3: @subtext0;
+      --color-white: @text;
+      --color-gray-2: @subtext1;
+      --color-gray-3: @subtext0;
+      --color-gray-4: @overlay2;
+      --color-gray-5: @overlay1;
+      --color-gray-6: @overlay0;
+      --color-green: @green;
+      --color-red: @red;
+      --color-blue: @blue;
+      --info-color: @blue;
+      --link-primary: @blue;
+      --link-secondary: @blue;
+      --link-visited: @mauve;
+      --snippet-url: @subtext0;
+      --separator-dot: @overlay0;
+      --theme-purple: @mauve;
+      --theme-yellow: @yellow;
+      --border-color: @overlay0;
+      --blurple-300: @lavender;
+      --text-01: @text;
+      --text-02: @subtext1;
+      --text-03: @subtext0;
+      --interactive-04: @blue;
+      --interactive-05: @blue;
+      --interactive-06: @blue;
+      --interactive-07: @blue;
+      --interactive-08: @blue;
+      --focus-border: @overlay2;
+      --divider-01: @overlay0;
+      --disabled: @overlay1;
+      --btn-filled-bg: @surface0;
+      --btn-filled-bg-hover: @surface1;
+      --btn-filled-text-active: @text;
+      --btn-filled-bg-active: @surface2;
+      --btn-filled-text-disabled: @overlay1;
+      --btn-outline-border: @overlay0;
+      --btn-outline-border-hover: @overlay1;
+      --btn-outline-text: @text;
+      --btn-outline-text-hover: @subtext1;
+      --btn-outline-text-active: @text;
+      --btn-outline-border-active: @overlay2;
+      --btn-outline-text-disabled: @overlay1;
+      --btn-icon-svg-hover: @subtext1;
+      --btn-icon-bg-hover: @surface1;
+      --btn-icon-svg-active: @text;
+      --code-bg-0: @base;
+      --code-border: @overlay0;
+      --code-color-1: @surface0;
+      --code-color-2: @text;
+      --code-color-3: @green;
+      --code-color-4: @blue;
+      --code-color-5: @pink;
+      --search-bgd-01: @overlay0;
+      --search-bgd-02: @base;
+      --search-bgd-03: @crust;
+      --search-bgd-04: @mantle;
+      --search-bgd-05: @base;
+      --search-bgd-06: @surface0;
+      --search-bgd-07: @mantle;
+      --search-bgd-08: @crust;
+      --search-line-01: @surface0;
+      --search-line-02: @subtext0;
+      --search-text-01: @text;
+      --search-text-02: @subtext1;
+      --search-text-03: @subtext0;
+      --search-text-04: @subtext0;
+      --search-text-05: @blue;
+      --search-text-06: @overlay0;
+      --search-text-09: @yellow;
+      --search-text-10: @peach;
+      --search-interactive-01: @blue;
+      --search-interactive-02: @mauve;
+      --search-interactive-03: @mauve;
+      --search-interactive-04: @sky;
+      --search-interactive-05: @mauve;
+      --gray-30: @base;
+      --gray-60: @surface0;
+      --gray-90: @overlay0;
+      --gray-110: @subtext0;
+      --gray-120: @text;
+      --secondary-90: @lavender;
+    }
+  }
+}
--- a/styles/cinny/README.md
+++ b/styles/cinny/README.md
@ -0,0 +1,56 @@
+<!-- AUTOGEN:README START -->
+<!-- THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND -->
+
+<h3 align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+  Catppuccin for <a href="https://github.com/cinnyapo/cinny">Cinny</a>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+</h3>
+
+<p align="center">
+	<a href="https://github.com/catppuccin/userstyles/issues?q=is%3Aissue+is+label%3Acinny"><img src="https://img.shields.io/github/issues/catppuccin/userstyles?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
+	<a href="https://raw.githubusercontent.com/catppuccin/userstyles/main/styles/cinny/catppuccin.user.css"><img src="https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f&style=for-the-badge"></a>
+</p>
+
+<p align="center">
+  <img src="assets/catwalk.webp"/>
+</p>
+
+## Previews
+
+<details>
+<summary>🌻 Latte</summary>
+<img src="assets/latte.webp"/>
+</details>
+<details>
+<summary>🪴 Frappé</summary>
+<img src="assets/frappe.webp"/>
+</details>
+<details>
+<summary>🌺 Macchiato</summary>
+<img src="assets/macchiato.webp"/>
+</details>
+<details>
+<summary>🌿 Mocha</summary>
+<img src="assets/mocha.webp"/>
+</details>
+
+
+
+
+
+## 💝 Current Maintainer(s)
+- [jan Sena](https://github.com/jn-sena)
+
+&nbsp;
+
+<p align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
+</p>
+
+<p align="center">
+	Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
+</p>
+
+<!-- AUTOGEN:README END -->
--- a/styles/cinny/assets/catwalk.webp
+++ b/styles/cinny/assets/catwalk.webp
--- a/styles/cinny/catppuccin.user.css
+++ b/styles/cinny/catppuccin.user.css
@ -0,0 +1,142 @@
+/* ==UserStyle==
+@name           Cinny Catppuccin
+@namespace      github.com/catppuccin/userstyles/styles/cinny
+@version        2.1.1
+@description    Soothing pastel theme for Cinny
+@author         Catppuccin
+@updateURL      https://github.com/catppuccin/userstyles/raw/main/styles/cinny/catppuccin.user.css
+
+@preprocessor   less
+@var select lightFlavor "Light Flavor" [ "latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha" ]
+@var select darkFlavor "Dark Flavor" [ "latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*" ]
+@var select accentColor "Accent Color" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue*", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray" ]
+==/UserStyle== */
+
+@-moz-document domain("cinny.in") {
+  /* prettier-ignore */
+  @catppuccin: {
+    @latte:     { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }
+    @frappe:    { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }
+    @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }
+    @mocha:     { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }
+  }
+
+  #catppuccin(@lookup, @accent) {
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @flamingo: @catppuccin[@@lookup][@flamingo];
+    @pink: @catppuccin[@@lookup][@pink];
+    @mauve: @catppuccin[@@lookup][@mauve];
+    @red: @catppuccin[@@lookup][@red];
+    @maroon: @catppuccin[@@lookup][@maroon];
+    @peach: @catppuccin[@@lookup][@peach];
+    @yellow: @catppuccin[@@lookup][@yellow];
+    @green: @catppuccin[@@lookup][@green];
+    @teal: @catppuccin[@@lookup][@teal];
+    @sky: @catppuccin[@@lookup][@sky];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @blue: @catppuccin[@@lookup][@blue];
+    @lavender: @catppuccin[@@lookup][@lavender];
+    @text: @catppuccin[@@lookup][@text];
+    @subtext1: @catppuccin[@@lookup][@subtext1];
+    @subtext0: @catppuccin[@@lookup][@subtext0];
+    @overlay2: @catppuccin[@@lookup][@overlay2];
+    @overlay1: @catppuccin[@@lookup][@overlay1];
+    @overlay0: @catppuccin[@@lookup][@overlay0];
+    @surface2: @catppuccin[@@lookup][@surface2];
+    @surface1: @catppuccin[@@lookup][@surface1];
+    @surface0: @catppuccin[@@lookup][@surface0];
+    @base: @catppuccin[@@lookup][@base];
+    @mantle: @catppuccin[@@lookup][@mantle];
+    @crust: @catppuccin[@@lookup][@crust];
+    @accentColor: @catppuccin[@@lookup][@@accent];
+
+    color-scheme: if(@lookup = latte, light, dark);
+
+    --bg-surface: @base;
+    --bg-surface-transparent: fadeout(@base, 100%);
+    --bg-surface-low: @mantle;
+    --bg-surface-low-transparent: fadeout(@mantle, 100%);
+    --bg-surface-extra-low: @crust;
+    --bg-surface-extra-low: fadeout(@crust, 100);
+
+    --bg-surface-hover: @surface0;
+    --bg-surface-active: @surface1;
+
+    --bg-primary: @accentColor;
+    --bg-primary-hover: fadeout(@accentColor, 20%);
+    --bg-primary-active: fadeout(@accentColor, 30%);
+    --bg-primary-border: fadeout(@accentColor, 62%);
+
+    --bg-tooltip: @surface0;
+    --bg-badge: @lavender;
+
+    --bg-positive: @green;
+    --bg-positive-hover: fadeout(@green, 92%);
+    --bg-positive-active: fadeout(@green, 85%);
+    --bg-positive-border: fadeout(@green, 60%);
+    --bg-caution: @peach;
+    --bg-caution-hover: fadeout(@peach, 92%);
+    --bg-caution-active: fadeout(@peach, 85%);
+    --bg-caution-border: fadeout(@peach, 60%);
+    --bg-danger: @maroon;
+    --bg-danger-hover: fadeout(@maroon, 95%);
+    --bg-danger-active: fadeout(@maroon, 90%);
+    --bg-danger-border: fadeout(@maroon, 80%);
+
+    --bg-ping: fadeout(@green, 60%);
+    --bg-ping-hover: fadeout(@green, 50%);
+
+    --tc-surface-high: @text;
+    --tc-surface-normal: @text;
+    --tc-surface-normal-low: @subtext1;
+    --tc-surface-low: @subtext0;
+    --tc-primary-high: @crust;
+    --tc-primary-normal: @text;
+    --tc-primary-low: @subtext1;
+
+    --tc-tooltip: @subtext0;
+    --tc-code: @mauve;
+    --tc-link: @rosewater;
+    --tc-badge: @crust;
+
+    --tc-positive-high: @green;
+    --tc-positive-normal: @green;
+    --tc-positive-low: @green;
+    --tc-caution-high: @peach;
+    --tc-caution-normal: @peach;
+    --tc-caution-low: @peach;
+    --tc-danger-high: @maroon;
+    --tc-danger-normal: @maroon;
+    --tc-danger-low: @maroon;
+
+    --ic-surface-high: @text;
+    --ic-surface-normal: @text;
+    --ic-surface-low: @subtext1;
+    --ic-primary-high: @text;
+    --ic-primary-normal: @crust;
+
+    --ic-positive-high: @green;
+    --ic-positive-normal: @maroon;
+    --ic-caution-high: @peach;
+    --ic-caution-normal: @peach;
+    --ic-danger-high: @maroon;
+    --ic-danger-normal: @maroon;
+
+    --mx-uc-1: @blue;
+    --mx-uc-2: @pink;
+    --mx-uc-3: @teal;
+    --mx-uc-4: @red;
+    --mx-uc-5: @peach;
+    --mx-uc-6: @sky;
+    --mx-uc-7: @mauve;
+    --mx-uc-8: @green;
+  }
+
+  :root, .silver-theme { #catppuccin(@lightFlavor, @accentColor); }
+  .dark-theme, .dark-theme .text, .butter-theme, .butter-theme .text { #catppuccin(@darkFlavor, @accentColor); }
+  @media (prefers-color-scheme: light) { .system-theme { #catppuccin(@lightFlavor, @accentColor); } }
+  @media (prefers-color-scheme: dark) { .system-theme, .system-theme .text { #catppuccin(@darkFlavor, @accentColor); } }
+} /* /@-moz-document */
+
+// vim:ft=less
--- a/styles/codeberg/README.md
+++ b/styles/codeberg/README.md
@ -0,0 +1,58 @@
+<!-- AUTOGEN:README START -->
+<!-- THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND -->
+
+<h3 align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+  Catppuccin for <a href="https://codeberg.org">Codeberg</a>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+</h3>
+
+<p align="center">
+	<a href="https://github.com/catppuccin/userstyles/issues?q=is%3Aissue+is+label%3Acodeberg"><img src="https://img.shields.io/github/issues/catppuccin/userstyles?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
+	<a href="https://raw.githubusercontent.com/catppuccin/userstyles/main/styles/codeberg/catppuccin.user.css"><img src="https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f&style=for-the-badge"></a>
+</p>
+
+<p align="center">
+  <img src="assets/catwalk.webp"/>
+</p>
+
+## Previews
+
+<details>
+<summary>🌻 Latte</summary>
+<img src="assets/latte.webp"/>
+</details>
+<details>
+<summary>🪴 Frappé</summary>
+<img src="assets/frappe.webp"/>
+</details>
+<details>
+<summary>🌺 Macchiato</summary>
+<img src="assets/macchiato.webp"/>
+</details>
+<details>
+<summary>🌿 Mocha</summary>
+<img src="assets/mocha.webp"/>
+</details>
+
+
+
+## 🙋 FAQ
+- Q: How do I change the accent color?  
+	A: Changing `--color-primary` to any other color should change the accent color in most places
+
+## 💝 Current Maintainer(s)
+- [justTOBBI](https://github.com/justTOBBI)
+
+&nbsp;
+
+<p align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
+</p>
+
+<p align="center">
+	Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
+</p>
+
+<!-- AUTOGEN:README END -->
--- a/styles/codeberg/assets/catwalk.webp
+++ b/styles/codeberg/assets/catwalk.webp
--- a/styles/codeberg/catppuccin.user.css
+++ b/styles/codeberg/catppuccin.user.css
@ -0,0 +1,528 @@
+/* ==UserStyle==
+@name           Catppuccin Codeberg
+@namespace      github.com/catppuccin/userstyles/styles/codeberg
+@version        1.0.2
+@description    Soothing pastel theme for Codeberg
+@author         Catppuccin
+@updateURL      https://github.com/catppuccin/userstyles/raw/main/styles/codeberg/catppuccin.user.css
+@preprocessor   stylus
+@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
+@var checkbox navbar-color "Use dark navbar-color" 0
+==/UserStyle== */
+
+@-moz-document domain("codeberg.org") {
+    if (theme=="Latte") {
+        $type = light
+        
+        $rosewater = hsl(10.8, 58.8%, 66.7%)
+        $flamingo  = hsl(0, 59.8%, 66.9%)
+        $pink      = hsl(316, 73.4%, 69%)
+        $mauve     = hsl(266, 85%, 58%)
+        $red       = hsl(347.1, 86.7%, 44.1%)
+        $maroon    = hsl(354.8, 76.3%, 58.6%)
+        $peach     = hsl(22, 99.2%, 52%)
+        $yellow    = hsl(34.9, 77%, 49.4%)
+        $green     = hsl(109.2, 57.6%, 39.8%)
+        $teal      = hsl(183.2, 73.9%, 34.5%)
+        $sky       = hsl(197.1, 96.6%, 45.7%)
+        $sapphire  = hsl(188.9, 70%, 41.8%)
+        $blue      = hsl(219.9, 91.5%, 53.9%)
+        $lavender  = hsl(230.9, 97.2%, 72%)
+        $text      = hsl(233.8, 16%, 35.5%)
+        $subtext1  = hsl(233.3, 12.8%, 41.4%)
+        $subtext0  = hsl(232.8, 10.4%, 47.3%)
+        $overlay2  = hsl(232.2, 9.6%, 53.1%)
+        $overlay1  = hsl(231.4, 10%, 59%)
+        $overlay0  = hsl(228, 11.2%, 65.1%)
+        $surface2  = hsl(226.7, 12.2%, 71%)
+        $surface1  = hsl(225, 13.6%, 76.9%)
+        $surface0  = hsl(222.9, 15.9%, 82.7%)
+        $base      = hsl(220, 23.1%, 94.9%)
+        $mantle    = hsl(220, 22%, 92%)
+        $crust     = hsl(220, 20.7%, 88.6%)
+    }
+    else if (theme=="Frappe") {
+        $type = dark
+        
+        $rosewater = hsl(10.3, 57.4%, 88%)
+        $flamingo  = hsl(0, 58.5%, 83.9%)
+        $pink      = hsl(316, 73.2%, 83.9%)
+        $mauve     = hsl(276.7, 59%, 76.1%)
+        $red       = hsl(358.8, 67.8%, 70.8%)
+        $maroon    = hsl(357.8, 65.9%, 75.9%)
+        $peach     = hsl(20.3, 79.1%, 70%)
+        $yellow    = hsl(39.5, 62%, 73.1%)
+        $green     = hsl(95.8, 43.9%, 67.8%)
+        $teal      = hsl(171.5, 39.2%, 64.5%)
+        $sky       = hsl(189.1, 47.8%, 72.9%)
+        $sapphire  = hsl(198.6, 55.4%, 69.2%)
+        $blue      = hsl(221.6, 74.2%, 74.1%)
+        $lavender  = hsl(238.9, 66.3%, 83.7%)
+        $text      = hsl(227.2, 70.1%, 86.9%)
+        $subtext1  = hsl(226.7, 43.7%, 79.8%)
+        $subtext0  = hsl(228.3, 29.5%, 72.7%)
+        $overlay2  = hsl(227.7, 22.3%, 65.7%)
+        $overlay1  = hsl(226.7, 17%, 58.4%)
+        $overlay0  = hsl(229.1, 13.4%, 51.6%)
+        $surface2  = hsl(228, 13.3%, 44.3%)
+        $surface1  = hsl(227.1, 14.7%, 37.3%)
+        $surface0  = hsl(230, 15.6%, 30.2%)
+        $base      = hsl(229.1, 18.6%, 23.1%)
+        $mantle    = hsl(230.5, 18.8%, 19.8%)
+        $crust     = hsl(229.4, 19.5%, 17.1%)
+    }
+    else if (theme=="Macchiato") {
+        $type = dark
+        
+        $rosewater = hsl(10, 57.7%, 89.8%)
+        $flamingo  = hsl(0, 58.3%, 85.9%)
+        $pink      = hsl(316.1, 73.7%, 85.1%)
+        $mauve     = hsl(266.5, 82.7%, 79.6%)
+        $red       = hsl(351.2, 73.9%, 72.9%)
+        $maroon    = hsl(355.1, 71.4%, 76.7%)
+        $peach     = hsl(21.4, 85.5%, 72.9%)
+        $yellow    = hsl(40.3, 69.9%, 77.8%)
+        $green     = hsl(105.2, 48.3%, 72%)
+        $teal      = hsl(171.1, 46.8%, 69%)
+        $sky       = hsl(188.8, 59.4%, 72.9%)
+        $sapphire  = hsl(198.6, 65.6%, 69.2%)
+        $blue      = hsl(220.2, 82.8%, 74.9%)
+        $lavender  = hsl(234.5, 82.3%, 84.5%)
+        $text      = hsl(227.4, 68.3%, 87.6%)
+        $subtext1  = hsl(228, 39.2%, 80%)
+        $subtext0  = hsl(227.4, 26.8%, 72.2%)
+        $overlay2  = hsl(228.3, 20%, 64.7%)
+        $overlay1  = hsl(227.6, 15.5%, 56.9%)
+        $overlay0  = hsl(230.3, 12.4%, 49.2%)
+        $surface2  = hsl(229.7, 13.7%, 41.4%)
+        $surface1  = hsl(231.1, 15.6%, 33.9%)
+        $surface0  = hsl(230.4, 18.8%, 26.1%)
+        $base      = hsl(231.8, 23.4%, 18.4%)
+        $mantle    = hsl(233.3, 23.1%, 15.3%)
+        $crust     = hsl(235.7, 22.6%, 12.2%)
+    }
+    else if (theme=="Mocha") {
+        $type = dark
+    
+        $rosewater = hsl(9.6, 55.6%, 91.2%)
+        $flamingo  = hsl(0, 58.7%, 87.6%)
+        $pink      = hsl(316.5, 71.8%, 86.1%)
+        $mauve     = hsl(267.4, 83.5%, 81%)
+        $red       = hsl(343.3, 81.2%, 74.9%)
+        $maroon    = hsl(350.4, 65.2%, 77.5%)
+        $peach     = hsl(23, 92%, 75.5%)
+        $yellow    = hsl(41.4, 86%, 83.1%)
+        $green     = hsl(115.5, 54.1%, 76.1%)
+        $teal      = hsl(170, 57.4%, 73.3%)
+        $sky       = hsl(189.2, 71%, 72.9%)
+        $sapphire  = hsl(198.5, 75.9%, 69%)
+        $lavender  = hsl(231.9, 97.4%, 85.1%)
+        $blue      = hsl(217.2, 91.9%, 75.9%)
+        $text      = hsl(226.2, 63.9%, 88%)
+        $subtext1  = hsl(226.7, 35.3%, 80%)
+        $subtext0  = hsl(227.6, 23.6%, 71.8%)
+        $overlay2  = hsl(228.4, 16.8%, 63.7%)
+        $overlay1  = hsl(229.7, 12.8%, 55.5%)
+        $overlay0  = hsl(230.8, 10.7%, 47.5%)
+        $surface2  = hsl(232.5, 12%, 39.2%)
+        $surface1  = hsl(234.3, 13.2%, 31.2%)
+        $surface0  = hsl(236.8, 16.2%, 22.9%)
+        $base      = hsl(240, 21.1%, 14.9%)
+        $mantle    = hsl(240, 21.3%, 12%)
+        $crust     = hsl(240, 22.7%, 8.6%)
+    }
+    
+    
+   :root {
+       --color-body: $base;
+       --color-text: $text;
+       --color-text-light: $subtext0;
+       --color-text-light-2: $subtext1;
+       --color-text-light-3: $subtext1;
+       --color-text-dark: $subtext0;
+       --color-text-dark-2: $subtext1;
+       --color-text-dark-3: $subtext1;
+       --color-secondary: $surface1;
+       --color-caret: $text;
+       --color-navbar: $surface0;
+       --color-footer: $surface0;
+       
+       --color-red: $red;
+       --color-orange: $peach;
+       --color-yellow: $yellow;
+       --color-olive: $green;
+       --color-green: $green;
+       --color-teal: $teal;
+       --color-blue: $blue;
+       --color-violet: $mauve;
+       --color-purple: $mauve;
+       --color-grey: $overlay0;
+       --color-gold: $yellow;
+       --color-red-light: $red;
+       --color-orange-light: $peach;
+       --color-yellow-light: $yellow;
+       --color-olive-light: $green;
+       --color-green-light: $green;
+       --color-teal-light: $teal;
+       --color-blue-light: $blue;
+       --color-violet-light: $mauve;
+       --color-purple-light: $mauve;
+       --color-grey-light: $overlay2;
+       --color-gold-light: $yellow;
+       --color-black: $crust;
+       --color-white: $text;
+       
+       --color-primary: $blue;
+       
+       --color-console-fg: $text;
+       --color-console-bg: $base;
+       
+       --color-error-border: $maroon;
+       --color-error-bg: $overlay0;
+       --color-error-text: $subtext1;
+       
+       --color-success-border: $green;
+       --color-success-bg: $overlay0;
+       --color-success-text: $subtext1;
+       
+       --color-warning-border: $orange;
+       --color-warning-bg: $overlay1;
+       --color-warning-text: $subtext1;
+       
+       --color-info-border: $overlay0;
+       --color-info-bg: $surface0;
+       --color-info-text: $subtext1;
+       
+       --color-box-header: $surface1;
+       --color-box-body: $surface0;
+       
+       --color-markup-code-block: $surface2;
+       
+       --color-input-background: $base;
+       --color-input-border: $surface1;
+       --color-input-text: $text;
+       
+       --color-card: $surface0;
+       
+       --color-active: $surface0;
+       --color-menu: $surface1;
+       
+       --color-button: $overlay0;
+       --color-light-border: $surface1;
+       --color-dark-border: $overlay0;
+       
+       --color-diff-removed-row-bg: rgba($red, 0.2)!important;
+       --color-diff-removed-row-border: rgba($red, 0.2)!important;
+       --color-diff-removed-word-bg: rgba($red, 0.4)!important;
+       
+       --color-diff-added-row-bg: rgba($green, 0.2)!important;
+       --color-diff-added-row-border: rgba($green, 0.2)!important;
+       --color-diff-added-word-bg: rgba($green, 0.4)!important;
+       
+       --color-diff-inactive: $surface1;
+       
+       --color-code-bg: $surface0;
+       --color-expand-button: $surface1;
+   }
+    
+    
+    body {
+        background-color: $base;
+        color: $text;
+        
+    }
+  
+    div#navbar.ui.container {
+        background-color: $blue !important;
+        color: $base !important;
+    }
+    
+    if navbar-color {
+        div#navbar.ui.container {
+            background-color: $mantle !important;
+            color: $text !important;
+        }
+    }
+
+    th,
+    textarea,
+    h4.ui.top.attached.error.header,
+    div.ui.red.message,
+    div.ui.segment.sub-menu.repository-menu,
+    nav.navbar,
+    div.sidebar,
+    div.sidebar-menu,
+    div.card,
+    div.menu.left.transition.visible,
+    div.menu.user-menu.left.transition.visible,
+    a.item.active
+    input,
+    div.ui.dropdown.icon.button,
+    div.ui.borderless.pagination.menu.narrow,
+    span.name,
+    blockquote.alert {
+        background-color: $mantle !important;
+        color: $text !important;
+        transition: 0.5s;
+    }
+    
+    div.extra.content.word-break,
+    td.name,
+    td.message,
+    td.text {
+        border-color: $surface1 !important;
+    }
+    
+    div.ui.top.attached.header.clearing.segment.pr.commit-header,
+    footer,
+    h1,
+    h3,
+    h4 {
+        background-color: $mantle !important;
+    }
+    
+    div.ui.compact.tiny.menu,
+    div.ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar,
+    div.ui.attached.segment,
+    div.ui.borderless.pagination.menu,
+    div.ui.two.item.tabable.menu,
+    div.ui.secondary.tiny.pointing.borderless.menu.center.grid.repos-filter,
+    div.header-wrapper,
+    div.ui.attached.segment.df.ac.sb.py-2.commit-header-row.fw,
+    div.file-view.markup.markdown,
+    div.ui.attached.segment.repos-search,
+    div.ui.attached.table.segment.rounded-bottom {
+        background-color: $base !important;
+    }
+    
+    span.ui.grey.label.ml-3,
+    div.ui.circular.mini.grey.label,
+    div.divider,
+    button.btn.btn-primary,
+    div.ui.language.bottom.floating.slide.up.dropdown.link.item.button {
+        background-color: $surface0 !important;
+    }
+    
+    tr {
+        background-color: $base !important;
+    }
+    
+    .blob-excerpt.lines-code {
+        background-color: $mantle !important;
+    }
+    .chroma.lines-code {
+        background-color: transparent !important;
+    }
+    .add-code {
+        background-color: alpha($green, 0.1) !important;
+    }
+    .added-code {
+        background-color: alpha($green, 0.15) !important;
+        color: $text !important;
+    }
+    .del-code {
+        background-color: alpha($red, 0.1) !important;
+    }
+    .removed-code {
+        background-color: alpha($red, 0.15) !important;
+        color: $text !important;
+    }
+    code.code-inner {
+        color: $overlay1 !important;
+    }
+    tr.tag-code.nl-0.ol-0, td.lines-num, td.lines-type-marker {
+        background-color: alpha($blue, 0.1) !important;
+    }
+    
+    kbd,
+    code {
+        background-color: transparent !important;
+        color: $text !important;
+    }
+    
+    span.c1 {
+        color: $overlay1 !important;
+    }
+    span.s1 {
+        color: $peach !important;
+    }
+    span.token.string,
+    span.s2 {
+        color: $green !important;
+    }
+    span.n {
+        color: $text !important;
+    }
+    span.o,
+    span.kc,
+    span.kd,
+    span.kr {
+        color: $red !important;
+    }
+    span.nf {
+        color: $blue !important;
+    }
+    span.token.function,
+    span.mi {
+        color: $teal !important;
+    }
+        
+    nav.navbar {
+        border: none !important;
+    }
+    
+    pre {
+        background-color: $mantle !important;
+        border-color: $blue !important;
+    }
+    
+    a.ui.primary.sha.label,
+    span.ui.primary.sha.label {
+        background-color: $mantle !important;
+    }
+    
+    h1,
+    a,
+    a.header-anchor,
+    a.item {
+        background-color: transparent !important;
+        color: $blue !important;
+        transition: 0.5s;
+    }
+    
+    a:hover,
+    a.item:hover,
+    span.name:hover {
+        background-color: transparent !important;
+        color: $green !important;
+        transition: 0.5s;
+    }
+        
+    .ui.table {
+        color: $text;
+    }
+    
+    .repository-summary {
+        background-color: $surface0;
+    }
+    
+    .ui.green.button {
+        background-color: $green;
+        color: $base;
+    }
+    
+    .ui.red.button {
+        background-color: $red;
+        color: $base;
+        border-color: $overlay0;
+    }
+    
+    .ui.basic.red.button {
+        color: $red;
+    }
+    
+    
+    .ui.negative.button {
+        background-color: $red;
+        color: $base;
+    }
+    
+    .ui.basic.green.button {
+        color: $green;
+    }
+    
+    .ui.breadcrumb {
+        color: $text;
+    }
+    
+    .following.bar #navbar {
+        background-color: $blue !important;
+        
+    }
+    
+    #navbar .item {
+        color: $surface0;
+    }
+   
+    
+    * {
+        caret-color: $text;
+    }
+    
+    @media (prefers-color-scheme: dark) {
+        .ui.red.label, .ui.red.labels .label {
+            background-color: $red!important;
+            border-color: $red!important;
+            color: $base!important;
+        }
+        .ui.green.label, .ui.green.labels, .ui.basic.green.label {
+            background-color: $green!important;
+            border-color: $green!important;
+            color: $base!important;
+        }
+        
+        .repository.file.list #repo-files-table tr {
+            background-color: $base;
+        }
+        .repository.file.list #repo-files-table tr:hover {
+            background-color: $surface1!important;
+        }
+        
+        .ui.horizontal.segments>.segment {
+            background-color: $surface0;
+        }
+        
+        .tag-code td.lines-type-marker, td.blob-hunk {
+             color: $text!important;
+        }
+        
+        .tag-code, .tag-code td {
+            background: $surface1!important;
+        }
+        
+        .tag-code td.lines-num {
+            background-color: $surface1!important;
+        }
+        
+        .chroma .sb {
+            color: $subtext1;
+        }
+        
+        .chroma .nt {
+            color: rgba($mauve, 0.7)!important;
+        }
+        
+        .chroma .na {
+            color: rgba($teal, 0.7)!important;
+        }
+        
+        .chroma .nb {
+            color: rgba($mauve, 0.7);
+        }
+        
+        .chroma .s2 {
+            color: rgba($teal, 0.7);
+        }
+        
+        .chroma .si {
+            color: rgba($peach, 0.6);
+        }
+        
+        .chroma .nv {
+            color: rgba($peach, 0.6);
+        }
+        
+        .chroma .nx {
+            color: $text;
+        }
+        
+        .chroma .nf {
+            color: $yellow;
+        }
+        
+        .chroma .s {
+            color: rgba($teal, 0.7);
+        }
+        
+    }
+}
--- a/styles/deepl/README.md
+++ b/styles/deepl/README.md
@ -0,0 +1,56 @@
+<!-- AUTOGEN:README START -->
+<!-- THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND -->
+
+<h3 align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+  Catppuccin for <a href="https://deepl.com">DeepL</a>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+</h3>
+
+<p align="center">
+	<a href="https://github.com/catppuccin/userstyles/issues?q=is%3Aissue+is+label%3Adeepl"><img src="https://img.shields.io/github/issues/catppuccin/userstyles?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
+	<a href="https://raw.githubusercontent.com/catppuccin/userstyles/main/styles/deepl/catppuccin.user.css"><img src="https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f&style=for-the-badge"></a>
+</p>
+
+<p align="center">
+  <img src="assets/catwalk.webp"/>
+</p>
+
+## Previews
+
+<details>
+<summary>🌻 Latte</summary>
+<img src="assets/latte.webp"/>
+</details>
+<details>
+<summary>🪴 Frappé</summary>
+<img src="assets/frappe.webp"/>
+</details>
+<details>
+<summary>🌺 Macchiato</summary>
+<img src="assets/macchiato.webp"/>
+</details>
+<details>
+<summary>🌿 Mocha</summary>
+<img src="assets/mocha.webp"/>
+</details>
+
+
+
+
+
+## 💝 Current Maintainer(s)
+- [Ren](https://github.com/watatomo)
+
+&nbsp;
+
+<p align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
+</p>
+
+<p align="center">
+	Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
+</p>
+
+<!-- AUTOGEN:README END -->
--- a/styles/deepl/assets/catwalk.webp
+++ b/styles/deepl/assets/catwalk.webp
--- a/styles/deepl/catppuccin.user.css
+++ b/styles/deepl/catppuccin.user.css
@ -0,0 +1,956 @@
+/* ==UserStyle==
+@name           DeepL Catppuccin
+@namespace      github.com/catppuccin/userstyles/styles/deepl
+@homepageURL    https://github.com/catppuccin/userstyles/tree/main/styles/deepl
+@version        0.2.1
+@description    Soothing pastel theme for DeepL
+@author         Catppuccin
+@updateURL      https://github.com/catppuccin/userstyles/raw/main/styles/deepl/catppuccin.user.css
+@preprocessor   less
+
+@var select theme "Flavour" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
+@var select accentColour "Accent"["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Grey"]
+
+@var checkbox quotes "Remove Quotes" 0
+@var checkbox header "Remove Header" 0
+@var checkbox footer "Remove Footer" 0
+@var checkbox tabs "Remove Tabs" 0
+@var checkbox dictionary "Remove Dictionary" 0
+@var checkbox removeAds "Remove DeepL Ads" 0
+@var checkbox removeGlossaryButton "Remove Glossary Button" 0
+==/UserStyle== */
+@-moz-document url-prefix("https://www.deepl.com/translator") {
+  :root {
+    #catppuccin(@theme, @accentColour);
+  }
+
+  @catppuccin: {
+    @latte: {
+      @rosewater: #dc8a78;
+      @flamingo: #dd7878;
+      @pink: #ea76cb;
+      @mauve: #8839ef;
+      @red: #d20f39;
+      @maroon: #e64553;
+      @peach: #fe640b;
+      @yellow: #df8e1d;
+      @green: #40a02b;
+      @teal: #179299;
+      @sky: #04a5e5;
+      @sapphire: #209fb5;
+      @blue: #1e66f5;
+      @lavender: #7287fd;
+      @text: #4c4f69;
+      @subtext1: #5c5f77;
+      @subtext0: #6c6f85;
+      @overlay2: #7c7f93;
+      @overlay1: #8c8fa1;
+      @overlay0: #9ca0b0;
+      @surface2: #acb0be;
+      @surface1: #bcc0cc;
+      @surface0: #ccd0da;
+      @base: #eff1f5;
+      @mantle: #e6e9ef;
+      @crust: #dce0e8;
+    }
+    @frappe: {
+      @rosewater: #f2d5cf;
+      @flamingo: #eebebe;
+      @pink: #f4b8e4;
+      @mauve: #ca9ee6;
+      @red: #e78284;
+      @maroon: #ea999c;
+      @peach: #ef9f76;
+      @yellow: #e5c890;
+      @green: #a6d189;
+      @teal: #81c8be;
+      @sky: #99d1db;
+      @sapphire: #85c1dc;
+      @blue: #8caaee;
+      @lavender: #babbf1;
+      @text: #c6d0f5;
+      @subtext1: #b5bfe2;
+      @subtext0: #a5adce;
+      @overlay2: #949cbb;
+      @overlay1: #838ba7;
+      @overlay0: #737994;
+      @surface2: #626880;
+      @surface1: #51576d;
+      @surface0: #414559;
+      @base: #303446;
+      @mantle: #292c3c;
+      @crust: #232634;
+    }
+    @macchiato: {
+      @rosewater: #f4dbd6;
+      @flamingo: #f0c6c6;
+      @pink: #f5bde6;
+      @mauve: #c6a0f6;
+      @red: #ed8796;
+      @maroon: #ee99a0;
+      @peach: #f5a97f;
+      @yellow: #eed49f;
+      @green: #a6da95;
+      @teal: #8bd5ca;
+      @sky: #91d7e3;
+      @sapphire: #7dc4e4;
+      @blue: #8aadf4;
+      @lavender: #b7bdf8;
+      @text: #cad3f5;
+      @subtext1: #b8c0e0;
+      @subtext0: #a5adcb;
+      @overlay2: #939ab7;
+      @overlay1: #8087a2;
+      @overlay0: #6e738d;
+      @surface2: #5b6078;
+      @surface1: #494d64;
+      @surface0: #363a4f;
+      @base: #24273a;
+      @mantle: #1e2030;
+      @crust: #181926;
+    }
+    @mocha: {
+      @rosewater: #f5e0dc;
+      @flamingo: #f2cdcd;
+      @pink: #f5c2e7;
+      @mauve: #cba6f7;
+      @red: #f38ba8;
+      @maroon: #eba0ac;
+      @peach: #fab387;
+      @yellow: #f9e2af;
+      @green: #a6e3a1;
+      @teal: #94e2d5;
+      @sky: #89dceb;
+      @sapphire: #74c7ec;
+      @blue: #89b4fa;
+      @lavender: #b4befe;
+      @text: #cdd6f4;
+      @subtext1: #bac2de;
+      @subtext0: #a6adc8;
+      @overlay2: #9399b2;
+      @overlay1: #7f849c;
+      @overlay0: #6c7086;
+      @surface2: #585b70;
+      @surface1: #45475a;
+      @surface0: #313244;
+      @base: #1e1e2e;
+      @mantle: #181825;
+      @crust: #11111b;
+    }
+  }
+
+  #catppuccin(@lookup, @accent) {
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @flamingo: @catppuccin[@@lookup][@flamingo];
+    @pink: @catppuccin[@@lookup][@pink];
+    @mauve: @catppuccin[@@lookup][@mauve];
+    @red: @catppuccin[@@lookup][@red];
+    @maroon: @catppuccin[@@lookup][@maroon];
+    @peach: @catppuccin[@@lookup][@peach];
+    @yellow: @catppuccin[@@lookup][@yellow];
+    @green: @catppuccin[@@lookup][@green];
+    @teal: @catppuccin[@@lookup][@teal];
+    @sky: @catppuccin[@@lookup][@sky];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @blue: @catppuccin[@@lookup][@blue];
+    @lavender: @catppuccin[@@lookup][@lavender];
+    @text: @catppuccin[@@lookup][@text];
+    @subtext1: @catppuccin[@@lookup][@subtext1];
+    @subtext0: @catppuccin[@@lookup][@subtext0];
+    @overlay2: @catppuccin[@@lookup][@overlay2];
+    @overlay1: @catppuccin[@@lookup][@overlay1];
+    @overlay0: @catppuccin[@@lookup][@overlay0];
+    @surface2: @catppuccin[@@lookup][@surface2];
+    @surface1: @catppuccin[@@lookup][@surface1];
+    @surface0: @catppuccin[@@lookup][@surface0];
+    @base: @catppuccin[@@lookup][@base];
+    @mantle: @catppuccin[@@lookup][@mantle];
+    @crust: @catppuccin[@@lookup][@crust];
+    @accent-colour: @catppuccin[@@lookup][@@accent];
+
+    @accent2: mix(@accent-colour, @text, 60%);
+
+    .dl_body {
+      color: @subtext1;
+    }
+
+    button {
+      color: @text;
+    }
+
+    [class*="label--"] {
+      & when (@lookup ="latte") {
+        --inlineLabelColor: #fff !important;
+      }
+      --inlineLabelColor: @crust;
+      --outline-color: @accent;
+      --background: @overlay1;
+      --backgroundHover: mix(@overlay1, @base, 90%);
+
+      &[class*="selected--"] {
+        --background: @green;
+        --backgroundHover: mix(@green, @base, 90%);
+      }
+
+      [class^="toggle--"] {
+        [class^="knob--"] {
+          & when (@lookup ="latte") {
+            background: #fff;
+          }
+          background: @crust;
+        }
+      }
+    }
+
+    [class^="wrapper--"] {
+      --input-background: @base;
+      --input-border-color: @surface1;
+      --input-color: @subtext1;
+      --button-background: @base;
+      --button-border-color: @surface1;
+      --button-color: @subtext1;
+
+      [class^="flyout--"] {
+        --option-color: @subtext1;
+        --option-icon-color: @accent;
+        background: @surface0;
+
+        [class^="option--"][class*="unavilable--"] {
+          --option-color: @overlay1;
+          --option-icon-color: @subtext0;
+        }
+
+        &[class*="withBorderOnFlyout--"] {
+          --border: 1px solid @surface2;
+        }
+      }
+    }
+
+    [class^="form--"] {
+      [class^="submit--"] {
+        & when (@lookup ="latte") {
+          color: @base;
+        }
+        color: @crust;
+        background: @accent2;
+
+        &:disabled {
+          background: fadeout(@accent2, 50%);
+        }
+      }
+    }
+
+    .text-deepl-blue {
+      color: @accent2;
+    }
+
+    .text-deprecated-grey-darker {
+      color: @subtext1;
+    }
+
+    .bg-white {
+      background-color: @base;
+    }
+
+    .border-dark-7 {
+      border-color: @surface1;
+    }
+
+    .dl_body--redesign {
+      background-color: @mantle !important;
+    }
+
+    [class*="button--"][class*="color_primary--"] {
+      border-color: @accent2;
+      background-color: @accent2;
+      color: @accent2;
+    }
+
+    [class*="button--"][class*="variant_contained--"],
+    .dark [class*="button--"][class*="variant_contained--"] {
+      & when (@lookup ="latte") {
+        color: #fff;
+      }
+      color: @crust;
+    }
+
+    [class*="button--"].variant_text--gozza,
+    .dark [class*="button--"].variant_text--gozza {
+      background-color: transparent;
+    } /////
+    .eSEOtericText {
+      color: @overlay1;
+    }
+
+    .dl_header {
+      &,
+      &::before {
+        background-color: @crust !important;
+      }
+    }
+
+    .dl_header_menu_v2__links__item {
+      &,
+      &:visited,
+      &:active,
+      &:focus {
+        color: @accent2;
+      }
+    }
+
+    .dl_headerMenu__proButton {
+      background-color: @accent-colour;
+      & when (@lookup ="latte") {
+        color: #fff;
+      }
+      color: @crust;
+      &:hover {
+        background-color: darken(@accent-colour, 30%);
+        & when (@lookup ="latte") {
+          color: #fff;
+        }
+        color: @crust;
+      }
+    }
+
+    .dl_header_menu_v2__login_button_simple > button {
+      color: @accent2;
+
+      &:hover {
+        color: @accent-colour;
+      }
+    }
+
+    .dl_header_menu_v2__buttons__menu > button {
+      &::before,
+      &::after {
+        color: @accent2;
+      }
+
+      &:hover {
+        &::before,
+        &::after {
+          color: @accent-colour;
+        }
+      }
+    }
+
+    .dl_headerMenu__freeBadge,
+    .dl_headerMenu__fadeoutBadge {
+      background-color: spin(@accent-colour, -40deg);
+      & when (@lookup ="latte") {
+        color: #fff;
+      }
+      color: @crust;
+    }
+
+    .dl_header_menu_v2__links__item.dl_translator_link:not(.nohover):hover {
+      color: @accent-colour;
+    }
+
+    .dl_header_menu_v2__links__item:not(.nohover):hover,
+    .dl_header_menu_v2__links__item.is-active {
+      border-bottom-color: @accent-colour;
+      color: @accent-colour;
+    }
+
+    #new-menu-container {
+      [class^="menuContainer--"] {
+        background-color: @base;
+      }
+
+      [class^="container--"] a {
+        color: @text;
+
+        &:hover {
+          color: @accent;
+        }
+      }
+
+      [class^="mainContent--"] + [class^="mainContent--"] {
+        border-top-color: @surface1;
+      }
+
+      [class^="closeButton"] {
+        &::before,
+        &::after {
+          background-color: @subtext0;
+        }
+
+        &:hover {
+          &::before,
+          &::after {
+            background-color: @accent-colour;
+          }
+        }
+      }
+    }
+    .lmt--web .lmt__language_container .lmt__language_container_switch:hover,
+    .lmt--web .lmt__language_container .lmt__language_container_switch:focus {
+      color: @accent-colour;
+    }
+
+    .lmt__docTrans-tab-container {
+      [class^="cardButton--"] {
+        background-color: @base;
+        border-color: @surface1;
+
+        &:not([class*="active--"]):hover {
+          background-color: @surface0;
+        }
+      }
+
+      [class^="textLower--"] {
+        color: @overlay2;
+      }
+
+      [class*="logo"],
+      [class^="textUpper--"] {
+        color: @accent-colour;
+      }
+
+      [class*="active--"] {
+        [class*="logo"],
+        [class^="textUpper--"] {
+          color: @text;
+        }
+
+        [class^="innerLower--"] {
+          background-color: @accent-colour;
+        }
+      }
+    }
+
+    .lmt--web .lmt__sides_container,
+    #doc-trans-source-panel,
+    #doc-trans-target-panel {
+      border-color: @surface1;
+    }
+
+    .integratedLanguageSelectors .lmt--web .lmt__sides_container .lmt__language_container,
+    .dl_body--redesign .lmt--web .lmt__textarea_container,
+    .lmt__doc .lmt__language_container #doc-trans-source-panel,
+    [class^="docTrans__help_popup--"],
+    #doc-trans-target-panel {
+      background: @base;
+    }
+
+    #doc-trans-source-panel,
+    #doc-trans-target-panel {
+      [class^="header--"] {
+        border-bottom-color: @surface2;
+      }
+    }
+
+    .dl_body--redesign .lmt--web .lmt__source_textarea__length_marker {
+      color: @subtext0;
+    }
+
+    .dl_help-popup_assist-text {
+      color: @overlay1;
+    }
+
+    .dl_body--redesign .lmt--web .lmt__language_select .lmt__language_select__active {
+      color: @subtext0;
+    }
+
+    .lmt--web .lmt__language_select > .lmt__language_select__active {
+      strong {
+        color: @accent2;
+      }
+
+      &:hover {
+        strong,
+        .lmt__language_select__opener {
+          color: @accent-colour;
+        }
+      }
+    }
+
+    .lmt--web .lmt__textarea {
+      &,
+      textarea {
+        color: @text;
+      }
+    }
+
+    .lmt--web .lmt__textarea.lmt__textarea--inactive {
+      color: @overlay2 !important;
+    }
+
+    .lmt__source_textarea_overlay .lmt__source_textarea_overlay__sentence--active {
+      color: @accent2;
+      background-color: @base;
+    }
+
+    .integratedLanguageSelectors .lmt--web .lmt__sides_container .lmt__side_container.lmt__side_container--source .lmt__textarea_container {
+      border-right-color: @surface1;
+      border-top-color: @surface1;
+    }
+
+    .integratedLanguageSelectors .lmt--web .lmt__sides_container .lmt__side_container.lmt__side_container--target .lmt__textarea_container {
+      border-top-color: @surface1 !important;
+    }
+
+    .lmt--showing_alternatives .lmt__translations_as_text::before,
+    .lmt--web .lmt__translations_as_text h4::before {
+      border-top-color: @surface1;
+    }
+
+    .lmt--web .lmt__translations_as_text h4 {
+      color: @overlay1;
+    }
+
+    .dl_body--redesign .lmt--web .lmt__textarea_container.lmt__textarea_container--focus,
+    .integratedLanguageSelectors .lmt--web .lmt__sides_container.lmt__sides_container--focus_source .lmt__side_container.lmt__side_container--source .lmt__textarea_container,
+    .integratedLanguageSelectors .lmt--web .lmt__sides_container.lmt__sides_container--focus_target .lmt__side_container.lmt__side_container--target .lmt__textarea_container {
+      border: 1px solid @accent-colour !important;
+    }
+
+    .lmt--web .lmt__language_container .lmt__language_container_switch {
+      color: @accent2;
+    }
+
+    @keyframes lmt_textarea__busy_animation_ctp {
+      0% {
+        box-shadow: inset 0 0 0px 0 @base, inset 0 0 0px 0px rgba(14, 43, 70, 0.0);
+      }
+
+      10% {
+        box-shadow: inset 0 0 0px 1px @base, inset 0 0 0px 2px rgba(14, 43, 70, 0.5);
+      }
+
+      20% {
+        box-shadow: inset 0 0 1px 3px @base, inset 0 0 1px 4px rgba(14, 43, 70, 0.5),
+      }
+
+      40% {
+        box-shadow: inset 0 0 1px 8px @base, inset 0 0 1px 8px rgba(14, 43, 70, 0.3),
+      }
+    }
+
+    .lmt--active_translation_request.lmt--active_translation_request--with_target_has_content .lmt__side_container--target .lmt__inner_textarea_container {
+      animation: lmt_textarea__busy_animation_ctp 1.5s 2.5s linear infinite;
+      box-shadow: inset 0 0 1px 14px @base, inset 0 0 0px rgba(0, 0, 0, 0);
+    }
+
+    .lmt__toolbar_container,
+    [data-testid="deepl-ui-tooltip-container"] {
+      span > button:hover {
+        background-color: fadeout(@text, 15%) !important;
+      }
+    }
+
+    .lmt__clear_text_button_wrapper {
+      [class*="button--"] {
+        &:active:enabled,
+        &:hover:enabled {
+          color: @accent-colour;
+        }
+      }
+    } // language selector
+    .lmt__language_select__menu.lmt__language_select__menu_three_columns {
+      &,
+      input {
+        background-color: @base;
+      }
+      border-color: @surface1;
+    }
+
+    .lmt__language_select__menu .lmt__dropdown_item_inside_container,
+    .lmt__language_select__menu .lmt__formalitySwitch__menu_items > div > button,
+    .lmt__language_select__menu .lmt__formalitySwitch__menu_items > div > div > button,
+    .lmt__language_select__menu > div > button,
+    .lmt__language_select__menu > div > div > button {
+      color: @subtext1;
+    }
+
+    .lmt__language_select__menu.lmt__language_select__menu_three_columns .lmt__language_wrapper .lmt__language_select_column button:hover,
+    .lmt__language_select__menu.lmt__language_select__menu_three_columns .lmt__language_wrapper .lmt__language_select_column button.highlighted {
+      background-color: fadeout(@yellow, 0.3);
+    }
+
+    .lmt__language_select__menu.lmt__language_select__menu_three_columns .lmt__language_wrapper .lmt__language_select_column {
+      border-right-color: @surface1;
+    }
+
+    .lmt--web .lmt__language_select__menu_three_columns_close_button {
+      color: @accent-colour;
+    }
+
+    .lmt__language_select__menu.lmt__language_select__menu_three_columns .lmt__language_wrapper .lmt__language_select_column button .tick {
+      border-bottom-color: @accent-colour;
+      border-right-color: @accent-colour;
+    } // glossary
+    .lmt__glossary_highlight {
+      color: @accent-colour;
+    }
+
+    .lmt__glossaryButton__desktop {
+      border-color: fadeout(@text, 12%)
+    }
+
+    .lmt__glossary_button .lmt__glossary_button_label:hover {
+      color: @accent-colour;
+    }
+
+    .lmt__glossary_editor_mainBar {
+      background-color: @accent-colour;
+      & when (@lookup ="latte") {
+        color: #fff;
+      }
+      color: @crust;
+
+      .lmt__glossary_editorClose {
+        & when (@lookup ="latte") {
+          color: #fff;
+        }
+        color: @crust;
+      }
+    }
+
+    [dl-test="glossary-modal"] {
+      input {
+        background-color: @surface1;
+      }
+
+      &[class*="modal--"] {
+        background-color: @surface0;
+      }
+
+      [class*="content--"] {
+        color: @text;
+      }
+    }
+
+    .lmt__glossary_newEntry_langButton {
+      color: @subtext1;
+
+      &:hover {
+        color: @accent-colour;
+      }
+    }
+
+    .lmt_firstEntry-content .lmt__glossary_newEntry_langButton .lmt__glossary_arrowDown {
+      border-bottom-color: @overlay2;
+      border-right-color: @overlay2;
+    }
+
+    .lmt_firstEntry-content .lmt__glossary_newEntry_inputSource,
+    .lmt_firstEntry-content .lmt__glossary_newEntry_inputTarget {
+      border-color: @overlay0;
+      color: @text;
+    }
+
+    .lmt_firstEntry-content .lmt__glossary_newEntry_langButton {
+      border-color: @overlay0;
+      background-color: @surface1;
+    }
+
+    .lmt_firstEntry-content .lmt__glossary_newEntry_inputSource:focus,
+    .lmt_firstEntry-content .lmt__glossary_newEntry_inputTarget:focus {
+      border-color: @accent-colour;
+    }
+
+    .lmt_firstEntry-content .lmt__glossary_acceptButton {
+      & when (@lookup ="latte") {
+        color: #fff;
+      }
+      color: @crust;
+    }
+
+    .lmt__glossary_acceptButton.lmt__glossary_acceptButton--disabled {
+      &,
+      &:hover {
+        background-color: fadeout(@accent-colour, 0.5);
+      }
+    }
+
+    .lmt__language_select__menu {
+      background-color: @surface1;
+    }
+
+    .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu button {
+      color: @text;
+
+      &:hover {
+        background-color: fadeout(@yellow, 0.2) !important;
+      }
+    }
+
+    .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu button .langName {
+      color: @text !important;
+    }
+
+    .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu button .langCodePair,
+    .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu button .langCodePair .langCode {
+      color: @subtext0;
+    }
+
+    .lmt__glossary_acceptButton {
+      background-color: @accent2;
+
+      &:hover {
+        background-color: @accent-colour;
+      }
+    }
+
+    .lmt__glossary_editor .lmt__glossary_editor_subBar_top .lmt__glossary_editor_glossarySelect .lmt__glossary_editor_glossaryNameWrapper .lmt__glossary_editor_glossaryName {
+      color: @text;
+    }
+
+    .lmt__glossary_editor .lmt__glossary_editor_subBar_top .lmt__glossary_editor_glossarySelect .lmt__glossary_editor_glossaryNameWrapper .lmt__glossary_editor_glossarySelectChevron.lmt__glossary_arrowDown {
+      border-bottom-color: @accent2;
+      border-right-color: @accent2;
+    }
+
+    .lmt__glossary_editor .lmt__glossary_editor_subBar_top,
+    .lmt__glossary_editor_subBar_bottom .lmt__glossary_editor [class^="form--"] {
+      background-color: @mantle;
+    }
+
+    .lmt__glossary_editor_subBar_bottom .lmt__glossary_editor_glossaryAddNewWrapper .lmt__glossary_editor_glossaryAddNew {
+      color: @accent-colour;
+    }
+
+    .lmt__glossary_editor {
+      background-color: @base;
+      color: @text;
+      border-color: @accent-colour;
+    }
+
+    .lmt__glossaryButton__desktop.switchedOn {
+      border-color: @accent-colour;
+    }
+
+    .lmt__glossary_editorRow_editMode .editInput {
+      border-color: @surface1;
+      color: @text;
+      background-color: @base;
+    }
+
+    .lmt__glossary_editor_checkmark {
+      & when (@lookup ="latte") {
+        border-bottom-color: @base;
+      }
+      border-bottom-color: @crust;
+      & when (@lookup ="latte") {
+        border-right-color: @base;
+      }
+      border-right-color: @crust;
+    }
+
+    .lmt__glossary_editor_langPairHeadline {
+      color: @text;
+      border-bottom-color: @surface1;
+    }
+
+    .lmt__glossary_editorRow {
+      color: @text;
+    }
+
+    .lmt__glossary_arrowRightWrapper .lmt__glossary_arrowRight {
+      border-bottom-color: @overlay1;
+      border-right-color: @overlay1;
+    }
+
+    .LanguagePair_arrow {
+      color: @overlay2;
+      stroke: @overlay2;
+    }
+
+    .lmt__glossary_dialog {
+      background-color: @surface0;
+      color: @text;
+      border-color: @surface2;
+    }
+
+    .lmt__glossary_editorRow .iconButton {
+      color: @text;
+    } /////
+    .combined_app_ad_mobile_and_desktop .dl_ad_pro_container,
+    .dl_pro__banner--2021--wrapper,
+    [class^="footerOuterContainer"],
+    .lmt_quote__inner {
+      background-color: @crust;
+    }
+
+    .lmt_quote__inner,
+    .lmt_quote__text,
+    .lmt_quote__source {
+      color: @subtext0;
+    }
+
+    .lmt_quote__source a {
+      color: @accent-colour;
+    } // popup
+    .lmt__edit_text_popup {
+      background-color: @surface1;
+    }
+
+    .lmt__edit_text_popup li,
+    .lmt__edit_text_popup .lmt__edit_text_list_item {
+      color: @subtext1;
+      border-color: @surface2;
+    }
+
+    .lmt__edit_text_popup .lmt__edit_text_popup__entry--active {
+      background-color: fadeout(@yellow, 0.3);
+    } // dictionary
+    #lmt__dict_container {
+      [class^="content--"] {
+        .tag_lemma a,
+        .isForeignTerm .tag_trans,
+        .isForeignTerm .tag_trans a .isForeignTerm .tag_t,
+        .tag_t a {
+          color: @accent-colour;
+        }
+
+        .sep {
+          color: @text;
+        }
+
+        .tag_trans {
+          color: @subtext1;
+        }
+
+        .notascommon {
+          color: @overlay1;
+        }
+      }
+
+      span > span > button:hover {
+        color: @accent-colour;
+      }
+    } // quotes
+    .lmt_quotes_nav_entry {
+      color: @overlay1;
+      background-color: @overlay0;
+    }
+
+    .lmt_quotes_nav_entry--active {
+      color: @accent-colour;
+      background-color: @accent-colour;
+    } // footer
+    .dl_footerV2_container {
+      [class*="linkList--"] li {
+        &:not(:first-of-type) a {
+          color: @accent2 !important; // idk why this isn't coloring
+        }
+
+        [class*="badge--"] {
+          background-color: spin(@accent-colour, -40deg) !important;
+          & when (@lookup ="latte") {
+            color: #fff;
+          }
+          color: @crust;
+        }
+      }
+    } /////
+    & when (@lookup ="latte") {
+      #dl_menu_logo img,
+      #dl_menu_translator_simplified img,
+      .lmt_quote .lmt_quote__logo,
+      .lmt_quote__inner::before,
+      [class^="docTrans__help_popup__container--"] [class^="supportedIcons--"] > div,
+      .dl_footerV2_container [class^="brandingContainer--"] a > img,
+      [class^="socialMediaContainer--"] a > img {
+        filter: invert(100%) hue-rotate(180deg);
+      }
+    } /////
+    // options
+    & when (@quotes =1) {
+      #dl_quotes_container {
+        display: none;
+      }
+    }
+
+    & when (@header=1) {
+      .dl_header {
+        display: none;
+      }
+    }
+
+    & when (@footer=1) {
+      .dl_footerV2_container,
+      .showSeoText .eSEOtericText {
+        display: none;
+      }
+    }
+
+    & when (@tabs=1) {
+      .lmt__doc {
+        margin-bottom: 0;
+
+        & Trans-tab-container {
+          display: none !important;
+          min-height: 100vh;
+        }
+      }
+
+      #lmt_quotes_article {
+        margin-top: 0;
+      }
+
+      .dl_translator_page_container {
+        align-items: center;
+        align-content: center;
+        justify-content: center;
+      }
+    }
+
+    & when (@dictionary=1) {
+      #lmt__dict_container {
+        display: none !important;
+      }
+    }
+
+    & when not (@quotes=@footer) {
+      .showSeoText .eSEOtericText {
+        margin-bottom: 70px;
+      }
+    }
+
+    & when (@footer =1),
+    (@header=1),
+    (@quotes=1) {
+      body {
+        display: flex;
+        flex-direction: column;
+        min-height: calc(100vh - 2em);
+        align-items: center;
+        align-content: center;
+        justify-content: center;
+      }
+
+      .dl_translator_page_container {
+        margin: 2em 0;
+
+        > * {
+          width: 100vw;
+        }
+      }
+    }
+
+    & when (@quotes=1),
+    (@header=1),
+    (@footer=1),
+    (@tabs=1) {
+      body {
+        min-height: 100vh;
+      }
+    }
+
+    & when (@removeAds=1) {
+      #lmt_pro_ad_container {
+        display: none;
+      }
+    }
+
+    & when (@removeGlossaryButton=1) {
+      .lmt__glossaryButton__desktop {
+        display: none;
+      }
+    }
+  }
+}
--- a/styles/elk/README.md
+++ b/styles/elk/README.md
@ -0,0 +1,56 @@
+<!-- AUTOGEN:README START -->
+<!-- THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND -->
+
+<h3 align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+  Catppuccin for <a href="https://elk.zone">Elk</a>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+</h3>
+
+<p align="center">
+	<a href="https://github.com/catppuccin/userstyles/issues?q=is%3Aissue+is+label%3Aelk"><img src="https://img.shields.io/github/issues/catppuccin/userstyles?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
+	<a href="https://raw.githubusercontent.com/catppuccin/userstyles/main/styles/elk/catppuccin.user.css"><img src="https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f&style=for-the-badge"></a>
+</p>
+
+<p align="center">
+  <img src="assets/catwalk.webp"/>
+</p>
+
+## Previews
+
+<details>
+<summary>🌻 Latte</summary>
+<img src="assets/latte.webp"/>
+</details>
+<details>
+<summary>🪴 Frappé</summary>
+<img src="assets/frappe.webp"/>
+</details>
+<details>
+<summary>🌺 Macchiato</summary>
+<img src="assets/macchiato.webp"/>
+</details>
+<details>
+<summary>🌿 Mocha</summary>
+<img src="assets/mocha.webp"/>
+</details>
+
+
+
+
+
+## 💝 Current Maintainer(s)
+- [Ryan Cao](https://github.com/ryanccn)
+
+&nbsp;
+
+<p align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
+</p>
+
+<p align="center">
+	Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
+</p>
+
+<!-- AUTOGEN:README END -->
--- a/styles/elk/assets/catwalk.webp
+++ b/styles/elk/assets/catwalk.webp
--- a/styles/elk/assets/frappe.webp
+++ b/styles/elk/assets/frappe.webp
--- a/styles/elk/assets/latte.webp
+++ b/styles/elk/assets/latte.webp
--- a/styles/elk/assets/macchiato.webp
+++ b/styles/elk/assets/macchiato.webp
--- a/styles/elk/assets/mocha.webp
+++ b/styles/elk/assets/mocha.webp
--- a/styles/elk/catppuccin.user.css
+++ b/styles/elk/catppuccin.user.css
@ -0,0 +1,236 @@
+/* ==UserStyle==
+@name           Elk Catppuccin
+@namespace      github.com/catppuccin/userstyles/styles/elk
+@version        0.2.0
+@description    Soothing pastel theme for Elk
+@author         Catppuccin
+@updateURL      https://github.com/catppuccin/userstyles/raw/main/styles/elk/catppuccin.user.css
+@preprocessor   less
+@var select theme "Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"]
+@var select accentColour "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey"]
+==/UserStyle== */
+@-moz-document domain("elk.zone") {
+
+  :root {
+    #catppuccin(@theme, @accentColour);
+  }
+
+  @catppuccin: {
+    @latte: {
+      @rosewater: #dc8a78;
+      @flamingo: #dd7878;
+      @pink: #ea76cb;
+      @mauve: #8839ef;
+      @red: #d20f39;
+      @maroon: #e64553;
+      @peach: #fe640b;
+      @yellow: #df8e1d;
+      @green: #40a02b;
+      @teal: #179299;
+      @sky: #04a5e5;
+      @sapphire: #209fb5;
+      @blue: #1e66f5;
+      @lavender: #7287fd;
+      @text: #4c4f69;
+      @subtext1: #5c5f77;
+      @subtext0: #6c6f85;
+      @overlay2: #7c7f93;
+      @overlay1: #8c8fa1;
+      @overlay0: #9ca0b0;
+      @surface2: #acb0be;
+      @surface1: #bcc0cc;
+      @surface0: #ccd0da;
+      @base: #eff1f5;
+      @mantle: #e6e9ef;
+      @crust: #dce0e8;
+    }
+    @frappe: {
+      @rosewater: #f2d5cf;
+      @flamingo: #eebebe;
+      @pink: #f4b8e4;
+      @mauve: #ca9ee6;
+      @red: #e78284;
+      @maroon: #ea999c;
+      @peach: #ef9f76;
+      @yellow: #e5c890;
+      @green: #a6d189;
+      @teal: #81c8be;
+      @sky: #99d1db;
+      @sapphire: #85c1dc;
+      @blue: #8caaee;
+      @lavender: #babbf1;
+      @text: #c6d0f5;
+      @subtext1: #b5bfe2;
+      @subtext0: #a5adce;
+      @overlay2: #949cbb;
+      @overlay1: #838ba7;
+      @overlay0: #737994;
+      @surface2: #626880;
+      @surface1: #51576d;
+      @surface0: #414559;
+      @base: #303446;
+      @mantle: #292c3c;
+      @crust: #232634;
+    }
+    @macchiato: {
+      @rosewater: #f4dbd6;
+      @flamingo: #f0c6c6;
+      @pink: #f5bde6;
+      @mauve: #c6a0f6;
+      @red: #ed8796;
+      @maroon: #ee99a0;
+      @peach: #f5a97f;
+      @yellow: #eed49f;
+      @green: #a6da95;
+      @teal: #8bd5ca;
+      @sky: #91d7e3;
+      @sapphire: #7dc4e4;
+      @blue: #8aadf4;
+      @lavender: #b7bdf8;
+      @text: #cad3f5;
+      @subtext1: #b8c0e0;
+      @subtext0: #a5adcb;
+      @overlay2: #939ab7;
+      @overlay1: #8087a2;
+      @overlay0: #6e738d;
+      @surface2: #5b6078;
+      @surface1: #494d64;
+      @surface0: #363a4f;
+      @base: #24273a;
+      @mantle: #1e2030;
+      @crust: #181926;
+    }
+    @mocha: {
+      @rosewater: #f5e0dc;
+      @flamingo: #f2cdcd;
+      @pink: #f5c2e7;
+      @mauve: #cba6f7;
+      @red: #f38ba8;
+      @maroon: #eba0ac;
+      @peach: #fab387;
+      @yellow: #f9e2af;
+      @green: #a6e3a1;
+      @teal: #94e2d5;
+      @sky: #89dceb;
+      @sapphire: #74c7ec;
+      @blue: #89b4fa;
+      @lavender: #b4befe;
+      @text: #cdd6f4;
+      @subtext1: #bac2de;
+      @subtext0: #a6adc8;
+      @overlay2: #9399b2;
+      @overlay1: #7f849c;
+      @overlay0: #6c7086;
+      @surface2: #585b70;
+      @surface1: #45475a;
+      @surface0: #313244;
+      @base: #1e1e2e;
+      @mantle: #181825;
+      @crust: #11111b;
+    }
+  }
+
+  #catppuccin(@lookup, @accent) {
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @flamingo: @catppuccin[@@lookup][@flamingo];
+    @pink: @catppuccin[@@lookup][@pink];
+    @mauve: @catppuccin[@@lookup][@mauve];
+    @red: @catppuccin[@@lookup][@red];
+    @maroon: @catppuccin[@@lookup][@maroon];
+    @peach: @catppuccin[@@lookup][@peach];
+    @yellow: @catppuccin[@@lookup][@yellow];
+    @green: @catppuccin[@@lookup][@green];
+    @teal: @catppuccin[@@lookup][@teal];
+    @sky: @catppuccin[@@lookup][@sky];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @blue: @catppuccin[@@lookup][@blue];
+    @lavender: @catppuccin[@@lookup][@lavender];
+    @text: @catppuccin[@@lookup][@text];
+    @subtext1: @catppuccin[@@lookup][@subtext1];
+    @subtext0: @catppuccin[@@lookup][@subtext0];
+    @overlay2: @catppuccin[@@lookup][@overlay2];
+    @overlay1: @catppuccin[@@lookup][@overlay1];
+    @overlay0: @catppuccin[@@lookup][@overlay0];
+    @surface2: @catppuccin[@@lookup][@surface2];
+    @surface1: @catppuccin[@@lookup][@surface1];
+    @surface0: @catppuccin[@@lookup][@surface0];
+    @base: @catppuccin[@@lookup][@base];
+    @mantle: @catppuccin[@@lookup][@mantle];
+    @crust: @catppuccin[@@lookup][@crust];
+    @accent-colour: @catppuccin[@@lookup][@@accent];
+
+    & {
+      --c-primary: @accent-colour !important;
+      --c-primary-active: lighten(@accent-colour, 10%) !important;
+      --c-primary-light: @surface0 !important;
+      --c-border: @surface0 !important;
+      --c-border-dark: @surface1 !important;
+      --c-bg-base: @base !important;
+      --rgb-bg-base: red(@mantle), green(@mantle), blue(@mantle) !important;
+      --c-bg-active: @surface0 !important;
+      --c-bg-code: @surface0 !important;
+      --c-bg-selection: @accent-colour !important;
+      --c-bg-fade: @surface0 !important;
+      --c-text-base: @text !important;
+      --c-text-code: @rosewater !important;
+      --c-text-secondary: @subtext0 !important;
+      --c-text-secondary-light: @subtext1 !important;
+      --c-bg-btn-disabled: @surface1 !important;
+      --c-text-btn-disabled: @text !important;
+      --c-text-btn: @text !important;
+      --c-success: @green !important;
+      --c-warning: @yellow !important;
+      --c-error: @red !important;
+      --c-danger: @red !important;
+      --c-danger-active: lighten(@red, 10%) !important;
+      --c-bg-dm: @surface0 !important;
+    }
+
+    ::selection {
+      color: white;
+    }
+
+    .btn-solid,
+    [btn-solid=""] {
+      color: var(--c-bg-base);
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: alpha(@surface1, 0.7);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: alpha(@surface1, 0.8);
+    }
+
+    [text-red],
+    [text-red-600],
+    [hover^="text-red"]:hover {
+      color: rgbA(red(@red), green(@red), blue(@red), var(--un-text-opacity));
+    }
+
+    [text-blue],
+    [hover^="text-blue"]:hover {
+      color: rgbA(red(@blue), green(@blue), blue(@blue), var(--un-text-opacity));
+    }
+
+    [text-green],
+    [hover^="text-green"]:hover {
+      color: rgbA(red(@green), green(@green), blue(@green), var(--un-text-opacity));
+    }
+
+    [text-yellow],
+    [hover^="text-yellow"]:hover {
+      color: rgbA(red(@yellow), green(@yellow), blue(@yellow), var(--un-text-opacity));
+    }
+
+    [text-purple],
+    [hover^="text-purple"]:hover {
+      color: rgbA(red(@lavender), green(@lavender), blue(@lavender), var(--un-text-opacity));
+    }
+
+    [group-hover^="bg-purple/10"]:hover {
+      background-color: alpha(@lavender, 0.1);
+    }
+  }
+}
--- a/styles/github/README.md
+++ b/styles/github/README.md
@ -0,0 +1,60 @@
+<!-- AUTOGEN:README START -->
+<!-- THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND -->
+
+<h3 align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+  Catppuccin for <a href="https://github.com">GitHub</a>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+</h3>
+
+<p align="center">
+	<a href="https://github.com/catppuccin/userstyles/issues?q=is%3Aissue+is+label%3Agithub"><img src="https://img.shields.io/github/issues/catppuccin/userstyles?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
+	<a href="https://raw.githubusercontent.com/catppuccin/userstyles/main/styles/github/catppuccin.user.css"><img src="https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f&style=for-the-badge"></a>
+</p>
+
+<p align="center">
+  <img src="assets/catwalk.webp"/>
+</p>
+
+## Previews
+
+<details>
+<summary>🌻 Latte</summary>
+<img src="assets/latte.webp"/>
+</details>
+<details>
+<summary>🪴 Frappé</summary>
+<img src="assets/frappe.webp"/>
+</details>
+<details>
+<summary>🌺 Macchiato</summary>
+<img src="assets/macchiato.webp"/>
+</details>
+<details>
+<summary>🌿 Mocha</summary>
+<img src="assets/mocha.webp"/>
+</details>
+
+
+
+
+
+## 💝 Current Maintainer(s)
+- [Pocco81](https://github.com/Pocco81)
+- [Umbreon](https://github.com/GlowingUmbreon)
+
+## 💖 Past Maintainer(s)
+- [Andreas Grafen](https://github.com/andreasgrafen)
+
+&nbsp;
+
+<p align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
+</p>
+
+<p align="center">
+	Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
+</p>
+
+<!-- AUTOGEN:README END -->
--- a/styles/github/assets/catwalk.webp
+++ b/styles/github/assets/catwalk.webp
--- a/styles/github/assets/frappe.webp
+++ b/styles/github/assets/frappe.webp
--- a/styles/github/assets/latte.webp
+++ b/styles/github/assets/latte.webp
--- a/styles/github/assets/macchiato.webp
+++ b/styles/github/assets/macchiato.webp
--- a/styles/github/assets/mocha.webp
+++ b/styles/github/assets/mocha.webp
--- a/styles/github/catppuccin.user.css
+++ b/styles/github/catppuccin.user.css
--- a/styles/hacker-news/README.md
+++ b/styles/hacker-news/README.md
@ -0,0 +1,56 @@
+<!-- AUTOGEN:README START -->
+<!-- THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND -->
+
+<h3 align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+  Catppuccin for <a href="https://news.ycombinator.com/">Hacker News</a>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+</h3>
+
+<p align="center">
+	<a href="https://github.com/catppuccin/userstyles/issues?q=is%3Aissue+is+label%3Ahacker-news"><img src="https://img.shields.io/github/issues/catppuccin/userstyles?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
+	<a href="https://raw.githubusercontent.com/catppuccin/userstyles/main/styles/hacker-news/catppuccin.user.css"><img src="https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f&style=for-the-badge"></a>
+</p>
+
+<p align="center">
+  <img src="assets/catwalk.webp"/>
+</p>
+
+## Previews
+
+<details>
+<summary>🌻 Latte</summary>
+<img src="assets/latte.webp"/>
+</details>
+<details>
+<summary>🪴 Frappé</summary>
+<img src="assets/frappe.webp"/>
+</details>
+<details>
+<summary>🌺 Macchiato</summary>
+<img src="assets/macchiato.webp"/>
+</details>
+<details>
+<summary>🌿 Mocha</summary>
+<img src="assets/mocha.webp"/>
+</details>
+
+
+
+
+
+## 💝 Current Maintainer(s)
+- [Lucas Melin](https://github.com/lucasmelin)
+
+&nbsp;
+
+<p align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
+</p>
+
+<p align="center">
+	Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
+</p>
+
+<!-- AUTOGEN:README END -->
--- a/styles/hacker-news/assets/catwalk.webp
+++ b/styles/hacker-news/assets/catwalk.webp
--- a/styles/hacker-news/assets/frappe.webp
+++ b/styles/hacker-news/assets/frappe.webp
--- a/styles/hacker-news/assets/latte.webp
+++ b/styles/hacker-news/assets/latte.webp
--- a/styles/hacker-news/assets/macchiato.webp
+++ b/styles/hacker-news/assets/macchiato.webp
--- a/styles/hacker-news/assets/mocha.webp
+++ b/styles/hacker-news/assets/mocha.webp
--- a/styles/hacker-news/catppuccin.user.css
+++ b/styles/hacker-news/catppuccin.user.css
@ -0,0 +1,299 @@
+/* ==UserStyle==
+@name           HackerNews Catppuccin
+@namespace      github.com/catppuccin/userstyles/styles/hacker-news
+@version        0.1.1
+@description    Soothing pastel theme for HackerNews
+@author         Catppuccin
+@updateURL      https://github.com/catppuccin/userstyles/raw/main/styles/hacker-news/catppuccin.user.css
+@preprocessor   less
+@var select theme "Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"]
+==/UserStyle== */
+@-moz-document url-prefix("https://news.ycombinator.com") {
+  @catppuccin: {
+    @latte: {
+      @rosewater: #dc8a78;
+      @flamingo: #dd7878;
+      @pink: #ea76cb;
+      @mauve: #8839ef;
+      @red: #d20f39;
+      @maroon: #e64553;
+      @peach: #fe640b;
+      @yellow: #df8e1d;
+      @green: #40a02b;
+      @teal: #179299;
+      @sky: #04a5e5;
+      @sapphire: #209fb5;
+      @blue: #1e66f5;
+      @lavender: #7287fd;
+      @text: #4c4f69;
+      @subtext1: #5c5f77;
+      @subtext0: #6c6f85;
+      @overlay2: #7c7f93;
+      @overlay1: #8c8fa1;
+      @overlay0: #9ca0b0;
+      @surface2: #acb0be;
+      @surface1: #bcc0cc;
+      @surface0: #ccd0da;
+      @base: #eff1f5;
+      @mantle: #e6e9ef;
+      @crust: #dce0e8;
+    }
+    @frappe: {
+      @rosewater: #f2d5cf;
+      @flamingo: #eebebe;
+      @pink: #f4b8e4;
+      @mauve: #ca9ee6;
+      @red: #e78284;
+      @maroon: #ea999c;
+      @peach: #ef9f76;
+      @yellow: #e5c890;
+      @green: #a6d189;
+      @teal: #81c8be;
+      @sky: #99d1db;
+      @sapphire: #85c1dc;
+      @blue: #8caaee;
+      @lavender: #babbf1;
+      @text: #c6d0f5;
+      @subtext1: #b5bfe2;
+      @subtext0: #a5adce;
+      @overlay2: #949cbb;
+      @overlay1: #838ba7;
+      @overlay0: #737994;
+      @surface2: #626880;
+      @surface1: #51576d;
+      @surface0: #414559;
+      @base: #303446;
+      @mantle: #292c3c;
+      @crust: #232634;
+    }
+    @macchiato: {
+      @rosewater: #f4dbd6;
+      @flamingo: #f0c6c6;
+      @pink: #f5bde6;
+      @mauve: #c6a0f6;
+      @red: #ed8796;
+      @maroon: #ee99a0;
+      @peach: #f5a97f;
+      @yellow: #eed49f;
+      @green: #a6da95;
+      @teal: #8bd5ca;
+      @sky: #91d7e3;
+      @sapphire: #7dc4e4;
+      @blue: #8aadf4;
+      @lavender: #b7bdf8;
+      @text: #cad3f5;
+      @subtext1: #b8c0e0;
+      @subtext0: #a5adcb;
+      @overlay2: #939ab7;
+      @overlay1: #8087a2;
+      @overlay0: #6e738d;
+      @surface2: #5b6078;
+      @surface1: #494d64;
+      @surface0: #363a4f;
+      @base: #24273a;
+      @mantle: #1e2030;
+      @crust: #181926;
+    }
+    @mocha: {
+      @rosewater: #f5e0dc;
+      @flamingo: #f2cdcd;
+      @pink: #f5c2e7;
+      @mauve: #cba6f7;
+      @red: #f38ba8;
+      @maroon: #eba0ac;
+      @peach: #fab387;
+      @yellow: #f9e2af;
+      @green: #a6e3a1;
+      @teal: #94e2d5;
+      @sky: #89dceb;
+      @sapphire: #74c7ec;
+      @blue: #89b4fa;
+      @lavender: #b4befe;
+      @text: #cdd6f4;
+      @subtext1: #bac2de;
+      @subtext0: #a6adc8;
+      @overlay2: #9399b2;
+      @overlay1: #7f849c;
+      @overlay0: #6c7086;
+      @surface2: #585b70;
+      @surface1: #45475a;
+      @surface0: #313244;
+      @base: #1e1e2e;
+      @mantle: #181825;
+      @crust: #11111b;
+    }
+  }
+
+  #catppuccin(@theme);
+
+  #catppuccin(@lookup) {
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @flamingo: @catppuccin[@@lookup][@flamingo];
+    @pink: @catppuccin[@@lookup][@pink];
+    @mauve: @catppuccin[@@lookup][@mauve];
+    @red: @catppuccin[@@lookup][@red];
+    @maroon: @catppuccin[@@lookup][@maroon];
+    @peach: @catppuccin[@@lookup][@peach];
+    @yellow: @catppuccin[@@lookup][@yellow];
+    @green: @catppuccin[@@lookup][@green];
+    @teal: @catppuccin[@@lookup][@teal];
+    @sky: @catppuccin[@@lookup][@sky];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @blue: @catppuccin[@@lookup][@blue];
+    @lavender: @catppuccin[@@lookup][@lavender];
+    @text: @catppuccin[@@lookup][@text];
+    @subtext1: @catppuccin[@@lookup][@subtext1];
+    @subtext0: @catppuccin[@@lookup][@subtext0];
+    @overlay2: @catppuccin[@@lookup][@overlay2];
+    @overlay1: @catppuccin[@@lookup][@overlay1];
+    @overlay0: @catppuccin[@@lookup][@overlay0];
+    @surface2: @catppuccin[@@lookup][@surface2];
+    @surface1: @catppuccin[@@lookup][@surface1];
+    @surface0: @catppuccin[@@lookup][@surface0];
+    @base: @catppuccin[@@lookup][@base];
+    @mantle: @catppuccin[@@lookup][@mantle];
+    @crust: @catppuccin[@@lookup][@crust];
+
+    /* Main background */
+    #hnmain {
+      background-color: @base;
+    }
+    /* Main body padding background */
+    body {
+      background-color: @base;
+    }
+
+
+    /* Background of the FAQ and main page */
+    body > center > table > tbody > tr > td {
+      background-color: @base;
+      color: @text;
+    }
+
+
+
+    /* Top bar */
+    #hnmain > tbody > tr:nth-child(1) > td {
+      background-color: @peach;
+    }
+
+    /* Hacker News text in top bar */
+    #hnmain > tbody > tr:nth-child(1) > td > table > tbody > tr > td:nth-child(2) > span > b > a {
+      color: @surface0;
+    }
+
+    /* Logged-in user karma */
+    #karma {
+      color: @surface1;
+    }
+
+    /* Separator characters around logged-in user karma */
+    #hnmain > tbody > tr:nth-child(1) > td > table > tbody > tr > td:nth-child(3) > span {
+      color: @surface1;
+    }
+
+    /* Visited top bar links */
+    .pagetop a:visited {
+      color: @surface1;
+    }
+
+    /* Unvisited top bar links */
+    .pagetop a:link {
+      color: @surface0;
+    }
+
+    /* Links */
+    a:link {
+      color: @blue;
+    }
+
+    /* More link */
+    .hnmore a:link,
+    a:visited {
+      color: @lavender;
+    }
+
+    /* New user color */
+    .hnuser > font {
+      color: @green;
+    }
+
+    /* Story site link */
+    .comhead a:link,
+    .subtext a:visited {
+      color: @peach;
+    }
+
+    /* Story points */
+    .score {
+      color: @subtext0;
+    }
+
+    /* Story ranking number */
+    .title {
+      color: @lavender;
+    }
+
+    /* Comment text */
+    .commtext {
+      color: @text;
+    }
+
+    /* Comment hyperlinks */
+    .commtext a:link {
+      color: @sapphire;
+    }
+
+    /* Comment box */
+    textarea,
+    input {
+      background-color: @surface0;
+      color: @text;
+      border-color: @teal;
+    }
+
+    /* Poll questions */
+    td.comment > div > font {
+      color: @text;
+    }
+
+    /* Bottom footer separator bar */
+    #hnmain > tbody > tr:nth-child(4) > td > table > tbody > tr > td {
+      background-color: @base;
+    }
+
+    /* Search bar text field */
+    #hnmain > tbody > tr:nth-child(4) > td > center:nth-child(6) > form > input[type=text] {
+      background-color: @surface0;
+    }
+
+    /* Search bar text  */
+    #hnmain > tbody > tr:nth-child(4) > td > center:nth-child(6) > form {
+      color: @text;
+    }
+
+    /* FAQ Questions */
+    body > center > table > tbody > tr > td > p > b {
+      color: @subtext1;
+    }
+
+    /* FAQ Header */
+    body > center > table > tbody > tr > td > b {
+      color: @subtext1;
+    }
+
+    /* Text post content */
+    .toptext {
+      color: @text;
+    }
+
+    /* Replace vote arrow with svg arrow and mask */
+    .votearrow {
+      background-image: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' %5B %3C!ENTITY ns_svg 'http://www.w3.org/2000/svg'%3E%3C!ENTITY ns_xlink 'http://www.w3.org/1999/xlink'%3E%0A%5D%3E%3Csvg xmlns='&ns_svg;' width='10' height='10' viewBox='0 0 10 10' fill-opacity='0' xml:space='preserve'%3E%3Cpolygon points='0,10 5,1 10,10 '/%3E%3C/svg%3E%0A");
+      -webkit-mask-image: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' %5B %3C!ENTITY ns_svg 'http://www.w3.org/2000/svg'%3E%3C!ENTITY ns_xlink 'http://www.w3.org/1999/xlink'%3E%0A%5D%3E%3Csvg xmlns='&ns_svg;' width='10' height='10' viewBox='0 0 10 10' fill='black' xml:space='preserve'%3E%3Cpolygon points='0,10 5,1 10,10 '/%3E%3C/svg%3E%0A");
+      mask-image: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' %5B %3C!ENTITY ns_svg 'http://www.w3.org/2000/svg'%3E%3C!ENTITY ns_xlink 'http://www.w3.org/1999/xlink'%3E%0A%5D%3E%3Csvg xmlns='&ns_svg;' width='10' height='10' viewBox='0 0 10 10' fill='black' xml:space='preserve'%3E%3Cpolygon points='0,10 5,1 10,10 '/%3E%3C/svg%3E%0A");
+      background-color: @subtext0;
+      height: 8;
+    }
+  }
+}
--- a/styles/ichi.moe/README.md
+++ b/styles/ichi.moe/README.md
@ -0,0 +1,56 @@
+<!-- AUTOGEN:README START -->
+<!-- THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND -->
+
+<h3 align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+  Catppuccin for <a href="https://ichi.moe">ichi.moe</a>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+</h3>
+
+<p align="center">
+	<a href="https://github.com/catppuccin/userstyles/issues?q=is%3Aissue+is+label%3Aichi.moe"><img src="https://img.shields.io/github/issues/catppuccin/userstyles?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
+	<a href="https://raw.githubusercontent.com/catppuccin/userstyles/main/styles/ichi.moe/catppuccin.user.css"><img src="https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f&style=for-the-badge"></a>
+</p>
+
+<p align="center">
+  <img src="assets/catwalk.webp"/>
+</p>
+
+## Previews
+
+<details>
+<summary>🌻 Latte</summary>
+<img src="assets/latte.webp"/>
+</details>
+<details>
+<summary>🪴 Frappé</summary>
+<img src="assets/frappe.webp"/>
+</details>
+<details>
+<summary>🌺 Macchiato</summary>
+<img src="assets/macchiato.webp"/>
+</details>
+<details>
+<summary>🌿 Mocha</summary>
+<img src="assets/mocha.webp"/>
+</details>
+
+
+
+
+
+## 💝 Current Maintainer(s)
+- [Ren](https://github.com/watatomo)
+
+&nbsp;
+
+<p align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
+</p>
+
+<p align="center">
+	Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
+</p>
+
+<!-- AUTOGEN:README END -->
--- a/styles/ichi.moe/assets/catwalk.webp
+++ b/styles/ichi.moe/assets/catwalk.webp
--- a/styles/ichi.moe/catppuccin.user.css
+++ b/styles/ichi.moe/catppuccin.user.css
@ -0,0 +1,546 @@
+/* ==UserStyle==
+@name           ichi.moe Catppuccin
+@namespace      github.com/catppuccin/userstyles/styles/ichi.moe
+@homepageURL    https://github.com/catppuccin/userstyles/tree/main/styles/ichi.moe
+@version        1.1.1
+@description    Soothing pastel theme for ichi.moe
+@author         Catppuccin
+@updateURL      https://github.com/catppuccin/userstyles/raw/main/styles/ichi.moe/catppuccin.user.css
+@preprocessor   less
+@var select theme "Flavour" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
+@var checkbox zen "Zen Mode" 0
+==/UserStyle== */
+@-moz-document domain("ichi.moe") {
+  :root {
+    #catppuccin(@theme);
+  }
+
+  @catppuccin: {
+    @latte: {
+      @rosewater: #dc8a78;
+      @flamingo: #dd7878;
+      @pink: #ea76cb;
+      @mauve: #8839ef;
+      @red: #d20f39;
+      @maroon: #e64553;
+      @peach: #fe640b;
+      @yellow: #df8e1d;
+      @green: #40a02b;
+      @teal: #179299;
+      @sky: #04a5e5;
+      @sapphire: #209fb5;
+      @blue: #1e66f5;
+      @lavender: #7287fd;
+      @text: #4c4f69;
+      @subtext1: #5c5f77;
+      @subtext0: #6c6f85;
+      @overlay2: #7c7f93;
+      @overlay1: #8c8fa1;
+      @overlay0: #9ca0b0;
+      @surface2: #acb0be;
+      @surface1: #bcc0cc;
+      @surface0: #ccd0da;
+      @base: #eff1f5;
+      @mantle: #e6e9ef;
+      @crust: #dce0e8;
+    }
+    @frappe: {
+      @rosewater: #f2d5cf;
+      @flamingo: #eebebe;
+      @pink: #f4b8e4;
+      @mauve: #ca9ee6;
+      @red: #e78284;
+      @maroon: #ea999c;
+      @peach: #ef9f76;
+      @yellow: #e5c890;
+      @green: #a6d189;
+      @teal: #81c8be;
+      @sky: #99d1db;
+      @sapphire: #85c1dc;
+      @blue: #8caaee;
+      @lavender: #babbf1;
+      @text: #c6d0f5;
+      @subtext1: #b5bfe2;
+      @subtext0: #a5adce;
+      @overlay2: #949cbb;
+      @overlay1: #838ba7;
+      @overlay0: #737994;
+      @surface2: #626880;
+      @surface1: #51576d;
+      @surface0: #414559;
+      @base: #303446;
+      @mantle: #292c3c;
+      @crust: #232634;
+    }
+    @macchiato: {
+      @rosewater: #f4dbd6;
+      @flamingo: #f0c6c6;
+      @pink: #f5bde6;
+      @mauve: #c6a0f6;
+      @red: #ed8796;
+      @maroon: #ee99a0;
+      @peach: #f5a97f;
+      @yellow: #eed49f;
+      @green: #a6da95;
+      @teal: #8bd5ca;
+      @sky: #91d7e3;
+      @sapphire: #7dc4e4;
+      @blue: #8aadf4;
+      @lavender: #b7bdf8;
+      @text: #cad3f5;
+      @subtext1: #b8c0e0;
+      @subtext0: #a5adcb;
+      @overlay2: #939ab7;
+      @overlay1: #8087a2;
+      @overlay0: #6e738d;
+      @surface2: #5b6078;
+      @surface1: #494d64;
+      @surface0: #363a4f;
+      @base: #24273a;
+      @mantle: #1e2030;
+      @crust: #181926;
+    }
+    @mocha: {
+      @rosewater: #f5e0dc;
+      @flamingo: #f2cdcd;
+      @pink: #f5c2e7;
+      @mauve: #cba6f7;
+      @red: #f38ba8;
+      @maroon: #eba0ac;
+      @peach: #fab387;
+      @yellow: #f9e2af;
+      @green: #a6e3a1;
+      @teal: #94e2d5;
+      @sky: #89dceb;
+      @sapphire: #74c7ec;
+      @blue: #89b4fa;
+      @lavender: #b4befe;
+      @text: #cdd6f4;
+      @subtext1: #bac2de;
+      @subtext0: #a6adc8;
+      @overlay2: #9399b2;
+      @overlay1: #7f849c;
+      @overlay0: #6c7086;
+      @surface2: #585b70;
+      @surface1: #45475a;
+      @surface0: #313244;
+      @base: #1e1e2e;
+      @mantle: #181825;
+      @crust: #11111b;
+    }
+  }
+
+  #catppuccin(@lookup) {
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @flamingo: @catppuccin[@@lookup][@flamingo];
+    @pink: @catppuccin[@@lookup][@pink];
+    @mauve: @catppuccin[@@lookup][@mauve];
+    @red: @catppuccin[@@lookup][@red];
+    @maroon: @catppuccin[@@lookup][@maroon];
+    @peach: @catppuccin[@@lookup][@peach];
+    @yellow: @catppuccin[@@lookup][@yellow];
+    @green: @catppuccin[@@lookup][@green];
+    @teal: @catppuccin[@@lookup][@teal];
+    @sky: @catppuccin[@@lookup][@sky];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @blue: @catppuccin[@@lookup][@blue];
+    @lavender: @catppuccin[@@lookup][@lavender];
+    @text: @catppuccin[@@lookup][@text];
+    @subtext1: @catppuccin[@@lookup][@subtext1];
+    @subtext0: @catppuccin[@@lookup][@subtext0];
+    @overlay2: @catppuccin[@@lookup][@overlay2];
+    @overlay1: @catppuccin[@@lookup][@overlay1];
+    @overlay0: @catppuccin[@@lookup][@overlay0];
+    @surface2: @catppuccin[@@lookup][@surface2];
+    @surface1: @catppuccin[@@lookup][@surface1];
+    @surface0: @catppuccin[@@lookup][@surface0];
+    @base: @catppuccin[@@lookup][@base];
+    @mantle: @catppuccin[@@lookup][@mantle];
+    @crust: @catppuccin[@@lookup][@crust];
+
+    html,
+    body {
+      & when (@lookup ="latte") {
+        background: @mantle;
+      }
+      background: @base;
+      color: @text;
+    }
+
+    footer {
+      color: @subtext1;
+    }
+
+    span.query-word:hover {
+      border-color: @pink;
+    }
+
+    span.query-pick {
+      color: @subtext1;
+    }
+
+    .panel-error {
+      background-color: fadeout(@red, 0.2);
+    }
+
+    .highlight {
+      background-color: fadeout(@yellow, 0.2);
+    }
+
+    .gloss {
+      & when (@lookup ="latte") {
+        background-color: @base;
+        border-color: @surface2;
+      }
+      background-color: @surface0;
+      border-color: @overlay0;
+    }
+
+    .gloss-rtext {
+      & when (@lookup ="latte") {
+        border-color: @surface2;
+      }
+      border-color: @overlay0;
+    }
+
+    .gloss:target {
+      & when (@lookup ="latte") {
+        box-shadow: 0 0 5px @surface2;
+        -webkit-box-shadow: 0 0 5px @surface2;
+        -moz-box-shadow: 0 0 5px @surface2;
+      }
+      box-shadow: 0 0 5px @overlay0;
+      -webkit-box-shadow: 0 0 5px @overlay0;
+      -moz-box-shadow: 0 0 5px @overlay0;
+    }
+
+    a {
+      color: @sapphire;
+    }
+
+    a.wiktionary-link {
+      color: @text;
+    }
+
+    a.info-link {
+      color: @text;
+    }
+
+    a.info-link:hover {
+      border-bottom: 1px dashed @sapphire;
+    }
+
+    .note-skipped a {
+      color: @subtext1;
+    }
+
+    .note-skipped a:hover {
+      border-color: @subtext1;
+    }
+
+    .jspDrag {
+      background-color: @lavender;
+    }
+
+    .conj-negative {
+      color: @red;
+    }
+
+    .conj-formal {
+      color: @blue;
+    }
+
+    .pos-desc {
+      color: @green;
+    }
+
+    .kanji-table td {
+      & when (@lookup ="latte") {
+        border: 1px solid @surface1;
+      }
+      border: 1px solid @surface0;
+    }
+
+    .reading-table tr:nth-of-type(2n) {
+      & when (@lookup ="latte") {
+        background: fadeout(@surface0, 0.5);
+      }
+      background: fadeout(@surface1, 0.5);
+    }
+
+    .reading-table tr ~ tr > td {
+      & when (@lookup ="latte") {
+        border-top: 1px solid @surface2;
+      }
+      border-top: 1px solid @overlay0;
+    }
+
+    table.kanji-match td {
+      & when (@lookup ="latte") {
+        border-right: 1px solid @surface2;
+      }
+      border-right: 1px solid @overlay0;
+    }
+
+    table.kanji-match tr:nth-of-type(2n) {
+      & when (@lookup ="latte") {
+        background: fadeout(@surface0, 0.5);
+      }
+      background: fadeout(@surface1, 0.5);
+    }
+
+    tr.match-row-kanji,
+    tr.match-row-reading {
+      & when (@lookup ="latte") {
+        border-bottom: 1px solid @surface2;
+      }
+      border-bottom: 1px solid @overlay0;
+    }
+
+    .kanji-big a {
+      color: @subtext1;
+    }
+
+    .autocomplete-suggestions {
+      & when (@lookup ="latte") {
+        background: @base;
+        border: 1px solid @surface2;
+      }
+      background: @surface0;
+      border: 1px solid @overlay0;
+    }
+
+    .autocomplete-selected {
+      & when (@lookup ="latte") {
+        background: @base;
+      }
+      background: @surface0;
+    }
+
+    .autocomplete-suggestions strong {
+      color: @lavender;
+    }
+
+    .autocomplete-group strong {
+      border-bottom: 1px solid @text;
+    }
+
+    .button {
+      background-color: @sapphire;
+      border-color: @sapphire;
+      color: @base;
+    }
+
+    button:hover,
+    button:focus,
+    .button:hover,
+    .button:focus {
+      background-color: darken(@sapphire, 25%);
+      color: @base;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: @text;
+    }
+
+    input[type="text"],
+    input[type="password"],
+    input[type="date"],
+    input[type="datetime"],
+    input[type="datetime-local"],
+    input[type="month"],
+    input[type="week"],
+    input[type="email"],
+    input[type="number"],
+    input[type="search"],
+    input[type="tel"],
+    input[type="time"],
+    input[type="url"],
+    input[type="color"],
+    textarea,
+    input[type="file"],
+    input[type="checkbox"],
+    input[type="radio"],
+    select,
+    input[type="text"]:focus,
+    input[type="password"]:focus,
+    input[type="date"]:focus,
+    input[type="datetime"]:focus,
+    input[type="datetime-local"]:focus,
+    input[type="month"]:focus,
+    input[type="week"]:focus,
+    input[type="email"]:focus,
+    input[type="number"]:focus,
+    input[type="search"]:focus,
+    input[type="tel"]:focus,
+    input[type="time"]:focus,
+    input[type="url"]:focus,
+    input[type="color"]:focus,
+    textarea:focus,
+    input[type="file"]:focus,
+    input[type="checkbox"]:focus,
+    input[type="radio"]:focus,
+    select:focus {
+      & when (@lookup ="latte") {
+      background-color: @base;
+      border-color: @surface0;
+      }
+      background-color: @surface0;
+      border-color: @surface1;
+      color: @text;
+    }
+
+    .header-nav a {
+      color: @pink;
+    }
+
+    .header-nav a:hover {
+      color: darken(@pink, 15%);
+    }
+
+    .jspTrack {
+      & when (@lookup ="latte") {
+        background: @surface0;
+      }
+      background: @surface1;
+    }
+
+    .jspDrag {
+      & when (@lookup ="latte") {
+        background-color: @surface1;
+      }
+      background-color: @surface2;
+    }
+
+    .f-dropdown {
+      & when (@lookup ="latte") {
+        background-color: @base;
+      }
+      background-color: @surface0;
+      border-color: @subtext1;
+    }
+
+    .f-dropdown::before {
+      border-color: transparent transparent @subtext1 transparent;
+    }
+
+    span.query-pick {
+      color: @text;
+    }
+
+    .has-tip {
+      color: @subtext1;
+      border-color: @overlay1;
+    }
+
+    .has-tip:hover,
+    .has-tip:focus {
+      border-bottom: dotted 1px @sapphire;
+      color: @sapphire;
+    }
+
+    label {
+      color: @subtext1;
+    }
+
+    table {
+      background: @base;
+      & when (@lookup ="latte") {
+        background-color: @surface0;
+      }
+      background-color: @surface1;
+    }
+
+    table tr th,
+    table tr td {
+      color: @subtext1;
+    }
+
+    .kanji-table td {
+      & when (@lookup ="latte") {
+        border-color: @surface0;
+      }
+      border-color: @surface1;
+    }
+
+    table tr.even,
+    table tr.alt,
+    table tr:nth-of-type(2n) {
+      & when (@lookup ="latte") {
+        background: fadeout(@surface0, 0.5);
+      }
+      background: fadeout(@surface1, 0.5);
+    }
+
+    .reading-table tr ~ tr > td {
+      & when (@lookup ="latte") {
+        border-color: @surface0;
+      }
+      border-color: @surface1;
+    }
+
+    table.kanji-match td {
+      & when (@lookup ="latte") {
+        border-color: @surface0;
+      }
+      border-color: @surface1;
+    }
+
+    tr.match-row-kanji,
+    tr.match-row-reading {
+      & when (@lookup ="latte") {
+        border-color: @surface0;
+      }
+      border-color: @surface1;
+    }
+
+    img {
+      filter: contrast(1.2) opacity(85%);
+    }
+
+    /* Options */
+    if (zen) {
+      .header,
+      footer,
+      .landing-page {
+        display: none;
+      }
+
+      div.wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        align-content: center;
+        justify-content: center;
+        padding: 50px 0;
+        min-height: 100vh;
+        margin: 0;
+      }
+
+      .gloss-all {
+        width: 100%;
+        padding: 0 10px;
+      }
+
+      #div-ichiran-result {
+        padding: 0 10px;
+      }
+
+      #div-kanji-form,
+      #w-form {
+        width: 100%;
+      }
+
+      #k-form > div > div,
+      #w-form > div > div {
+        width: 100%;
+        max-width: 304px;
+      }
+    }
+  }
+}
--- a/styles/invidious/README.md
+++ b/styles/invidious/README.md
@ -0,0 +1,59 @@
+<!-- AUTOGEN:README START -->
+<!-- THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND -->
+
+<h3 align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+  Catppuccin for <a href="https://invidious.io">Invidious</a>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+</h3>
+
+<p align="center">
+	<a href="https://github.com/catppuccin/userstyles/issues?q=is%3Aissue+is+label%3Ainvidious"><img src="https://img.shields.io/github/issues/catppuccin/userstyles?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
+	<a href="https://raw.githubusercontent.com/catppuccin/userstyles/main/styles/invidious/catppuccin.user.css"><img src="https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f&style=for-the-badge"></a>
+</p>
+
+<p align="center">
+  <img src="assets/catwalk.webp"/>
+</p>
+
+## Previews
+
+<details>
+<summary>🌻 Latte</summary>
+<img src="assets/latte.webp"/>
+</details>
+<details>
+<summary>🪴 Frappé</summary>
+<img src="assets/frappe.webp"/>
+</details>
+<details>
+<summary>🌺 Macchiato</summary>
+<img src="assets/macchiato.webp"/>
+</details>
+<details>
+<summary>🌿 Mocha</summary>
+<img src="assets/mocha.webp"/>
+</details>
+
+
+
+
+
+## 💝 Current Maintainer(s)
+- [winston](https://github.com/nekowinston)
+
+## 💖 Past Maintainer(s)
+- [Andreas Grafen](https://github.com/andreasgrafen)
+
+&nbsp;
+
+<p align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
+</p>
+
+<p align="center">
+	Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
+</p>
+
+<!-- AUTOGEN:README END -->
--- a/styles/invidious/assets/catwalk.webp
+++ b/styles/invidious/assets/catwalk.webp
--- a/styles/invidious/assets/frappe.webp
+++ b/styles/invidious/assets/frappe.webp
--- a/styles/invidious/assets/latte.webp
+++ b/styles/invidious/assets/latte.webp
--- a/styles/invidious/assets/macchiato.webp
+++ b/styles/invidious/assets/macchiato.webp
--- a/styles/invidious/assets/mocha.webp
+++ b/styles/invidious/assets/mocha.webp
--- a/styles/invidious/catppuccin.user.css
+++ b/styles/invidious/catppuccin.user.css
@ -0,0 +1,302 @@
+/* ==UserStyle==
+@name           Invidious Catppuccin
+@namespace      github.com/catppuccin/userstyles/styles/invidious
+@homepageURL    https://github.com/catppuccin/userstyles/tree/main/styles/invidious
+@version        0.3.1
+@description    Soothing pastel theme for Invidious
+@author         Catppuccin
+@updateURL      https://github.com/catppuccin/userstyles/raw/main/styles/invidious/catppuccin.user.css
+@preprocessor   less
+@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
+@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
+@var select accentColor "Accent Color" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue*", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray" ]
+@var checkbox styleVideoPlayer "Style Video Player" 1
+==/UserStyle== */
+@-moz-document url-prefix("https://inv.bp.projectsegfau.lt"),
+               url-prefix("https://inv.privacy.com.de"),
+               url-prefix("https://inv.riverside.rocks"),
+               url-prefix("https://inv.vern.cc"),
+               url-prefix("https://invidio.xamh.de"),
+               url-prefix("https://invidious.esmailelbob.xyz"),
+               url-prefix("https://invidious.flokinet.to"),
+               url-prefix("https://invidious.kavin.rocks"),
+               url-prefix("https://invidious.namazso.eu"),
+               url-prefix("https://invidious.nerdvpn.de"),
+               url-prefix("https://invidious.projectsegfau.lt"),
+               url-prefix("https://invidious.rhyshl.live"),
+               url-prefix("https://invidious.sethforprivacy.com"),
+               url-prefix("https://invidious.slipfox.xyz"),
+               url-prefix("https://invidious.snopyta.org"),
+               url-prefix("https://invidious.thewatcherpi.de"),
+               url-prefix("https://invidious.tiekoetter.com"),
+               url-prefix("https://iv.winston.sh"),
+               url-prefix("https://vid.puffyan.us"),
+               url-prefix("https://y.com.sb"),
+               url-prefix("https://yewtu.be"),
+               url-prefix("https://youtube.076.ne.jp"),
+               url-prefix("https://yt.artemislena.eu"),
+{
+  /* prettier-ignore */
+  @catppuccin: {
+    @latte:     { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }
+    @frappe:    { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }
+    @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }
+    @mocha:     { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }
+  }
+
+  #catppuccin(@lookup, @accent) {
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @flamingo: @catppuccin[@@lookup][@flamingo];
+    @pink: @catppuccin[@@lookup][@pink];
+    @mauve: @catppuccin[@@lookup][@mauve];
+    @red: @catppuccin[@@lookup][@red];
+    @maroon: @catppuccin[@@lookup][@maroon];
+    @peach: @catppuccin[@@lookup][@peach];
+    @yellow: @catppuccin[@@lookup][@yellow];
+    @green: @catppuccin[@@lookup][@green];
+    @teal: @catppuccin[@@lookup][@teal];
+    @sky: @catppuccin[@@lookup][@sky];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @blue: @catppuccin[@@lookup][@blue];
+    @lavender: @catppuccin[@@lookup][@lavender];
+    @text: @catppuccin[@@lookup][@text];
+    @subtext1: @catppuccin[@@lookup][@subtext1];
+    @subtext0: @catppuccin[@@lookup][@subtext0];
+    @overlay2: @catppuccin[@@lookup][@overlay2];
+    @overlay1: @catppuccin[@@lookup][@overlay1];
+    @overlay0: @catppuccin[@@lookup][@overlay0];
+    @surface2: @catppuccin[@@lookup][@surface2];
+    @surface1: @catppuccin[@@lookup][@surface1];
+    @surface0: @catppuccin[@@lookup][@surface0];
+    @base: @catppuccin[@@lookup][@base];
+    @mantle: @catppuccin[@@lookup][@mantle];
+    @crust: @catppuccin[@@lookup][@crust];
+    @accentColor: @catppuccin[@@lookup][@@accent];
+    @linkColor: @accentColor;
+    @linkHover: if(
+      @lookup = latte,
+      darken(@accentColor, 5%),
+      lighten(@accentColor, 5%)
+    );
+
+    & when (@lookup = latte) {
+      input[type="checkbox"]:checked {
+        border: 1px solid @crust;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9ImJsYWNrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMi4yMDcgNC43OTNhMSAxIDAgMDEwIDEuNDE0bC01IDVhMSAxIDAgMDEtMS40MTQgMGwtMi0yYTEgMSAwIDAxMS40MTQtMS40MTRMNi41IDkuMDg2bDQuMjkzLTQuMjkzYTEgMSAwIDAxMS40MTQgMHoiLz48L3N2Zz4K");
+      }
+    }
+    & when not (@lookup = latte) {
+      input[type="checkbox"]:checked {
+        border: 1px solid @crust;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9IndoaXRlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMi4yMDcgNC43OTNhMSAxIDAgMDEwIDEuNDE0bC01IDVhMSAxIDAgMDEtMS40MTQgMGwtMi0yYTEgMSAwIDAxMS40MTQtMS40MTRMNi41IDkuMDg2bDQuMjkzLTQuMjkzYTEgMSAwIDAxMS40MTQgMHoiLz48L3N2Zz4=");
+      }
+    }
+
+    color-scheme: if(@lookup = latte, light, dark);
+    background-color: @base !important;
+    color: @text !important;
+
+    ::placeholder {
+      color: @subtext0;
+    }
+
+    &::-webkit-scrollbar {
+      width: 0.25rem;
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 9999px;
+      background: @accentColor;
+    }
+
+    #logo .pure-menu-heading {
+      color: @accentColor;
+    }
+
+    a,
+    a:not([data-id]) > .icon,
+    .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
+    .playlist-restricted > ol > li > a {
+      color: @linkColor !important;
+    }
+
+    a:hover,
+    a:active,
+    summary:hover,
+    a:not([data-id]):hover > .icon,
+    .pure-u-lg-1-5 > .h-box > a[href^="/watch?"]:hover,
+    .playlist-restricted > ol > li > a:hover {
+      color: @linkHover !important;
+    }
+
+    button.pure-button-primary,
+    body a.pure-button-primary {
+      background-color: @surface1 !important;
+      color: @text !important;
+    }
+
+    button.pure-button-primary:hover,
+    button.pure-button-primary:focus,
+    body a.pure-button-primary:hover,
+    body a.pure-button-primary:focus {
+      background-color: @surface2 !important;
+      color: @text !important;
+    }
+
+    #subscribe {
+      background-color: @linkColor !important;
+      color: @crust !important;
+    }
+
+    #subscribe:hover,
+    #subscribe:focus {
+      background-color: @linkHover !important;
+      color: @crust !important;
+    }
+
+    #filters-box {
+      background-color: @surface0 !important;
+    }
+
+    .underlined {
+      border-color: @overlay1;
+    }
+
+    .video-js .vjs-control-bar,
+    .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+      background-color: @crust !important;
+    }
+
+    .video-js .vjs-control-bar,
+    .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+      color: @text !important;
+    }
+
+    .video-js .vjs-slider:hover,
+    .video-js button:hover {
+      color: @accentColor !important;
+    }
+
+    .video-js .vjs-slider {
+      background-color: @surface2 !important;
+    }
+
+    .video-js .vjs-load-progress,
+    .video-js .vjs-load-progress div {
+      background-color: @surface2 !important;
+    }
+
+    .video-js.player-style-invidious .vjs-play-progress {
+      background-color: @accentColor !important;
+    }
+
+    .vjs-menu li.vjs-menu-item:focus,
+    .vjs-menu li.vjs-menu-item:hover {
+      background-color: @surface0 !important;
+      color: @text !important;
+    }
+
+    .vjs-menu li.vjs-selected,
+    .vjs-menu li.vjs-selected:focus,
+    .vjs-menu li.vjs-selected:hover {
+      background-color: @blue !important;
+    }
+
+    .vjs-menu li.vjs-selected,
+    .vjs-menu li.vjs-selected:focus,
+    .vjs-menu li.vjs-selected:hover,
+    .js-focus-visible .vjs-menu li.vjs-selected:hover {
+      color: @crust !important;
+    }
+
+    .vjs-modal-dialog-content {
+      backdrop-filter: blur(4px);
+    }
+
+    .vjs-share__title {
+      color: @text !important;
+    }
+    .vjs-share__subtitle {
+      color: @subtext0 !important;
+      opacity: 100% !important;
+    }
+    .vjs-share__short-link {
+      color: @text !important;
+      background: @base !important;
+    }
+    .vjs-share__btn {
+      background: @crust !important;
+      svg path {
+        fill: @text !important;
+      }
+    }
+
+    #related-videos > .h-box > div:not(#autoplay-controls) {
+      margin-bottom: 48px !important;
+    }
+
+    footer,
+    footer a {
+      color: @subtext0 !important;
+    }
+
+    .pure-form-message-inline {
+      color: @subtext0;
+    }
+
+    select,
+    input[type="number"],
+    input[type="input"],
+    .pure-input-1 {
+      &:active {
+        color: @text !important;
+      }
+      color: @subtext0 !important;
+      background: @surface0 !important;
+      border-color: @crust !important;
+      box-shadow: none !important;
+    }
+    input[type="checkbox"] {
+      background-color: @surface2;
+      border: 1px solid @crust;
+      height: 1rem;
+      width: 1rem;
+      -webkit-appearance: none;
+      appearance: none;
+      outline: none;
+      cursor: pointer;
+    }
+
+    // video player background
+    #player-container > .video-js > video,
+    // placeholder for loading thumbnails
+    .vjs-poster {
+      & when (@styleVideoPlayer = 1) {
+        background-color: @mantle !important;
+      }
+    }
+  }
+
+  // synced colorscheme
+  @media (prefers-color-scheme: light) {
+    .no-theme {
+      #catppuccin(@lightFlavor, @accentColor);
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    .no-theme {
+      #catppuccin(@darkFlavor, @accentColor);
+    }
+  }
+
+  // manually set colorscheme
+  .light-theme {
+    #catppuccin(@lightFlavor, @accentColor);
+  }
+  .dark-theme {
+    #catppuccin(@darkFlavor, @accentColor);
+  }
+}
+
+// vim:ft=less
--- a/styles/lastfm/README.md
+++ b/styles/lastfm/README.md
@ -0,0 +1,59 @@
+<!-- AUTOGEN:README START -->
+<!-- THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND -->
+
+<h3 align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+  Catppuccin for <a href="https://last.fm">Last.fm</a>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+</h3>
+
+<p align="center">
+	<a href="https://github.com/catppuccin/userstyles/issues?q=is%3Aissue+is+label%3Alastfm"><img src="https://img.shields.io/github/issues/catppuccin/userstyles?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
+	<a href="https://raw.githubusercontent.com/catppuccin/userstyles/main/styles/lastfm/catppuccin.user.css"><img src="https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f&style=for-the-badge"></a>
+</p>
+
+<p align="center">
+  <img src="assets/catwalk.webp"/>
+</p>
+
+## Previews
+
+<details>
+<summary>🌻 Latte</summary>
+<img src="assets/latte.webp"/>
+</details>
+<details>
+<summary>🪴 Frappé</summary>
+<img src="assets/frappe.webp"/>
+</details>
+<details>
+<summary>🌺 Macchiato</summary>
+<img src="assets/macchiato.webp"/>
+</details>
+<details>
+<summary>🌿 Mocha</summary>
+<img src="assets/mocha.webp"/>
+</details>
+
+
+
+
+
+## 💝 Current Maintainer(s)
+- [AnubisNekhet](https://github.com/AnubisNekhet)
+
+## 💖 Past Maintainer(s)
+- [Gingeh](https://github.com/Gingeh)
+
+&nbsp;
+
+<p align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
+</p>
+
+<p align="center">
+	Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
+</p>
+
+<!-- AUTOGEN:README END -->
--- a/styles/lastfm/assets/catwalk.webp
+++ b/styles/lastfm/assets/catwalk.webp
--- a/styles/lastfm/assets/frappe.webp
+++ b/styles/lastfm/assets/frappe.webp
--- a/styles/lastfm/assets/latte.webp
+++ b/styles/lastfm/assets/latte.webp
--- a/styles/lastfm/assets/macchiato.webp
+++ b/styles/lastfm/assets/macchiato.webp
--- a/styles/lastfm/assets/mocha.webp
+++ b/styles/lastfm/assets/mocha.webp
--- a/styles/lastfm/catppuccin.user.css
+++ b/styles/lastfm/catppuccin.user.css
--- a/styles/libreddit/README.md
+++ b/styles/libreddit/README.md
@ -0,0 +1,59 @@
+<!-- AUTOGEN:README START -->
+<!-- THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND -->
+
+<h3 align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+  Catppuccin for <a href="https://github.com/libreddit/libreddit">Libreddit</a>
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+</h3>
+
+<p align="center">
+	<a href="https://github.com/catppuccin/userstyles/issues?q=is%3Aissue+is+label%3Alibreddit"><img src="https://img.shields.io/github/issues/catppuccin/userstyles?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
+	<a href="https://raw.githubusercontent.com/catppuccin/userstyles/main/styles/libreddit/catppuccin.user.css"><img src="https://img.shields.io/badge/stylus-install-cba6f7?colorA=363a4f&style=for-the-badge"></a>
+</p>
+
+<p align="center">
+  <img src="assets/catwalk.webp"/>
+</p>
+
+## Previews
+
+<details>
+<summary>🌻 Latte</summary>
+<img src="assets/latte.webp"/>
+</details>
+<details>
+<summary>🪴 Frappé</summary>
+<img src="assets/frappe.webp"/>
+</details>
+<details>
+<summary>🌺 Macchiato</summary>
+<img src="assets/macchiato.webp"/>
+</details>
+<details>
+<summary>🌿 Mocha</summary>
+<img src="assets/mocha.webp"/>
+</details>
+
+
+
+
+
+## 💝 Current Maintainer(s)
+- [Isabel](https://github.com/isabelroses)
+
+## 💖 Past Maintainer(s)
+- [Andreas Grafen](https://github.com/andreasgrafen)
+
+&nbsp;
+
+<p align="center">
+	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
+</p>
+
+<p align="center">
+	Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
+</p>
+
+<!-- AUTOGEN:README END -->
--- a/styles/libreddit/assets/catwalk.webp
+++ b/styles/libreddit/assets/catwalk.webp
--- a/styles/libreddit/catppuccin.user.css
+++ b/styles/libreddit/catppuccin.user.css
@ -0,0 +1,247 @@
+/* ==UserStyle==
+@name           Libreddit Catppuccin
+@namespace      github.com/catppuccin/userstyles/styles/libreddit
+@version        2.0.3
+@description    Soothing pastel theme for Libreddit
+@author         Catppuccin
+@updateURL      https://github.com/catppuccin/userstyles/raw/main/styles/libreddit/catppuccin.user.css
+@preprocessor less
+@var select Theme "Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"]
+@var select accentColour  "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey"]
+==/UserStyle== */
+@-moz-document domain("libredd.it"),
+domain("libreddit.spike.codes"),
+domain("libreddit.dothq.co"),
+domain("libreddit.kavin.rocks"),
+domain("reddit.invak.id"),
+domain("reddit.phii.me"),
+domain("lr.riverside.rocks"),
+domain("libreddit.strongthany.cc"),
+domain("libreddit.database.red"),
+domain("libreddit.privacy.com.de"),
+domain("libreddit.domain.glass"),
+domain("libreddit.sugoma.tk"),
+domain("libreddit.jamiethalacker.dev"),
+domain("reddit.artemislena.eu"),
+domain("r.nf"),
+domain("libreddit.some-things.org"),
+domain("reddit.stuehieyr.com"),
+domain("lr.mint.lgbt"),
+domain("libreddit.igna.rocks"),
+domain("libreddit.autarkic.org"),
+domain("libreddit.flux.industries"),
+domain("libreddit.drivet.xyz"),
+domain("lr.oversold.host"),
+domain("libreddit.de"),
+domain("libreddit.pussthecat.org"),
+domain("libreddit.mutahar.rocks"),
+domain("libreddit.northboot.xyz"),
+domain("leddit.xyz"),
+domain("de.leddit.xyz"),
+domain("lr.cowfee.moe"),
+domain("libreddit.hu"),
+domain("libreddit.totaldarkness.net"),
+domain("libreddit.esmailelbob.xyz"),
+domain("lr.vern.cc"),
+domain("libreddit.nl"),
+domain("lr.stilic.ml"),
+domain("reddi.tk"),
+domain("libreddit.bus-hit.me"),
+domain("libreddit.datatunnel.xyz"),
+domain("libreddit.crewz.me"),
+domain("r.walkx.org"),
+domain("libreddit.kylrth.com"),
+domain("libreddit.yonalee.eu"),
+domain("libreddit.winscloud.net"),
+domain("libreddit.tiekoetter.com"),
+domain("reddit.rtrace.io"),
+domain("libreddit.lunar.icu"),
+domain("libreddit.privacydev.net"),
+domain("libreddit.notyourcomputer.net"),
+domain("r.ahwx.org"),
+domain("bob.fr.to"),
+domain("reddit.beparanoid.de"),
+domain("libreddit.dcs0.hu"),
+domain("reddit.dr460nf1r3.org"),
+domain("rd.jae.su"),
+domain("libreddit.mha.fi"),
+domain("libreddit.foss.wtf"),
+domain("libreddit.encrypted-data.xyz"),
+domain("libreddit.eu.org"),
+domain("l.opnxng.com") {
+
+  @catppuccin: {
+    @latte: {
+      @rosewater: #dc8a78;
+      @flamingo: #dd7878;
+      @pink: #ea76cb;
+      @mauve: #8839ef;
+      @red: #d20f39;
+      @maroon: #e64553;
+      @peach: #fe640b;
+      @yellow: #df8e1d;
+      @green: #40a02b;
+      @teal: #179299;
+      @sky: #04a5e5;
+      @sapphire: #209fb5;
+      @blue: #1e66f5;
+      @lavender: #7287fd;
+      @text: #4c4f69;
+      @subtext1: #5c5f77;
+      @subtext0: #6c6f85;
+      @overlay2: #7c7f93;
+      @overlay1: #8c8fa1;
+      @overlay0: #9ca0b0;
+      @surface2: #acb0be;
+      @surface1: #bcc0cc;
+      @surface0: #ccd0da;
+      @base: #eff1f5;
+      @mantle: #e6e9ef;
+      @crust: #dce0e8;
+    }
+    @frappe: {
+      @rosewater: #f2d5cf;
+      @flamingo: #eebebe;
+      @pink: #f4b8e4;
+      @mauve: #ca9ee6;
+      @red: #e78284;
+      @maroon: #ea999c;
+      @peach: #ef9f76;
+      @yellow: #e5c890;
+      @green: #a6d189;
+      @teal: #81c8be;
+      @sky: #99d1db;
+      @sapphire: #85c1dc;
+      @blue: #8caaee;
+      @lavender: #babbf1;
+      @text: #c6d0f5;
+      @subtext1: #b5bfe2;
+      @subtext0: #a5adce;
+      @overlay2: #949cbb;
+      @overlay1: #838ba7;
+      @overlay0: #737994;
+      @surface2: #626880;
+      @surface1: #51576d;
+      @surface0: #414559;
+      @base: #303446;
+      @mantle: #292c3c;
+      @crust: #232634;
+    }
+    @macchiato: {
+      @rosewater: #f4dbd6;
+      @flamingo: #f0c6c6;
+      @pink: #f5bde6;
+      @mauve: #c6a0f6;
+      @red: #ed8796;
+      @maroon: #ee99a0;
+      @peach: #f5a97f;
+      @yellow: #eed49f;
+      @green: #a6da95;
+      @teal: #8bd5ca;
+      @sky: #91d7e3;
+      @sapphire: #7dc4e4;
+      @blue: #8aadf4;
+      @lavender: #b7bdf8;
+      @text: #cad3f5;
+      @subtext1: #b8c0e0;
+      @subtext0: #a5adcb;
+      @overlay2: #939ab7;
+      @overlay1: #8087a2;
+      @overlay0: #6e738d;
+      @surface2: #5b6078;
+      @surface1: #494d64;
+      @surface0: #363a4f;
+      @base: #24273a;
+      @mantle: #1e2030;
+      @crust: #181926;
+    }
+    @mocha: {
+      @rosewater: #f5e0dc;
+      @flamingo: #f2cdcd;
+      @pink: #f5c2e7;
+      @mauve: #cba6f7;
+      @red: #f38ba8;
+      @maroon: #eba0ac;
+      @peach: #fab387;
+      @yellow: #f9e2af;
+      @green: #a6e3a1;
+      @teal: #94e2d5;
+      @sky: #89dceb;
+      @sapphire: #74c7ec;
+      @blue: #89b4fa;
+      @lavender: #b4befe;
+      @text: #cdd6f4;
+      @subtext1: #bac2de;
+      @subtext0: #a6adc8;
+      @overlay2: #9399b2;
+      @overlay1: #7f849c;
+      @overlay0: #6c7086;
+      @surface2: #585b70;
+      @surface1: #45475a;
+      @surface0: #313244;
+      @base: #1e1e2e;
+      @mantle: #181825;
+      @crust: #11111b;
+    }
+  }
+
+  .light,
+  .dark,
+  .black,
+  .dracula,
+  .gold,
+  .laserwave,
+  .nord,
+  .rosebox,
+  .violet,
+  :root {
+    #catppuccin(@Theme, @accentColour);
+  }
+
+  #catppuccin(@lookup, @accent) {
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @flamingo: @catppuccin[@@lookup][@flamingo];
+    @pink: @catppuccin[@@lookup][@pink];
+    @mauve: @catppuccin[@@lookup][@mauve];
+    @red: @catppuccin[@@lookup][@red];
+    @maroon: @catppuccin[@@lookup][@maroon];
+    @peach: @catppuccin[@@lookup][@peach];
+    @yellow: @catppuccin[@@lookup][@yellow];
+    @green: @catppuccin[@@lookup][@green];
+    @teal: @catppuccin[@@lookup][@teal];
+    @sky: @catppuccin[@@lookup][@sky];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @blue: @catppuccin[@@lookup][@blue];
+    @lavender: @catppuccin[@@lookup][@lavender];
+    @text: @catppuccin[@@lookup][@text];
+    @subtext1: @catppuccin[@@lookup][@subtext1];
+    @subtext0: @catppuccin[@@lookup][@subtext0];
+    @overlay2: @catppuccin[@@lookup][@overlay2];
+    @overlay1: @catppuccin[@@lookup][@overlay1];
+    @overlay0: @catppuccin[@@lookup][@overlay0];
+    @surface2: @catppuccin[@@lookup][@surface2];
+    @surface1: @catppuccin[@@lookup][@surface1];
+    @surface0: @catppuccin[@@lookup][@surface0];
+    @base: @catppuccin[@@lookup][@base];
+    @mantle: @catppuccin[@@lookup][@mantle];
+    @crust: @catppuccin[@@lookup][@crust];
+    @accent-colour: @catppuccin[@@lookup][@@accent];
+
+    & {
+      --accent: @accent-colour;
+      --green: @green;
+      --text: @text;
+      --foreground: @crust;
+      --background: @base;
+      --outside: @mantle;
+      --post: @mantle;
+      --panel-border: none;
+      --highlighted: @surface0;
+      --visited: @overlay0;
+      --shadow: 0 5px 15px 0 transparent;
+
+      --nsfw: @peach;
+      --admin: @maroon;
+    }
+  }
+}
--- a/styles/libreddit/pure-css/frappe.css
+++ b/styles/libreddit/pure-css/frappe.css
@ -0,0 +1,18 @@
+.dark {
+
+    --accent:     #BABBF1; /* lavender */
+    --green:      #A6D189; /* green */
+    --text:       #C6D0F5; /* text */
+    --foreground: #232634; /* crust */
+    --background: #303446; /* base */
+    --outside:    #232634; /* crust */
+    --post:       #232634; /* crust */
+    --panel-border: none;
+    --highlighted:#414559; /* surface0 */
+    --visited:    #737994; /* overlay0 */
+    --shadow: 0 0 0 transparent;
+
+    --nsfw:       #EF9F76; /* peach */
+    --admin:      #EA999C; /* maroon */
+
+}
--- a/styles/libreddit/pure-css/latte.css
+++ b/styles/libreddit/pure-css/latte.css
@ -0,0 +1,18 @@
+.light {
+
+    --accent:     #7287fD; /* lavender */
+    --green:      #40A02B; /* green */
+    --text:       #4C4F69; /* text */
+    --foreground: #DCE0E8; /* crust */
+    --background: #EFF1F5; /* base */
+    --outside:    #DCE0E8; /* crust */
+    --post:       #DCE0E8; /* crust */
+    --panel-border: none;
+    --highlighted:#CCD0DA; /* surface0 */
+    --visited:    #9CA0B0; /* overlay0 */
+    --shadow: 0 0 0 transparent;
+
+    --nsfw:       #FE640B; /* peach */
+    --admin:      #E64553; /* maroon */
+
+}
--- a/styles/libreddit/pure-css/macchiato.css
+++ b/styles/libreddit/pure-css/macchiato.css
@ -0,0 +1,18 @@
+.dark {
+
+    --accent:     #B7BDF8; /* lavender */
+    --green:      #A6DA95; /* green */
+    --text:       #CAD3F5; /* text */
+    --foreground: #181926; /* crust */
+    --background: #24273A; /* base */
+    --outside:    #181926; /* crust */
+    --post:       #181926; /* crust */
+    --panel-border: none;
+    --highlighted:#363A4F; /* surface0 */
+    --visited:    #6E738D; /* overlay0 */
+    --shadow: 0 0 0 transparent;
+
+    --nsfw:       #F5A97F; /* peach */
+    --admin:      #EE99A0; /* maroon */
+
+}
--- a/styles/libreddit/pure-css/mocha.css
+++ b/styles/libreddit/pure-css/mocha.css
@ -0,0 +1,18 @@
+.dark {
+
+    --accent:     #B4BEFE; /* lavender */
+    --green:      #A6E3A1; /* green */
+    --text:       #CDD6F4; /* text */
+    --foreground: #11111B; /* crust */
+    --background: #1E1E2E; /* base */
+    --outside:    #11111B; /* crust */
+    --post:       #11111B; /* crust */
+    --panel-border: none;
+    --highlighted:#313244; /* surface0 */
+    --visited:    #6C7086; /* overlay0 */
+    --shadow: 0 0 0 transparent;
+
+    --nsfw:       #FAB387; /* peach */
+    --admin:      #EBA0AC; /* maroon */
+
+}
--- a/Show More
+++ b/Show More