Tangerine UI is a vibrant, fully-featured custom theme for Mastodon's Web UI that comes in four variants: 🍊 Tangerine, 🪻 Purple, 🍒 Cherry, and 🐠 Lagoon.

🕹️ Live demo @ nileane.fr • 👋 Follow Tangerine UI on Mastodon • 📝 Release notes

1. Overview
   • Variants
   • Features
   • List of instances that use Tangerine UI
2. Compatibility
3. Installation for Mastodon instance admins
4. Installation for regular users
5. Accessibility
6. Credits
7. Support me

🍊 Tangerine
Default variant for Tangerine UI, featuring a soft orange palette.

🪻 Purple
For those of you who like Tangerine UI but want to stick to Mastodon's purple hue.

🍒 Cherry
I won't be held responsible if you end up licking your screen because of this one.

🐠 Lagoon
Soft turquoise palette that gives neon vibes at night.

🧑‍🔬 Support for the advanced web interface
All variants of Tangerine UI support Mastodon's multi-column layout.

🚀 Playful animations
The rocket flies!

🌚 Dark mode
Tangerine UI automatically switches from light to dark mode based on your system or browser preference.¹

💬 Distinct look for DMs
It can be easy to mistake a DM for a regular post on Mastodon. Tangerine UI gives DMs a specific look, so they stand out in your timeline, and you don't make any embarrassing mistakes.

👁️ Compact timeline
Avatars are aligned on the side, margins are properly reduced, and threads are easier to read.

✴️ Phosphor icons
Tangerine UI uses a selection of icons from the beautiful Phosphor icon family

🔍 Zoom on emojis
Custom emojis are great, but they may be difficult to distinguish when they are overly detailed. Tangerine UI allows you to hover and pause over an emoji to enlarge it.

✳️ and more
Tangerine UI was designed with care and great attention to detail. Feel free to explore all the changes it brings to Mastodon's UI, and feel free to message me if you ever have any feedback to share or bugs to report. :)

This is a list of known Mastodon instances on which Tangerine UI has been installed, either as the only theme or as an optional theme.²

✅ Tangerine UI (v2.x) is compatible with instances running Mastodon 4.3 and newer.³

⚠️ For instances running Mastodon 4.1.x or 4.2.x, use Tangerine UI Legacy (v1.9) instead.⁴⁵

🚫 Tangerine UI and Tangerine UI Legacy are not compatible with instances running Mastodon 4.0.x and older.

There are two ways to install Tangerine UI on your Mastodon instance:

• as the only theme
• as an optional theme [Recommended]

1. Check your Mastodon version. For Tangerine UI to work properly, you need to make sure you're installing the right version for your Mastodon instance. Please refer to the Compatibility section in this document before you proceed.

2. Copy & paste the contents of 🍊 TangerineUI.css to the 'Custom CSS' field in the administration panel on your Mastodon instance (Navigate to https://domain/admin/settings/appearance).

   • 🪻 For the Purple variant, copy the contents of TangerineUI-purple.css instead.
   • 🍒 For the Cherry variant, copy the contents of TangerineUI-cherry.css instead.
   • 🐠 For the Lagoon variant, copy the contents of TangerineUI-lagoon.css instead.

Follow these instructions to install Tangerine UI as an optional theme on your Mastodon instance.
Your users will be able to select Tangerine UI in their settings on the web, and you will be able to set Tangerine UI as the default theme for your instance.

git clone https://github.com/nileane/TangerineUI-for-Mastodon.git ./TangerineUI
cd TangerineUI

cp install.sh.sample install.sh

./install.sh

./install.sh --skip-confirm

themes:
  contrast: Mastodon (High contrast)
  default: Mastodon (Dark)
  mastodon-light: Mastodon (Light)
  tangerineui: Tangerine UI
  tangerineui-purple: Tangerine UI (Purple)
  tangerineui-cherry: Tangerine UI (Cherry)
  tangerineui-lagoon: Tangerine UI (Lagoon)

# Where $REPO is this repository, and $INSTALLDIR is your Mastodon installation.
cp -r $REPO/mastodon/app/javascript/styles/* $INSTALLDIR/app/javascript/styles

default: styles/application.scss
contrast: styles/contrast.scss
mastodon-light: styles/mastodon-light.scss
tangerineui: styles/tangerineui.scss
tangerineui-purple: styles/tangerineui-purple.scss
tangerineui-cherry: styles/tangerineui-cherry.scss
tangerineui-lagoon: styles/tangerineui-lagoon.scss

themes:
  contrast: Mastodon (High contrast)
  default: Mastodon (Dark)
  mastodon-light: Mastodon (Light)
  tangerineui: Tangerine UI
  tangerineui-purple: Tangerine UI (Purple)
  tangerineui-cherry: Tangerine UI (Cherry)
  tangerineui-lagoon: Tangerine UI (Lagoon)

RAILS_ENV=production bundle exec rails assets:precompile

# Where $REPO is this repository, and $INSTALLDIR is your Glitch-soc installation.
cp -r $REPO/mastodon/app/javascript/styles/* $INSTALLDIR/app/javascript/styles

# Where $REPO is this repository, and $INSTALLDIR is your Glitch-soc installation.
cp -r $REPO/mastodon/app/javascript/skins/vanilla/* $INSTALLDIR/app/javascript/skins/vanilla

RAILS_ENV=production bundle exec rails assets:precompile

Even if you are not an admin on your instance, you can still use Tangerine UI with a browser extension:

1. Check your Mastodon version. For Tangerine UI to work properly, you need to make sure you're using the correct version for your Mastodon instance. Please refer to the Compatibility section in this document before you proceed.
2. Install a browser extension that allows you to inject CSS on a webpage, such as Stylus, or Live CSS Editor
3. Copy & paste the contents of 🍊 TangerineUI.css to the extension's editor
   • 🪻 For the Purple variant, copy the contents of TangerineUI-purple.css instead.
   • 🍒 For the Cherry variant, copy the contents of TangerineUI-cherry.css instead.
   • 🐠 For the Lagoon variant, copy the contents of TangerineUI-lagoon.css instead.

Please consider that some of your users may depend on Mastodon's High Contrast theme before setting Tangerine UI as the only theme on your instance. For this reason, unless you're running a single-user instance, I strongly recommend installing Tangerine UI as an optional/revertable theme instead.

The logo for Tangerine UI was originally designed by Younis @younishd. 🍊

If you enjoy Tangerine UI, I would really appreciate a tip 💛!