A major update is coming soon for my Mastodon instance and for Mastodon Bird UI. Here's how the system is changing from the old version (pre-v4.6.0-alpha.3):
Old system:
- The HTML used a data-user-theme="mastodon-bird-ui-dark" attribute.
- Mastodon Bird UI used selectors like html[data-user-theme="mastodon-bird-ui-dark"] to apply styles only when that theme was active.
- Multiple themes could exist in one stylesheet, applied conditionally through these selectors.
New system (v4.6.0-alpha.3):
- The data-user-theme attribute no longer exists.
- The theme is now defined by which stylesheet file is loaded through themes.yml.
- If your stylesheet is loaded, your styles automatically apply.
- The only HTML attributes now are: data-color-scheme="dark|light|auto" for the user's color preference and data-contrast="normal|high" for the user's contrast preference
What this means for Mastodon Bird UI:
- Bird UI currently wraps everything in selectors like html[data-user-theme="mastodon-bird-ui-dark"] to apply styles only when that theme is selected.
- In the new system, these selectors must be removed entirely. If the Mastodon Bird UI stylesheet is loaded, its styles should apply directly. The loaded file itself now determines the active theme.
https://github.com/ronilaukkarinen/mastodon-bird-ui/issues/177#issuecomment-3795167051
#MastodonBirdUI #CSS #MastoAdmin #OpenSource #BuildInPublic #BirdUI #Mastodon