Dropdown background broken when Mastodon Bird UI theme is selected

[MrDariusz]

Steps to reproduce:

1. Go to Settings → Preferences → Appearance
2. Set the theme to any Mastodon Bird UI variant (e.g. Bird UI Auto)
3. Open any <select> dropdown on the page

Expected behavior:
Dropdown list should have a dark background consistent with the selected theme.

Actual behavior:
The dropdown list has a white/light background, making the options hard or impossible to read. This appears to affect all <select> elements rendered via .simple_form select across the settings pages.

Screenshots:

Version: v4.6.0-alpha.8

[rollecode]

I had this issue before, and it didn't seem to be related to the Mastodon Bird UI, as it happened in the core. See mastodon/mastodon#37332. I need to test it with the latest version to see if it's back in the core.

[rollecode]

Not seeing it here in today's main. mastodon/mastodon@6b26164

I added these three to my fork earlier:

• mementomori-social/mastodon@8ab63cb
• mementomori-social/mastodon@37ac2af
• mementomori-social/mastodon@37ac2af

Can you confirm the issue to core that Mastodon issue so they'll reopen the bug issue? Otherwise, let me know how to reproduce it in the Mastodon Bird UI and/or suggest a fix.

I'm closing this for now.

[MrDariusz]

I found the root cause:

In mastodon-bird-ui-nightly/src/variables/_tokens.scss, the variable is defined as:

--color-bg-secondary: rgb(255 255 255 / 5%);

This resolves to #ffffff0d — nearly fully transparent white — which is used as the background for .simple_form select. Since the native <select> dropdown renders outside the page’s stacking context, it inherits a white system background instead of the dark one, making the dropdown appear broken.

Fix:

Changing the variable to a solid color resolves the issue (color #21212c default mastodon) :

--color-bg-secondary: #21212c;

After change is working corectly:

Hope this helps track it down!

[rollecode]

Thanks for investigating, I'll check it out soon.