catppuccin / userstyles Goto Github PK

View Code? Open in Web Editor NEW

287.0 6.0 84.0 18.12 MB

🖌 Soothing pastel theme for userstyles

License: MIT License

Less 97.66% Python 0.06% TypeScript 1.84% JavaScript 0.44%

catppuccin palette soothing stylus theme userstyles website less hacktoberfest meta

userstyles's Introduction

Catppuccin Userstyles

Install · Contributing · Userstyles

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

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

🖥️ Install

Install Stylus for your chosen browser.

All Userstyles

See instructions on the GitHub release page.

Individual Userstyles

Enable CSP Patching from Stylus Settings > Advanced.
Install the theme:
- https://github.com/catppuccin/userstyles/raw/main/styles/<name>/catppuccin.user.css
- Replacing <name> with the name of the userstyle.
Enjoy!

Tip

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

Open the Stylus "Manage" page.
Click on the userstyle's name in the list.
Click on Style settings in the left panel.
Enter the URL patterns for your instance(s) in the text box labeled Custom included sites.

👐 Contributing

Note

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

See CONTRIBUTING.md.

🖌 Userstyles

Important

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

💭 Development Tools

🔎 Search Engines

🗺️ Translation Tools

🧠 Wikis

📸 Photo & Video

Google Photos
🚧 Pinterest

🎵 Music

📖 Productivity

💌 Email Clients

🎓 Education

✨ Social Networking

🗣️ Discussion Forums

🌈 Entertainment

🎮 Games

🤖 Artificial Intelligence

userstyles's People

Contributors

Stargazers

Watchers

Forkers

coldenate jolheiser starry-tacos rabedin spaghettiosareyummy mohalkurdi soya-daizu adriankarlen isabelincorp justletterv r58playz adienox soradotwav resucutie krple aemogie parpok madebymustafa samyepik eric3244 justtobbi fruzitent uncenter blankparticle watatomo mjesusdev pinkcreeper100 meltymoon lichthagel tejasraman keonly thelooter namescode jopejoe1 roootthefox coopw1 st0rml 1mmm10 tnixc kardyne theonlyames chiefjazzdiewltr francorav duanin2 raransusu dandraghas sekki21956 mkutay laperex eriedaberrie cyhyraethz duckypixel izmystic genshibe itzthemeow alinademi unbelievablynoah guaxinim5573 nyatalieeee hiracat gitmuslim nrichw-eta aspizu neroist scrumplex jn-sena kanielrkirby kingofcube thatoneunoriginal bpplays trinkey hf02 obiwankeoni ejikejosephuche daylinmorgan rdela bomberfish owreaser flyingbutterytuna nk308 atlas2002 kitten-lily

userstyles's Issues

New (beta) github file view is slightly broken

lbl:github

"(detected)" font colors left unchanged when switching to dark (catppuccin) mode

apparently the (detected) text when it automatically detects a language has its font color left unchanged compared w/ the rest of the site and it appears dark sgsedrthfrgj
https://cdn.discordapp.com/attachments/983221434782466098/997050955617009744/unknown.png

Google

Link to repository

https://github.com/mustafakhalaf-git/google

Screenshots

Any additional comments?

No response

Submission Guidelines

I have read and followed Catppuccin's submission guidelines.

LESS pre-processor and LESS template

Description

As discussed in catppuccin-rfc/userstyles as well as on discord, we wish to transistion the userstyles ports to use the LESS pre-processor. Hopefully, streamlining the process of userstyle port creation and debugging.

Acceptance Criteria

Convert all current userstyles ports to use the less preprocessor
Create a userstyles template to help improve port creation process.

The Economist

Are you available to help in the creation of this port? 😄 (optional)
Yes – working on it here already.

Additional context 📷
https://www.economist.com/

Mainly searching for people who can help out with trying it first.

Automate additions/removals to `@userstyles-maintainers`

Is there an existing issue outlining your problem?

I have searched the existing issues and they do not solve my problem.

Describe your issue.

Currently, adding and removing maintainers within current-maintainers in the userstyles.yaml does not update @userstyles-maintainers team.

This is frustrating because the CODEOWNERS file expects that all listed users have write permissions. Without some form of automation, members will have to be manually added and removed which is definitely something we want to avoid as this repository grows in popularity.

We should utilise GitHub's GraphQL API to automatically update the entire team based on the current state of current-maintainers in our CI workflows.

Acceptance Criteria

additions/removals to current-maintainers should be reflected in the @userstyles-maintainers team

Split `maintainers` into `current-maintainers` & `previous-maintainers`

Description

It's apparent that the "Thanks To" section doesn't accurately represent the "maintainer" status of the userstyle itself. We should update this to mention current and previous maintainers.

I also think it would be nice if you could look at the YAML and actually see if any ports are unmaintained. I think we should allow current-maintainers to be empty so that we're not shying away from the reality of open-source software going unmaintained. Interested to hear @isabelroses' (and anyone else!) thoughts on that.

Acceptance Criteria

userstyles.yml is updated to include previous/current maintainers
- userstyles.schema.json is updated accordingly
README.md only includes previous/current maintainers and the thanks to section is removed.

E.g.

userstyles.yml

- maintainers: [ *isabelroses, *nekowinston ]
+ current-maintainers: [ *isabelroses ]
+ previous-maintainers: [ *nekowinston ]

README.md

- # Thanks To
- 	- Isabel
-   - Winston
+ # Current Maintainer(s)
+  - Isabel
+ # Previous Maintainer(s)
+  - Winston

AutoAO3App

Link to repository

https://github.com/enigmalea/autoao3app

Screenshots

Any additional comments?

AutoAO3App is a scraper for archiveofourown.org which helps fans who are running or participating in fanworks gift exchanges to find, filter, and readd requests and view information on the exchange in an easier to read format than what's on available on AO3. It also adds an additional bookmarking feature.

Submission Guidelines

I have read and followed Catppuccin's submission guidelines.

Numbered tables don't display correctly and are somewhat unreadable

As an example, this list displayed in mocha from List of countries by GDP

lbl:wikiwand

ChatGPT

@rubyowo has made a user style for ChatGPT: rubyowo/chatgpt
It's now ready for review!

Note
We are putting userstyle issues on hold while catppuccin/community#4 is being discussed.

Discussed in catppuccin/catppuccin#1892

^{Originally posted by nonetrix January 28, 2023}

Will you make the port?

Yes, I'm willing to make the port

How can the requested port be themed?

CSS I have already made some CSS but it's quite hacky and doesn't work well since I am not good at CSS not everything is themed

.dark .dark\:bg-white\/5 {
    background-color: #313244;
}

.dark .dark\:text-gray-100 {
    --tw-text-opacity: 1;
    color: #cdd6f4;
}

.dark .dark\:text-white\/50 {
    color: #cdd6f4;
}

.dark .dark\:bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgba(30,30,46,var(--tw-bg-opacity));
}

@media (min-width: 768px) {
    .dark .dark\:md\:bg-vert-dark-gradient {
        background-image: linear-gradient(180deg,rgba(53,55,64,0),#181825 58.85%);
    }
}

.dark .dark\:bg-gray-700 {
    --tw-bg-opacity: 1;
    background-color: rgba(49,50,68,var(--tw-bg-opacity));
}

.dark .dark\:bg-\[\#444654\] {
    --tw-bg-opacity: 1;
    background-color: rgba(24,24,37,var(--tw-bg-opacity));
}

.dark .btn-neutral {
    background-color: rgba(49,50,68,var(--tw-text-opacity));
    color: #cdd6f4;
}

p {
    color: #cdd6f4;
}

.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgba(49, 50, 68,var(--tw-bg-opacity));
    color: #cdd6f4;
}

.bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgba(24,24,37,var(--tw-bg-opacity));
}

.bg-gradient-to-l {
    background-image: none;
}

Has the requested port been themed already?

Any additional comments?

No response

span.tag_s missing

In the Frappe theme this looks especially clear: the text is unreadable.

lbl:deepl

Crowdin

Are you available to help in the creation of this port? 😄 (optional)
Yes! https://github.com/ryanccn/ctp-crowdin

Additional context 📷 (optional)
A widely used translation crowdsourcing platform, Crowdin is.

Pixlr

Link to repository

https://github.com/vanillyn/catppuccin-userstyles/tree/main/styles/Pixlr

Link to app

e - https://pixlr.com/e/
x - https://pixlr.com/x/

Screenshots

pixlr e

pixlr x

Any additional comments?

This is a userstyle, and you may have to change the lightness in the app itself in order to have working text/icons

Submission Guidelines

I have read and followed Catppuccin's submission guidelines.

This is a test

Advent Of Code

Are you available to help in the creation of this port? 😄 (optional)
Yes

Additional context 📷 (optional)
https://github.com/rubyowo/adventofcode

WhatsApp Web

Link to repository

https://github.com/FrancoRav/whatsapp-web.git

Screenshots

Latte

Frappe

Macchiato

Mocha

Espresso

Any additional comments?

No response

Submission Guidelines

I have read and followed Catppuccin's submission guidelines.

Quizlet

Link to repository

https://github.com/spaghettiosareyummy/quizlet

Screenshots

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

Any additional comments?

No response

Submission Guidelines

I have read and followed Catppuccin's submission guidelines.

Canvas LMS by Instructure

Link to repository

https://github.com/TheMemeSniper/catppuccin-canvas.git

Screenshots

Any additional comments?

No response

Submission Guidelines

I have read and followed Catppuccin's submission guidelines.

GitHub Action runs start-up logs are unreadable

Is there an existing issue outlining your problem?

I have searched the existing issues and they do not solve my problem.

What userstyles are you seeing the problem on?

lbl:github

Describe your problem.

The start up logs within Github Action runs are momentarily unreadable, please see screenshot below.

Attach screenshots.

What browser(s) are you seeing the problem on?

Firefox v115.0

Any additional comments?

No response

Text inside of "notifications" not readable

The text inside of "notifications" has an inconvenient font-color.

Examples for this are after subbing, or after completing a hype-train.

lbl:twitch

Feedback

Thought I should create a general feedback issue so people don't have to open one for each minor concern.

I haven't looked at all the individual userstyle directories yet - but 2 are wrongly categorized as userstyles:

DuckDuckGo (it's just loading the theme into your cookies at the moment)
Stable Diffusion Web UI (it is CSS, but it's available as an actual Extension for the host, essentially a Marketplace)

We should update them in the ports.yml as agnostic - the goal for DDG at least is that we someday have an actual userstyle...

Tidy Up README/CONTRIBUTING

Description

Currently, the README is not up to the Catppuccin Aesthetic™ as it just includes the auto-generated userstyles list. We should include a short description of what this repository is.

We should also flesh out the Contributing section to highlight the process of adding/PR'ing a userstyle into the repository. I'm personally hoping that a well-formatted PR template should do most of the work here.

Acceptance Criteria

Short description of what the repository is
Mention to enable csp-patching for the Stylus extension
Contributing section which highlights how the repository is architected + link to Pull Request template.

(detected) color issue

anything darker after frappe has that issue

Style doesn't work with archived pages

It would be nice if the style would work with pages archived with https://web.archive.org/ too. One way to achieve that would be to change the @-moz-document rule from domain("modrinth.com") to regexp(".*https:\\/\\/modrinth\\.com.*").

lbl:modrinth

TODOs

List of stuff we need to do before moving it to the catppuccin organisation.

Update every port's ...user.css files to reflect the new location of files
- I believe it's just the fields @namespace, @updateUrl
Create and agree on structure of README
- Create CONTRIBUTING.md
~~Disregard unnecessary information in each port's README. (e.g stars badge is no longer relevant)~~
- ~~(I believe @nekowinston is interested in defining a build system to auto-generate these which ties into the above)~~
Create issue labels for each port (I really hope there isn't a label limit 😅)
Check that CODEOWNERS file is accurate

Userstyle broken

The userstyle seems to be broken on new libreddit instances.

lbl:libreddit

Create Issue Template

Description

Similar to catppuccin/catppuccin, we should at least have some separation between issues affecting the central repository and the individual styles themselves.

Unfortunately, GitHub doesn't natively support tagging issues based on certain content within the issue body. However, similar to the auto-labeller action that we are using for Pull Requests, there exists one for issues. We could potentially leverage this instead of the other approach which is to have our own GitHub Bot. (Raycast currently do that.)

Acceptance Criteria

Issue template is created for "central repository matters" which should be auto-labelled with meta
blank_issues is enabled OR opt for auto-labelling issues via GitHub Actions and disable blank_issues. TBD.

Archive Userstyle Repositories + Transfer Issues

Description

Once the central repository is ready and maintainers have been verified and informed officially about this new repository. We should proceed with our plan and archive the "old" userstyle repositories and transfer their respective issues over.

Acceptance Criteria

For each port we should:

Update README.md to point towards the new location
Issues are migrated over and labelled properly
Officially Archived

Selection text and right click menu requires fix

Please,

lbl:deepl

Youtube Userstyle Is Broken

Is there an existing issue outlining your problem?

I have searched the existing issues and they do not solve my problem.

What userstyles are you seeing the problem on?

lbl:youtube

Describe your problem.

It's seems youtube userstyle not work

Attach screenshots.

What browser(s) are you seeing the problem on?

firefox 115.0.2-1

Any additional comments?

No response

Update for new Chat

Reddit is releasing a new chat platform, but it's not themed.
On top of that, its an i-frame.
On top of that, I've not been able to theme it.
I've been messing around with it for a while and I may update if I get something working

lbl:reddit

Is "Type to translate" missing?

Maybe that was the intention? In the previous version, this text had a color...

length_marker missing

<div class="lmt__source_textarea__length_marker">1324 / 5000</div>

You will see this when you insert a large text (more than 500 characters) for translation.

lbl:deepl

Missing or outdated preview images

Is there an existing issue outlining your problem?

I have searched the existing issues and they do not solve my problem.

Describe your issue.

The following userstyles don't have the separate previews by flavours, or have outdated combined previews.

Automate additions of labels when userstyles are added

Is there an existing issue outlining your problem?

I have searched the existing issues and they do not solve my problem.

Describe your issue.

At the time of writing, maintainers have to manually create labels for any new additions into this repository. This is an extra manual step that can be easily forgotten by any maintainer.

The Issue Labeler and Pull Request Labeler rely on labels that match the directories under /styles/, therefore, this should be automated.

Proposal

While we could go down the REST/GraphQL API approach, I believe this will be more painful as there doesn't seem to be a nice API call which can set all the labels for a repository at once.

I believe we should leverage existing solutions built by the community, two of which are listed below:

https://github.com/r7kamura/github-label-sync-action (I prefer this)
https://github.com/marketplace/actions/label-syncer

Acceptance Criteria

Leverage an existing GitHub Action to sync labels
- Auto-generate YAML file containing label definitions from each directory under /styles/
- The color field should be taken from the userstyles.yaml configuration.
  - If a userstyle has the color field set, the accent color should be taken from the macchiato palette.
  - If a userstyle does not have the color field set, we should default it to the text label. Or we could be fancy and somehow hash the name of the userstyle and generate a hex code based on that.

Please, update

Auto Generate READMEs

Description

Using the userstyles.yml which now exists in the main branch, try to auto-generate the READMEs for each port.

Once done, it should be raised within catppuccin/community#4 listing the pros and cons of the effort needed to maintain the READMEs.

We should then decide if we should bother with README generation or not

Create `catppuccin/userstyles` GitHub Team

Description

It's been raised before that it would be nice to have a logical grouping of all the maintainers for userstyle ports as they are quite popular and only growing. We should add a GitHub team and verify that they're all happy to be in this.

Acceptance Criteria

Ensure that all userstyle port maintainers are under one team
- Team is created
- All current members listed in CODEOWNERS are added
Verify that the CODEOWNERS file is accurate
- Ping them on GitHub and verify that they're happy to still be added (I guess this doubles as a userstyle maintainer audit)
Make sure that everyone understands that they should be contributing to the central repository instead of the individual ones

Follow System Theme Like The Other Themes

Other themes like the YouTube catppuccin follows the system theme, it would be amazing if this one would too

lbl:github

Split Anilist/Anichart

Description

The current user-style for Anilist actually contains code to theme Anichart too. For the central userstyles repository, we believe it makes sense to just split it out.

Acceptance Criteria

2 folders are created: styles/anilist & styles/anichart
The userstyles.yml is updated to reflect the above changes

InvokeAI

Are you available to help in the creation of this port? 😄 (optional)
Yes! https://github.com/ryanccn/ctp-invokeai

Additional context 📷 (optional)
None

Github projects aren't themed

lbl:github

Ecosia

Link to repository

https://github.com/isabelroses/Ecosia.git

Screenshots

https://raw.githubusercontent.com/isabelroses/Ecosia/master/assets/latte.webp
https://raw.githubusercontent.com/isabelroses/Ecosia/master/assets/frappe.webp
https://raw.githubusercontent.com/isabelroses/Ecosia/master/assets/macchiato.webp
https://raw.githubusercontent.com/isabelroses/Ecosia/master/assets/mocha.webp
https://raw.githubusercontent.com/isabelroses/Ecosia/master/assets/preview.webp

Any additional comments?

No response

Submission Guidelines

I have read and followed Catppuccin's submission guidelines.

Hoppscotch.io

@justTOBBI has made a port for Hoppscotch.
It's ready for review: justTOBBI/hoppscotch

Discussed in catppuccin/catppuccin#1907

^{Originally posted by justTOBBI February 4, 2023}

Will you make the port?

Yes, I'm willing to make the port

How can the requested port be themed?

via Stylus Userthemes

Has the requested port been themed already?

https://github.com/justTOBBI/hoppscotch

Any additional comments?

Have a beautiful day, my friends ☕

Homepage

Link to repository

https://github.com/Gandalf-the-Blue/homepage-catppuccin

Screenshots

Any additional comments?

Need help in adding preview image (how to generate?)

Submission Guidelines

I have read and followed Catppuccin's submission guidelines.

Create Pull Request Template

Description

A Pull Request template will greatly help this repository as this is how every userstyle will get added to the repository. The instructions from GitHub's Docs should be followed

Acceptance Criteria

Pull Request Template is created
- Asks the user what application/website they have themed it for
- Makes the user tick a box that they have read the relevant parts of the submission guidelines

It is worth noting that CI actions can verify on behalf of the user if they have included the correct files / updated the userstyles.yml correctly so it actually might be the case that we don't really need a template!

♟️Chess.com

Link to repository

https://github.com/coldenate/chess.com.git

Screenshots

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

Any additional comments?

Thank you,
coldenate, @isabelroses, @skelebro1

Submission Guidelines

I have read and followed Catppuccin's submission guidelines.

Selector `.px-3` matches unintended section

Is there an existing issue outlining your problem?

I have searched the existing issues and they do not solve my problem.

What userstyles are you seeing the problem on?

lbl:chatgpt

Describe your problem.

The selector .px-3 matches unintended (i think) sections as well, specifically the bar at the bottom. (Check first image)

userstyles/styles/chatgpt/catppuccin.user.css

Lines 224 to 226 in 79cea90

 .px-3 { 

 background: @mantle !important; 

 }

It's :hover also matches unintended sections which aren't clickable. (Check second image)

userstyles/styles/chatgpt/catppuccin.user.css

Lines 228 to 230 in 79cea90

 .px-3:hover { 

 background: @base !important; 

 }

I messed around a bit and fixed it on my end using

    .px-3.py-3,
    .pt-3 {
      background: @mantle !important;
    }

    .px-3.py-3:hover {
      background: @base !important;
    }

Don't know if this code is good or should be changed, never dont userstyles before. .px-3.py-3 only matched the conversations, while .pt-3 only matched the date seperators.