# Mastodon Modern  <a href="https://nogithub.codeberg.page"><img src="https://nogithub.codeberg.page/badge.svg" alt="Please don't upload to GitHub"></a>
A UserStyle & theme that improves the look & feel of Mastodon. Can be used with other themes that only change colors.

| ![](images/mastomodern-preview.png)  | ![](images/mastomodern-post.png) | ![](images/mastomodern-advanced-view.png) | ![](images/mastomodern-mobile-profile.png) |
| --- | --- | --- | --- | --- |

## **[Install with the Stylus browser extension!](https://userstyles.world/style/4773)**
Please do not use the "Stylish" browser extension: https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/

## Instance Admins:

> Previous instructions/example were outdated, I may need help with instructions here as I am not able to run my own instance to test atm.<br>[The Chuckya Mastodon fork has implemented the style here](https://github.com/TheEssem/mastodon/tree/main/app/javascript/styles)

For now, here are some notes:
- **Make sure to use the compiled code from [this repo's `modern.css`](modern.css)**
- **The default Mastodon theme needs to be imported**
- **For light theme, include `@import 'mastodon-light/diff';`**
- **For High Contrast theme `@import 'contrast/diff';`**
- While not tested thoroughly, can work well with other color themes.

**Note:** The UserStyle usually receives updates earlier to make sure everything is ready for the compiled CSS. 

### ⚠️ IF ON [GLITCH-SOC](https://glitch-soc.github.io/docs/)
**Make sure to apply the glitch-soc fixes from [the `glitch-fixes.css` file!](glitch-fixes.css)**

## Attribution
If you use this style for your own server, please make sure to at least credit me somewhere with a [link to my website](https://freeplay.codeberg.page/) or [to this style's repository](https://codeberg.org/Freeplay/Mastodon-Modern) :)

Make sure to see the license below for more details:

<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>. 

<br><br>
<div align="center">
<img src="https://git.gay/Freeplay/pages/raw/branch/waf/assets/blobfox/blobfoxnomstrawberry.svg" width="42">

If you support my work and can afford to,<br>
[**you can donate to me here :)**](https://www.buymeacoffee.com/freeplay)


</div>