chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add instructions to install Tangerine UI as an optional theme

Browse source
This commit is contained in:
Niléane 2023-07-19 16:56:44 +02:00
commit 733d4ee127
No known key found for this signature in database
1 changed files with 60 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

80
README.md
View file

@ -1,45 +1,85 @@
# Tangerine UI for Mastodon 🍊🐘
A Tangerine redesign for Mastodon's Web UI, using just CSS.
Tangerine UI features a bubblier look, a more compact timeline, round avatars, and a soft color palette.
* Live demo at [nileane.fr](https://nileane.fr)
* [See the announcement post](https://nileane.fr/@nileane/110691663040709608) on Mastodon
## Variants
### Tangerine 🍊
Default variant for Tangerine UI, featuring a soft orange palette.
* **Tangerine 🍊**
Default variant for Tangerine UI, featuring a soft orange palette.
![a profile page on Mastodon featuring Tangerine UI in light mode](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/77f49e2a-74c7-4d94-a427-c991289f2383)
![a profile page on Mastodon featuring Tangerine UI in dark mode](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/6891bfde-c5a2-43a6-8357-76c5f8b0f8d3)
![TangerineUI Mobile](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/b10f3e72-0a58-4b0d-8f00-f7210958483c)
![Tangerine UI's orange palette, both in dark and light modes.](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/5048329b-9d95-4b11-a859-48c1f37d54e6)
* **Purple 🪻**
For those of you who like Tangerine UI but want to stick to Mastodon's purple palette.
### Purple 🪻
For those of you who like Tangerine UI but want to stick to Mastodon's purple palette.
![Tangerine UI's purple variant, both in dark and light modes.](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/c01c7a54-d2db-4fe5-a0f6-dc6e77cfe128)
![a profile page on Mastodon featuring Tangerine UI's purple variant in light mode](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/f3ab51d2-c94d-4192-a1c8-6d15b0d9025a)
![a profile page on Mastodon featuring Tangerine UI's purple variant in dark mode](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/2322a5ea-6fce-4acc-9e53-92a9bae72e89)
![TangerineUI Mobile in purple](https://github.com/nileane/TangerineUI-for-Mastodon/assets/914451/f2098d06-7c48-4282-b5f6-a62c38155c7b)
## Installation for instance admins
## How to use
**Tangerine UI is contained in a single CSS file.**
* To use on your instance, copy & paste the contents of [`TangerineUI.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI.css) to the **Custom CSS** field in the administration panel on your Mastodon instance (Navigate to https://*domain*/admin/settings/appearance).
### Install Tangerine UI as the only theme on your instance:
* Copy & paste the contents of [`TangerineUI.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/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`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI-purple.css) instead.
* ⚠️ 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 settings. Please make sure there is a consensus among your users for doing so.
* ⚠️ **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 settings.** 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 site theme for your users.
* If you're not an admin, you can use Tangerine UI with a browser extension (ie. [Stylus](https://add0n.com/stylus.html)).
### Install Tangerine UI as an optional theme on your instance [Recommended]:
1. Add the files and folders from [this repository](https://github.com/nileane/TangerineUI-admins) to your Mastodon themes directory:
* [To be added: instructions on how to install Tangerine UI as an optional theme for your users on your instance]
```
app/
javascript/
styles/
tangerineui.scss | **new**
tangerineui-purple.scss | **new**
contrast/
...
fonts/
...
tangerineui/ | **new**
layout-single-column.scss | **new**
tangerineui-purple/ | **new**
layout-single-column.scss | **new**
```
2. **Add your themes to the config.** This is what [the default themes.yml](https://github.com/tootsuite/mastodon/blob/master/config/themes.yml) looks like in Mastodon. To make Tangerine UI visible in your users's settings, you need to add a new line to [`themes.yml`](https://github.com/tootsuite/mastodon/blob/master/config/themes.yml) (`).
```yml
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**
```
3. **Add a human-friendly name for the themes (optional).** You can edit each desired language's locale file in `config/locales/[lang].yml` to add a localized string name for your theme's `themeName` as added in the previous step. For example, [the default `config/locales/en.yml`](https://github.com/tootsuite/mastodon/blob/041ff5fa9a45f7b8d1048a05a35611622b6f5fdb/config/locales/en.yml#L942-L945) contains localizations for the three default themes that ship with Mastodon, into the `en`glish language. You need to do this for every language you expect your users to use, or else they will see the unlocalized `themeName` directly.
```yml
themes:
contrast: Mastodon (High contrast)
default: Mastodon (Dark)
mastodon-light: Mastodon (Light)
tangerineui: Tangerine UI | **new**
tangerineui-purple: Tangerine UI (Purple) | **new**
```
4. **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.
## Installation for regular users:
* Install a browser extension that allows you to inject CSS on a webpage, such as [Stylus](https://add0n.com/stylus.html), or [Live CSS Editor](https://github.com/webextensions/live-css-editor)
* Copy & paste the contents of [`TangerineUI.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI.css) to the extension's editor
* 🪻 For the purple variant, copy the contents of [`TangerineUI-purple.css`](https://github.com/nileane/TangerineUI-for-Mastodon/blob/main/TangerineUI-purple.css) instead.
## Things to know
* **Tangerine UI currently only supports Mastodon's single column layout**. The advanced view (multiple columns) will not be affected.
* **Tangerine UI auto-switches from light to dark mode based on your OS preference**, whether you set your Mastodon theme to *Mastodon (Dark)* or *Mastodon (Light*).
* Check your Mastodon instance version before using. The latest Mastodon release checked to be compatible is indicated in the CSS file header.
* Glitch-soc and Hometown instance admins beware: Tangerine UI is currently only meant to be applied to Mastodon's vanilla Dark and Light themes.
* If you are a user on a Glitch-soc or Hometown instance using a browser extension, first switch your instance to the Mastodon flavour before applying Tangerine UI.
* **Glitch-soc** and **Hometown** instance admins beware: Tangerine UI is currently only meant to be applied to Mastodon's vanilla Dark and Light themes.
* If you are a user on a Glitch-soc instance using a browser extension, first switch your instance to the vanilla flavour before applying Tangerine UI.
## Accessibility
* I have not yet adapted Tangerine to Mastodon's *High Contrast* theme setting. Please consider that some of your users may depend on it.