Skip to content

🐘🐦 Mastodon web UI, but strongly inspired by Twitter, themed in Catppuccin Mocha.

License

Notifications You must be signed in to change notification settings

jcrabapple/mastodon-bird-ui-catppuccin-mocha

Β 
Β 

Repository files navigation

Mastodon BirdUI with Catppuccin Mocha colors

This is a Catppuccin Mocha variant of Roni Laukkarinen's Mastodon BirdUI.

Screenshot

Installation for Mastodon instance admins

This is assuming you don't already have BirdUI installed. If you do, you will need to make some modifications to your config/themes.yml.

  1. Copy the contents of layout-single-column.css and layout-multiple-columns.css and paste them (or one of them) to the Custom CSS in the Appearance settings in your instance (https://yourinstance/admin/settings/appearance). It might be recommended using the single layout CSS as "base" and use the advanced view CSS with browser extension (as it's desktop only anyway).

Screen-Shot-2023-03-31-13-25-52

Make Mastodon Bird UI as optional by integrating it as 'Site theme' in settings for all users

Mastodon Bird UI can be integrated as a Site theme for all instance users as optional.

Please note: These include modifications to the Mastodon core so do it only at your own risk! I highly recommend you to make the modifications in local development envinronment, push them to your fork, then git pull that fork to live after confirmed working.

If you'd like a different branding for your instance like "Elephant" without any mention of birds, use Bird UI Theme Admins by @stux. If you want Mastodon Bird UI to be as default, read along.

Cd to your Mastodon directory (usually $HOME/live) you can run these bash commands (Please note: These add Mastodon Bird UI as name "Mastodon Bird UI (Dark)" + variants as default, while retaining the original themes as secondary themes) and run below.

Mastodon main/nightly: nightly
Mastodon stable: main

export MASTODON_VERSION_FOR_BIRD_UI="main"

# Create a new folder for the theme
mkdir -p app/javascript/styles/mastodon-bird-ui-catppuccin-mocha

# Download the CSS file for single column layout
wget -N --no-check-certificate --no-cache --no-cookies --no-http-keep-alive https://raw.githubusercontent.com/jcrabapple/mastodon-bird-ui-catppuccin-mocha/$MASTODON_VERSION_FOR_BIRD_UI/layout-single-column.css -O app/javascript/styles/mastodon-bird-ui-catppuccin-mocha/layout-single-column.scss

# Download the CSS file for multiple column layout
wget -N --no-check-certificate --no-cache --no-cookies --no-http-keep-alive https://raw.githubusercontent.com/jcrabapple/mastodon-bird-ui-catppuccin-mocha/$MASTODON_VERSION_FOR_BIRD_UI/layout-multiple-columns.css -O app/javascript/styles/mastodon-bird-ui-catppuccin-mocha/layout-multiple-columns.scss

# Create dark theme file
echo -e "@import 'application';\n@import 'mastodon-bird-ui-catppuccin-mocha/layout-single-column.scss';\n@import 'mastodon-bird-ui-catppuccin-mocha/layout-multiple-columns.scss';" > app/javascript/styles/mastodon-bird-ui-catppuccin-mocha.scss

Edit your /config/themes.yml file to look similar to this (you may or may not have these other themes installed, the important part is to add mastodon-bird-ui-catppuccin-mocha at the bottom):

default: styles/mastodon-bird-ui-dark.scss
mastodon-bird-ui-light: styles/mastodon-bird-ui-light.scss
mastodon-bird-ui-contrast: styles/mastodon-bird-ui-contrast.scss
mastodon-dark: styles/application.scss
mastodon-light: styles/mastodon-light.scss
contrast: styles/contrast.scss
tangerineui: styles/tangerineui.scss
tangerineui-purple: styles/tangerineui-purple.scss
tangerineui-cherry: styles/tangerineui-cherry.scss
tangerineui-lagoon: styles/tangerineui-lagoon.scss
mastodon-bird-ui-catppuccin-mocha: styles/mastodon-bird-ui-catppuccin-mocha.scss

OPTIONAL: After this you can edit localisations in config/locales/en.yml (nano config/locales/en.yml) and add this line:

  mastodon-bird-ui-catppuccin-mocha: Mastodon Bird UI Catppuccin Mocha

Same for the localizations of your choice, for example config/locales/fi.yml (nano config/locales/fi.yml):

  mastodon-bird-ui-catppuccin-mocha: Mastodon Bird UI Catppuccin Mocha (Tumma)

Make sure everything is set in place, then rebuild all the assets and restart all the services:

RAILS_ENV=production bundle exec rails assets:precompile
sudo systemctl restart mastodon-web mastodon-sidekiq mastodon-streaming

And you're done!

Installation for regular users, contributing and testing

  1. Install Live CSS Editor (or any other extension like Stylus that allows you to inject CSS into web pages) or use Unite for macOS or use the user.js by eg
  2. Copy the contents of layout-single-column.css and layout-multiple-columns.css
  3. Open extension and paste the contents of both CSS files into the editor
  4. If you use Live CSS Editor, click πŸ“Œ-icon so the styles will be remembered for the domain or if you want just to use it as needed, activate styles from the extension's popup

About

🐘🐦 Mastodon web UI, but strongly inspired by Twitter, themed in Catppuccin Mocha.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 98.1%
  • JavaScript 1.9%