https://github.com/kylereddoch/catpuccin-mocha-ui-mastodon

🐘 Mastodon web UI, but strongly inspired by Twitter, themed in Catppuccin Mocha. The compose section is on the left though instead of right.
https://github.com/kylereddoch/catpuccin-mocha-ui-mastodon

birdui catppuccin-mocha catppuccin-theme catpuccin mastodon

Last synced: about 19 hours ago
JSON representation

🐘 Mastodon web UI, but strongly inspired by Twitter, themed in Catppuccin Mocha. The compose section is on the left though instead of right.

• Host: GitHub
• URL: https://github.com/kylereddoch/catpuccin-mocha-ui-mastodon
• Owner: kylereddoch
• License: mit
• Created: 2025-01-11T20:10:54.000Z (3 days ago)
• Default Branch: main
• Last Pushed: 2025-01-11T20:10:56.000Z (3 days ago)
• Last Synced: 2025-01-13T07:48:50.052Z (1 day ago)
• Topics: birdui, catppuccin-mocha, catppuccin-theme, catpuccin, mastodon
• Language: CSS
• Homepage:
• Size: 698 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
## Catpuccin Mocha UI for Mastodon (A multi-column experience)

[![Supported Mastodon version](https://img.shields.io/badge/mastodon-v4.3.2-595aff)](https://github.com/mastodon/mastodon)  

![Screenhost of Catpuccin Mocha UI](images/7525cd455503d0f959648342e32bcc3040ddfa00d95680557b87d5d9f6c44655.png)

Theme colors taken from [Jason Crabtree's](https://github.com/jcrabapple/mastodon-bird-ui-catppuccin-mocha) Catpuccin Mocha BirdUI. It has been edited so the compose area is on the left as opposed to the right as in the original [BirdUI](https://github.com/ronilaukkarinen/mastodon-bird-ui).

## How to install

Right now, you will need to install via an extension like [Stylus](https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) to apply the CSS to your browser.

1. Create a new Style.

2. Copy the contents of layout-multiple-columns.css

3. Paste contents into the new stylus style, enter the URL(s) you want it to apply to, and save your style.

4. Now when you go to the URL(s) you entered, the style will be applied.