Mastodon White Theme

 Sun, 21 Jan 2024 12:01 UTC

Mastodon White Theme
Image: CC BY 4.0 by cybrkyd

UPDATE: My Mastodon instance crashed and burned! I no longer use Mastodon.

Whilst playing with the custom CSS of the Mastodon Web UI, I settled on a clean white theme with a blue colour scheme. My initial goal was to personalise the “About” page, removing all of the various mentions of “Join Mastodon” and other paraphernalia. My instance is a personal one, so there is absolutely no need to show the rules I govern myself by as well.

I ended up with about 400 lines of CSS and something that looks half-decent. Find the full CSS file on Github.

Home Page

The UI has been slimmed down and various changes have been applied.

  • Borders between the three columns have been removed
  • The Mastodon logo is gone
  • Right-side navigation tab marker added (also blue)
  • Bookmarks, Favourites and Lists links have been removed from the right-side navigation
  • Hashtags, links and buttons have the colour scheme applied
  • Bigger compose box
  • The footer is gone — no more bottom-left links and no more right-side top-three trends
Mastodon White Theme - Home

The Timeline

  • The main timeline column is wider at resolutions above 1,300px
  • The action button “Bookmark” has been removed
  • The action buttons (Reply, Boost, Favourite) have been aligned to the right
  • Link preview card — the links do not change colour when hovering

Alt Text

Whilst I always try adding alt-text to images, I do not like being made to police other people’s images, checking whether they have added alt-text or not. I have therefore removed the alt-text overlay on images in my timeline.

The Glow

When a new post arrives in the timeline, the top will glow.

Mastodon White Theme - New Timeline Post Glow

About Page

  • The Mastodon logo is gone
  • About, Server Rules and Moderated Instances links are not shown
  • The footer is gone — no more bottom-left links and no more right-side top-three trends
  • All Mastodon marketing links — gone, bye-bye!

What remains is the centre column with a brief “Hello” and a link to log-in.

Preferences and Admin Pages

The Preferences and Admin pages are mostly themed with the blue colour scheme but I have not really paid too much attention to the back-end.