4.0.0-alpha.8.rc

4.0.0-alpha.8.rc: 2026-05-03

Note

WIP Notice: This is a heavily work-in-progress upcoming version of Mastodon Bird UI. This version is part of the ongoing major rewrite (see issue #172) and is finally fully modularized.
💀 Compatibility: Mastodon v4.6.0-alpha.7-2026-05-02 (nightly from Mastodon main after 2026-05-02)

This version will not support older Mastodon versions deployed before 2026-05-02. For older Mastodon servers, use previous Mastodon Bird UI versions designed for those releases - each release candidate is dated to match its equivalent Mastodon version state.

ested against Mastodon main at v4.6.0-alpha.7.

What changed

New: auto bundle that follows Mastodon's Appearance radios

A new mastodon-bird-ui-auto theme replaces the per-scheme theme files in the dropdown. It wraps the light tokens in [data-color-scheme="light"] and falls back to prefers-color-scheme: light when the attribute is absent (logged-out browsing). High contrast was already wrapped in html[data-contrast="high"] so it activates automatically. Mastodon's own Color scheme (Auto / Light / Dark) and Contrast (Auto / High) radios in Appearance settings now drive Bird UI directly. See #182.

Theme dropdown is now slim

install-to-mastodon.sh no longer generates these duplicate theme entries:

• mastodon-bird-ui-dark (use Color scheme = Dark instead)
• mastodon-bird-ui-light (use Color scheme = Light instead)
• mastodon-bird-ui-contrast (use Contrast = High instead)
• mastodon-bird-ui-dark-change-to-stars
• hide-finnish, hide-finnish-change-to-stars, hide-translate-links
• mastodon-bird-ui-light-hide-finnish, mastodon-bird-ui-light-hide-finnish-change-to-stars, mastodon-bird-ui-light-hide-translate-links
• mastodon-bird-ui-accessible-hide-finnish

After upgrading and re-running the install script, the dropdown is down to four entries: Mastodon Bird UI, Mastodon (Dark), Mastodon Bird UI (Accessible), Mastodon Bird UI (Accessible Plus).

Bug fixes

• Star icon and counter alignment fixed when reduce-motion is enabled. Sparkle and ring pseudo-element animations now fire in both motion modes since they are decorative, not transform animations. Closes #149.
• Refactored :is() complex selector in mobile sign-out CSS to a plain comma list so PostCSS no longer emits "Complex selectors" warnings during Mastodon's Vite build. Closes #178.
• Likely also closes #186 as a side-effect: the old _variables-light.scss wrapper applied light tokens even when data-color-scheme="dark" was set, which caused notification colors to disappear when the OS preferred light but Mastodon was set to dark. The new auto bundle scopes light tokens correctly.

Impact by install method

Custom CSS users (paste CSS into Mastodon admin)

No changes have been made for the workflow of Custom CSS users. The compiled dist/mastodon-bird-ui.css ships and behaves identically.

If you want a forced-light or forced-stars or hide-Finnish-translate-links bundle, the SCSS sources stay in src/:

• src/mastodon-bird-ui-light.scss
• src/mastodon-bird-ui-stars.scss and src/mastodon-bird-ui-light-stars.scss
• src/micro-interactions/_star.scss
• src/variants/_hide-finnish.scss
• src/variants/_hide-translate-links.scss

Build them yourself with npx parcel build src/<entry>.scss --dist-dir dist --no-source-maps --no-optimize and paste the resulting CSS into Mastodon admin.

Mastodon admins running install-to-mastodon.sh

After git pull on the Bird UI clone and re-running the install script, your themes.yml will shrink to four entries (or two if you skip variations). Users who had selected one of the removed theme entries fall back to the default Mastodon Bird UI auto theme without crashing (Mastodon's current_theme helper validates setting_theme against Themes.instance.names on every render). The user's stored theme value stays in their settings until they save a new Appearance setting.

To restore a previous look:

• Was on mastodon-bird-ui-light -> select Mastodon Bird UI and set Color scheme = Light.
• Was on mastodon-bird-ui-contrast -> select Mastodon Bird UI and set Contrast = High.
• Was on a *-stars or *-hide-finnish / *-hide-translate-links variant -> compile the matching SCSS source (see Custom CSS section above) and paste into Mastodon admin Custom CSS.

The old per-variant entry SCSS files (mastodon-bird-ui-light.scss, hide-finnish.scss, etc.) will remain on disk in app/javascript/styles/ as orphans. They are not referenced from themes.yml so Mastodon will not compile them; remove them at your leisure.

Heads up for mementomori-social/mastodon fork users

If you run the mementomori-social fork, the stars / hide-Finnish / hide-all-translate-links variants are now exposed as user-preference checkboxes in Appearance settings instead of separate themes. See the fork repo for the wiring (Ruby setting + getter + html class + view checkbox + locale): https://github.com/mementomori-social/mastodon/tree/mementomods-2026-05-02