Display select input element with dark theme (phoenix 1.8 with DaisyUI)

Phoenix Forum Questions / Help
, ,
1

Hello.

I use Phoenix 1.8 with LiveView 1.1.16, phoenix_html 4.3.0 and daisyUI 5.0.35.

I use the usual light and dark themes for daisyUI and i have some strange behavior of input (select) element with dark theme (different behavior of an element for Windows and Linux OS).

In Win with Edge:

win edge

In Win with FF:

win FF
win FF103×236 5.86 KB

On a light background, light font is almost invisible.
In linux it’s ok.
In Linux (Ubuntu) with FF:

linux FF
linux FF102×143 9.64 KB

Does anyone have any ideas on how to fix this?

Or may be is it possible to set the background color for the drop-down menu directly? How can this be done?

2

Maybe you have a browser plugin in your Windows browsers that interferes? I have DarkReader and I have to make it not activate on certain websites because it introduces exactly the eye-sores that you are showing.

3

Thanks, dimitarvp!

I don’t use any browser plugins. Just in case, I tried it on a different computer – the situation is the same.

I use standard elements from core_components.ex and all elements work fine with the dark theme except “input” (select).

Moreover, I tried setting the background color directly (for example bg-green-900) and again got different behavior:

Linux

1

2

Any other ideas?

If anyone is using the “input” (with “select” option) element with dark theme, please share your experience.