bolhaverse PT

mastodon theme · v1.2.0

Bolha UI, Mastodon with the bolha look

A theme for Mastodon's web interface. Columns become cards, headers and times are set in mono, buttons are pills, and everything wears the bolha yellow (or red, in the GCN variant). Light, dark and high contrast, the way each person picks.

How to installCode on GitLab

how it looks

Advanced interface, dark
Advanced interface, dark
Advanced interface, light
Advanced interface, light
GCN variant (red)
GCN variant (red)
Single column, light
Single column, light
Single column, dark
Single column, dark
Tinted surfaces (since 1.1.0)
Tinted surfaces (since 1.1.0)

The screenshots are mockups with made-up people and posts; the real theme runs on bolha.us and jornalismo.social.

what you get

Two themes

Bolha UI (yellow) and Bolha UI GCN (red), next to Mastodon's own.

Light, dark and high contrast

Follows the colour scheme and contrast each person picks in Preferences › Appearance.

Ubuntu fonts

Ubuntu and Ubuntu Mono are bundled, so everyone sees the same type.

Small and sturdy

About 110 lines on top of the default theme, almost all design tokens. Mastodon upgrades rarely break it.

how to install

Three ways, from the most complete to the quickest. Tested on Mastodon 4.7.

1. On your server (recommended)

For from-source installs. install.sh copies the theme, the fonts and the names, and adds two lines to config/themes.yml. Use --dry-run to look first and --uninstall to remove it.

# as the mastodon user
cd ~
curl -fsSL "https://gitlab.gutocarvalho.net/open/bolha/mastodon-bolha-ui/-/jobs/artifacts/v1.2.0/raw/mastodon-bolha-ui.tar.gz?job=release" | tar -xz
./mastodon-bolha-ui-1.2.0-*/install.sh ~/live
cd ~/live && RAILS_ENV=production bundle exec rails assets:precompile

# as root
systemctl restart mastodon-web mastodon-sidekiq mastodon-streaming

Then each person picks the theme in Preferences › Appearance › Theme. To make it the default for newcomers: Administration › Server settings › Appearance.

2. With Docker

The official images have their assets built in, so the theme needs its own image. Use it for the web and sidekiq services; streaming doesn't change.

git clone https://github.com/mastodon/mastodon.git && cd mastodon
git checkout v4.7.5                      # the version you run
curl -fsSL "https://gitlab.gutocarvalho.net/open/bolha/mastodon-bolha-ui/-/jobs/artifacts/v1.2.0/raw/mastodon-bolha-ui.tar.gz?job=release" | tar -xz -C ..
../mastodon-bolha-ui-1.2.0-*/install.sh .
docker build -t my-registry/mastodon:v4.7.5-bolha-ui .
3. As custom CSS (no server access)

Paste the ready CSS into Administration › Server settings › Appearance › Custom CSS: bolha-ui.css (yellow) or bolha-ui-gcn.css (red). The same file works as a personal style with Stylus on any Mastodon 4.7 server. This way has no bundled fonts.

versions

Versions look like X.Y.Z-BUILD, and the theme shows its own wherever there is the class bolha-ui-version. What changed in each one is in the CHANGELOG.

VersionDate
1.2.02026-11-12current
1.1.02026-11-12
1.0.22026-11-09
1.0.12026-11-09
1.0.02026-11-09

where it runs

Made for bolha.us and the other bolha.io communities. The bolha Mastodon, with the theme and other features, is at custom.bolha.us.

Open source, AGPL-3.0, like Mastodon. Inspired by Tangerine UI.