Tangerine UI features a bubblier look, a more compact timeline, round avatars, and a soft color palette that automatically switches between light and dark modes.
🕹️ Live demo @ nileane.fr • 📢 Announcement post on Mastodon • 📝 Changelog
- Green variant
A fork specific variant with a green palette
- Variants)
- List of instances that use Tangerine UI
- Installation
- Things to know
- Accessibility
- Credits
- Support me
Note: If you find an issue with one of these additional variants, please report it here and NOT upstream.
- 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 palette.
- Green 🍏 A fork specific variant with a green palette
These are known instances that have enabled Tangerine UI for their users, either as the only theme, or as an optional theme.
If you're an admin and have installed Tangerine UI on your instance, feel free to add yours here (open a PR, or just DM me)
| Instance | User count | Installed as... | Default theme? |
|---|---|---|---|
| piaille.fr | 10K+ | an optional theme | No |
| norden.social | 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 |
| 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) |
| 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) |
| toulouse.social | 1+ | the only theme | Yes (Tangerine variant) |
| mastodon.projetretro.io | 1+ | an optional theme | No |
| mstdn.0xdj.dev | 1 | the only theme | Yes (Tangerine variant) |
- Copy & paste the contents of
TangerineUI.cssto 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.cssinstead. - 🍏 For the green variant, copy the contents of
TangerineUI-green.cssinstead.
- 🪻 For the purple variant, copy the contents of
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.
- 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, another for Tangerine UI's purple variant, and another for Tangerine UI's green variant:
default: styles/application.scss
contrast: styles/contrast.scss
mastodon-light: styles/mastodon-light.scss
tangerineui: styles/tangerineui.scss | **new**
tangerineui-purple: styles/tangerineui-purple.scss | **new**
tangerineui-green: styles/tangerineui-purple.scss | **new**- Add a localized name (optional). You can edit each desired language's locale file in
config/locales/[lang].ymlto 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 | **new**
tangerineui-purple: Tangerine UI (Purple) | **new**
tangerineui-green: Tangerine UI (Green) | **new**- Compile theme assets and restart. Run
RAILS_ENV=production bundle exec rails assets:precompileand restart your Mastodon instance for the changes to take effect.
Your users should now be able to choose 'Tangerine UI' and 'Tangerine UI (Purple)' 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:
- 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:precompileand 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:
- Install any browser extension that allows you to inject CSS on a webpage, such as Stylus, or Live CSS Editor
- Copy & paste the contents of
TangerineUI.cssto the extension's editor- 🪻 For the purple variant, copy the contents of
TangerineUI-purple.cssinstead. - 🍏 For the green variant, copy the contents of
TangerineUI-green.cssinstead.
- 🪻 For the purple variant, copy the contents of
💡 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.
- Tangerine UI currently only supports Mastodon's single column layout. The advanced web interface (multiple columns) will not be affected.
- Tangerine UI auto-switches from light to dark mode based on your OS preference.
- Check your Mastodon instance version before using. The latest Mastodon release checked to be compatible is indicated in the CSS file header.
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 recommend installing Tangerine UI as an optional/revertable theme instead.
- The logo for Tangerine UI was designed by Younis @younishd. 🍊
- Huge thanks to Roni Laukkarinen whose work on Mastodon Bird UI I adapted for some parts of the design.
If you enjoy Tangerine UI, jobless me would really appreciate a tip 💛!