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: 3 months 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 (4 months ago)
• Default Branch: main
• Last Pushed: 2025-01-23T21:25:53.000Z (4 months ago)
• Last Synced: 2025-03-01T09:53:34.964Z (3 months ago)
• Topics: birdui, catppuccin-mocha, catppuccin-theme, catpuccin, mastodon
• Language: CSS
• Homepage:
• Size: 699 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.  

### Coming soon!

I am aware of an issue with margin issues when using this on instances running Glitch SOC. I am working on a fix.