Clarity: [UI] Dark theme select options are not visible

[hippee-lee]

Edit

Stackblitz with v2 reproduction: https://stackblitz.com/edit/gh-1853-select-input-dark-theme-issue

Select one ... (check one with "x")

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

Select option text should be readable

Actual behavior

Select option text is not visible

Reproduction of behavior

Environment details

• Angular version: 5.x.x

• Clarity version:

• OS and version: Windows 10

• Browser: [ Chrome XX, IE11, Firefox ]

[RoelRoel]

This is still not fixed correctly. Now the text of the options has a white color but the options have no background color so you can't read the text.

[hippee-lee]

This was fixed but it looks like a regression was introduced since then.

Stackblitz with a reproduction: https://stackblitz.com/edit/gh-1853-select-input-dark-theme-issue

[hippee-lee]

This was fixed via #3941

[rogerfar]

@hippee-lee this is either broken again, or wasn't fixed yet:
https://stackblitz.com/edit/clarity-dark-theme-v2-enzagq?file=src/app/app.component.html

[hippee-lee]

• Chrome / Safari work as expected
• Firefox does not work.
• Still need to check IE11 / Edge

NOTE: the stackblitz example with the latest (as of 1/21/2020) Clarity installed: https://stackblitz.com/edit/clarity-dark-theme-v2-dnad9x

[rogerfar]

Wait, how does Chrome work as expected? My screenshot is from Chrome 79.

[hippee-lee]

I updated to the latest versions.
https://stackblitz.com/edit/clarity-dark-theme-v2-dnad9x

[ezekeal]

Confirmed sill an issue
clarity-v2-dark
FF 77.0.1
OSX: 10.15.4 - dark

[gnomeontherun]

I don't see this behavior while reviewing this issue. If it persists, please provide an updated demo and details with current versions of Clarity for us to triage. Closing as stale and appearing to be fixed.

[rogerfar]

@gnomeontherun it's OK looking I suppose, if this is by spec then yeah, let's leave it. But I still have to add extra hack CSS to make to colors work. At least it's consistent on every browser.

https://stackblitz.com/edit/clarity-v4-dark-theme-abnpwk?file=src%2Fapp%2Fapp.component.html

[gnomeontherun]

@hippee-lee can you take a look at this this week?

[hippee-lee]

@rogerfar - can you explain more about what needs a css override? I'm not seeing any css to override the default styles in this example from above.

The issue here is specific to the options in a native select element - originally there was an issue with the font color not being set in dark theme and then there were some regressions that broke that.

I don't see anything broken in the stackblitz or any custom css that applies to the font color in the select menu.

[rogerfar]

That's correct, the original issue was the font color being wrong in the selects, black on black.

But that's why I said, it's OK working, some of the other selects are now completely missing styling.

[hippee-lee]

Ok, which ones? Sorry I don't see any issues in the stackblitz or the screen captures. What am I missing?

[rogerfar]

I'm referring to the first 3 selects in the stackblitz:

[hippee-lee]

They look like they are working to me:

Edge

Firefox

Safari

Chrome

What am I missing?

[RoelRoel]

They are not dark themed.

[rogerfar]

@hippee-lee I was hoping for something like this, like it was in v3:

[hippee-lee]

Clarity doesn't set any style for the background color of the options ... that comes from the OS. When I switch my macOS appearance to Dark, this is what a demo with Clarity v3 looks like:

Dark

Light

I didn't go through all of the browsers but expect they will behave similar.

[rogerfar]

Odd that it does work on the multi selects, it's the same thing but with an added attribute as a regular select.

[hippee-lee]

The options dropdown _thing_ (not a technical term) is owned by the OS, not the browser. Some browsers do allow css to set style, others do not. Since it is owned by the OS we let it be.

I'm going to close this as its not something we have control over. Please lmk if you have a reason to keep it open.

[rogerfar]

I don't think that's entirely true, why design all other elements to have dark backgrounds, but the select?

This code works fine for all browsers in Windows:
https://stackblitz.com/edit/clarity-v4-dark-theme-dhwreq?file=src%2Fstyles.css
Chrome:

Firefox:

[hippee-lee]

That code will not work at all in Safari or chrome on macOS.

[RoelRoel]

Does that matter?

[hippee-lee]

This is a really old issue. In the last discussion about select option backgrounds that I remember, we didn't want to implement styles that were not consistent across all browsers/OSes.

That said, I looked back at v2, v3 and v4 on macOS: Safari, Chrome and Firefox and Windows: Edge, Firefox and Chrome and it doesn't look like we have ever implemented a background-color for select options in any of those versions. We do however have it implemented in the new Core select components.

Since this issue was about option text not being visible I'd like to leave it closed because option text is currently visible in light / dark themes for @clr/ui on all supported OSes and browser combos.

If the request is to have the background color for select options be specific to the themes for the browsers that support it, please open up a new issue and request it there so we can keep this issue separate from the enhancement request.