Tangerine UI is a vibrant, fully-featured custom theme for Mastodon's Web UI that comes in three variants: π Tangerine, πͺ» Purple, and π Cherry.
πΉοΈ Live demo @ nileane.fr β’ π Follow Tangerine UI on Mastodon β’ π Release notes
- Variants
- Features
- List of instances that use Tangerine UI
- Compatibility
- Installation
- Accessibility
- Credits
- 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.
π Cherry
I won't be held responsible if you end up licking your screen because of this one.
- π§βπ¬ Support for the advanced web interface
All variants of Tangerine UI support Mastodon's multi-column layout.
![Mastodon's advanced web interface featuring Tangerine UI](https://private-user-images.githubusercontent.com/914451/284664486-bfa74219-bfef-46ec-9742-78165593e2a6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzNzgzNTEsIm5iZiI6MTcyNDM3ODA1MSwicGF0aCI6Ii85MTQ0NTEvMjg0NjY0NDg2LWJmYTc0MjE5LWJmZWYtNDZlYy05NzQyLTc4MTY1NTkzZTJhNi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODIzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyM1QwMTU0MTFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xM2E4NWE4YmRiYzQ2ZjQwMDFiMzU3YWE0N2M5OTI5ZTQ1ZWM1M2M5NmJmOGQ0NDUwOTI3ZTgzNThjYThiZjhkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.nCu_N42nM_wcXqcwZUtlEdW7ibG3gI-qcVvFw1G2Mbw)
-
π Playful animations
The rocket flies! -
π Dark mode
Tangerine UI automatically switches from light to dark mode based on your system or browser preference.1 -
π¬ 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. :)
These are known instances that have enabled Tangerine UI for their users, either as the only theme, or as an optional theme.2
Instance | User count | Installed as... | Default theme? |
---|---|---|---|
piaille.fr | 10K+ | an optional theme | No |
social.vivaldi.net | 7K+ | an optional theme | No |
norden.social | 5K+ | an optional theme | No |
convo.casa | 5K+ | an optional theme | No |
vmst.io | 2K+ | an optional theme | No |
eldritch.cafe | 1.5K+ | an optional theme | No |
octodon.social | 1K+ | an optional theme | No |
social.lol | 750+ | an optional theme | No |
shelter.moe | 350+ | an optional theme | No |
toki.social | 200+ | an optional theme | No |
dmv.community | 200+ | an optional theme | No |
pipou.academy | 100+ | an optional theme | No |
indiepocalypse.social | 100+ | an optional theme | No |
bolha.one | 20+ | an optional theme | Yes (Tangerine variant) |
i1.no | 15+ | the only theme | Yes (Purple variant) |
zeppelin.flights | 15+ | the only theme | Yes (Tangerine variant) |
catharsis.cafe | 10+ | an optional theme | Yes (Tangerine variant) |
toulouse.social | 10+ | an optional theme | Yes (Tangerine variant) |
fedinerds.social | 10+ | an optional theme | No |
nileane.fr | 5+ | the only theme | Yes (Tangerine variant) |
social.nah.re | 5+ | an optional theme | No |
esoteric.party | 5+ | the only theme | Yes (Tangerine variant) |
asso.lgbt | 5+ | the only theme | Yes (Purple variant) |
Buddyverse.xyz | 5+ | an optional theme | No |
isfeeling.social | 1+ | the only theme | Yes (Purple variant) |
ucn.social | 1+ | an optional theme | Yes (Tangerine variant) |
fedi.cyberwitches.club | 1+ | the only theme | Yes (Purple variant) |
mastodon.projetretro.io | 1+ | an optional theme | No |
β Tangerine UI (v2.x) is compatible with instances running Mastodon 4.3 and newer.3
π« Tangerine UI and Tangerine UI Legacy are not compatible with instances running Mastodon 4.0.x and older.
-
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 check the Compatibility section in this document before you proceed.
-
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 purple variant, copy the contents of
Warning
Using the 'Custom CSS' field to apply Tangerine UI will prevent all users on your instance from being able to choose another theme in their Appearance settings (see Accessibility).
Please make sure there is a consensus among your users for doing so. If not, see below how to install Tangerine UI as an optional theme for your users.
Follow these instructions if you wish to add Tangerine UI as an available theme for your users on your instance.
This will also allow you to set Tangerine UI as the default theme for your instance, while still letting your users change back to any of Mastodon's default themes in their Appearance settings.
-
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 check the Compatibility section in this document before you proceed.
-
Copy the files from
mastodon/app/javascript/styles/
in this repository to your Mastodon themes directoryapp/javascript/styles/
:
# Where $REPO is this repository, and $INSTALLDIR is your Mastodon installation.
cp -r $REPO/mastodon/app/javascript/styles/* $INSTALLDIR/app/javascript/styles
- Add Tangerine UI to
themes.yml
. To make Tangerine UI available in your users's settings, you need to add a new line toconfig/themes.yml
. Here we're adding 3 new lines, one for Tangerine UI, a 2nd one for the purple variant, and a 3rd one for the Cherry variant:
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
- Add a localized name (optional). You can edit each desired language's locale file in
config/locales/[lang].yml
to add a localized string name for Tangerine UI. You need to do this for every language you expect your users to use. Otherwise, in their themes list, they will see the unlocalized theme name ("tangerineui-purple"), instead of a readable theme name ("Tangerine UI (Purple)").
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)
- Compile theme assets and restart. Run
RAILS_ENV=production bundle exec rails assets:precompile
and restart your Mastodon instance for the changes to take effect.
Your users should now be able to choose 'Tangerine UI', 'Tangerine UI (Purple)', or 'Tangerine UI (Cherry)' as their site theme:
As an admin, you should also now be able to set Tangerine UI as the default theme for your instance (navigate to https://domain/admin/settings/appearance):
Tangerine UI does not yet support Glitch-soc's features and layout, but it can still be installed as a vanilla skin on your Glitch-soc instance:
-
Check your Mastodon version. For Tangerine UI to work properly, you need to make sure you're installing the right version for your Glitch-soc instance. Please check the Compatibility section in this document before you proceed.
-
Copy the files from
mastodon/app/javascript/styles/
in this repository to your Mastodon themes directoryapp/javascript/styles/
:
# Where $REPO is this repository, and $INSTALLDIR is your Glitch-soc installation.
cp -r $REPO/mastodon/app/javascript/styles/* $INSTALLDIR/app/javascript/styles
- Copy the files from
mastodon/app/javascript/skins/vanilla/
in this repository to your Glitch-soc skins directoryapp/javascript/skins/vanilla/
:
# 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
- Compile theme assets and restart. Run
RAILS_ENV=production bundle exec rails assets:precompile
and restart your Glitch-soc instance for the changes to take effect.
Your users should now be able to select Tangerine UI as a theme in their settings, under Flavours β Vanilla Mastodon β Skin
Even if you are not an admin on your instance, you can still use Tangerine UI with a browser extension:
- Check your Mastodon version. For Tangerine UI to work properly, you need to make sure you're using the right version for your Mastodon instance. Please check the Compatibility section in this document before you proceed.
- Install a browser extension that allows you to inject CSS on a webpage, such as Stylus, or Live CSS Editor
- 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 purple variant, copy the contents of
Important
If you are a user on a Glitch-soc instance, you must switch to the Vanilla Mastodon flavour for Tangerine UI to work properly: in your instance settings, navigate to Flavours β Vanilla Mastodon β select the 'Default' skin.
Note
Alternatively, if you wish to use a JavaScript browser extension, @Write has written a ready-to-use UserScript to load Tangerine UI on any Mastodon instance. Check out the TangerineUI-Userscript repository for instructions.
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 designed by Younis @younishd. π
If you enjoy Tangerine UI, I would really appreciate a tip π!
Footnotes
-
Tangerine UI uses the
prefers-color-scheme
CSS media feature to detect if you have requested a light or dark theme through an operating system setting or a user agent setting. β© -
If you're an admin and have installed Tangerine UI on your instance, feel free to add yours to this list. (Make a Pull Request, or just DM me) β©
-
Tangerine UI (v2.x) is also compatible with instances running a version of Glitch-soc based on Mastodon 4.3 and newer, as long as it is installed as a vanilla theme on these instances. β©
-
The advanced web interface (multi-column layout) is not supported by Tangerine UI Legacy (v1.9) and will fall back to Mastodon's default appearance if enabled. β©
-
The Cherry variant is not available with Tangerine UI Legacy (v1.9). β©