Minor UX Regression

[webysther]

After the migration to use pure CSS and the changes I noted a minor regression in combox:

This happens on dark theme.

[sissbruecker]

Which OS and browser are you using?

Edit: Can sort of reproduce this on macOS where the dropdown now uses a light background instead of a dark one. It seems the issue is that the background color of the select is a semi transparent white, which causes the browser / OS to use a light background for the overlay. Using a dark color without transparency fixes it.

The transparent white was an easy solution to make the select look distinct from the background, regardless of the background color. Ideally there would be a way to tell the browser to use a dark overlay, otherwise this might require defining different select background colors for each usage scenario.

[webysther]

Which OS and browser are you using?

Edit: Can sort of reproduce this on macOS where the dropdown now uses a light background instead of a dark one. It seems the issue is that the background color of the select is a semi transparent white, which causes the browser / OS to use a light background for the overlay. Using a dark color without transparency fixes it.

The transparent white was an easy solution to make the select look distinct from the background, regardless of the background color. Ideally there would be a way to tell the browser to use a dark overlay, otherwise this might require defining different select background colors for each usage scenario.

Windows 11 Pro with Chrome 129. I don't use the Light, but I switch just test and is fine but the White version now is blow white everywhere:

For all other UX changes only get better!

PS: Dark on Android 14 works just fine.

[webysther]

https://github.com/sissbruecker/linkding/blob/master/bookmarks/styles/theme/forms.css#L144

.form-select option {
    background-color: var(--body-color) !important;
}

This did the trick:

[sissbruecker]

Yeah, that won't work on macOS or iOS unfortunately, browsers there always use a native dropdown menu that uses either a light or dark theme. But it's a workaround for other systems for now.

[sissbruecker]

Should be fixed now. On Windows, at least for Chrome and Edge, I had to set explicitly set the background on the options as you suggested. Apart from that there's a color-scheme CSS property that should tell browsers what scheme to use for native elements, which seems to ignored by most browser / OS combinations. However apart from some browsers on Windows it looks like most others don't allow customizing the dropdown, so even if it ends up using a light theme, it at least doesn't look broken.