mirror/Tangerine-UI
1
0
Fork 0
mirror of https://github.com/nileane/TangerineUI-for-Mastodon synced 2024-11-24 15:16:11 +09:00
Code
562776b87b
Tangerine-UI/README.md
Niléane 562776b87b
Moved up the Compatibility section
2023-11-22 13:53:12 +01:00

15 KiB
Raw Blame History

Tangerine UI for Mastodon

A Tangerine redesign for Mastodon's Web UI.

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 • 👋 Follow Tangerine UI on Mastodon • 📝 Changelog

Table of contents

Variants

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

TangerineUI-tangerine  

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

TangerineUI-purple  

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

TangerineUI-cherry

Features

  • 🧑‍🔬 Support for the advanced web interface
    All variants of Tangerine UI support Mastodon's multi-column layout.
TangerineUI-multicolumn
  • 🚀 Thoughtful animations
    The rocket flies!

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

  • ⏺️ 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

List of instances that use Tangerine UI

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)

Compatibility

✅ Tangerine UI v2.x is compatible with instances running Mastodon 4.3 and newer.1

⚠️ For instances running Mastodon 4.1.x or 4.2.x, use Tangerine UI v1.9.4 instead.23

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

Installation for Mastodon admins

Install Tangerine UI as the only theme on your instance:

  • 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).

⚠️ Caution: 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.

Install Tangerine UI as an optional theme on your instance [Recommended]:

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.

  1. Copy the files from mastodon/app/javascript/styles/ in this repository to your Mastodon themes directory app/javascript/styles/:
# Where $REPO is this repository, and $INSTALLDIR is your Mastodon installation.
cp -r $REPO/mastodon/app/javascript/styles/* $INSTALLDIR/app/javascript/styles
  1. Add Tangerine UI to themes.yml. To make Tangerine UI available in your users's settings, you need to add a new line to config/themes.yml. Here we're adding 2 new lines, one for Tangerine UI, another for Tangerine UI's purple 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-cherry: styles/tangerineui-cherry.scss    | **new**
  1. 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                           | **new**
  tangerineui-purple: Tangerine UI (Purple)           | **new**
  tangerineui-cherry: Tangerine UI (Cherry)           | **new**
  1. 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' and 'Tangerine UI (Purple)' as their site theme:

Screenshot : select Tangerine UI as a theme in appearance settings on Mastodon.

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):

Screenshot : select Tangerine UI as the default theme for your Mastodon instance in the administration panel.

Installation for Glitch-soc admins

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:

  1. Copy the files from mastodon/app/javascript/styles/ in this repository to your Mastodon themes directory app/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
  1. Copy the files from mastodon/app/javascript/skins/vanilla/ in this repository to your Glitch-soc skins directory app/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
  1. 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

Glitch-soc settings. Flavours → Vanilla Mastodon → Skin

Installation for regular users

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

  1. Install any browser extension that allows you to inject CSS on a webpage, such as Stylus, or Live CSS Editor
  2. Copy & paste the contents of TangerineUI.css to the extension's editor

⚠️ 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.

💡 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.

Accessibility

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.

Credits

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

Support me <3

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

  1. 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. ↩︎

  2. The advanced web interface (multi-column layout) is not supported by Tangerine UI v1.9.4 and will fall back to Mastodon's default appearance if enabled. ↩︎

  3. The Cherry variant is not available with Tangerine UI v1.9.4. ↩︎