Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark mode color difference between listbox and date picker #1134

Open
3 tasks done
ju5t opened this issue Feb 20, 2025 · 4 comments
Open
3 tasks done

Dark mode color difference between listbox and date picker #1134

ju5t opened this issue Feb 20, 2025 · 4 comments

Comments

@ju5t
Copy link

ju5t commented Feb 20, 2025

Flux version

v2.0.0

Livewire version

v3.5.20

Tailwind version

v4.0.6

What is the problem?

There seems to be a color difference between the date picker and the listbox in dark mode. The background of the date picker is much darker. This may be intentional but as we use them side by side in forms, it feels a bit off.

Listbox:

Image

Date picker:

Image

Code snippets

<flux:date-picker />

<flux:select wire:model="industry" placeholder="Choose industry...">
    <flux:select.option>Photography</flux:select.option>
    <flux:select.option>Design services</flux:select.option>
    <flux:select.option>Web development</flux:select.option>
    <flux:select.option>Accounting</flux:select.option>
    <flux:select.option>Legal services</flux:select.option>
    <flux:select.option>Consulting</flux:select.option>
    <flux:select.option>Other</flux:select.option>
</flux:select>

How do you expect it to work?

I expected the two backgrounds to be the same, as they are both form elements.

Please confirm (incomplete submissions will not be addressed)

  • I have provided easy and step-by-step instructions to reproduce the bug.
  • I have provided code samples as text and NOT images.
  • I understand my bug report will be closed if I haven't met the criteria above.
@calebporzio
Copy link
Contributor

Mmmm yeah I could see that point. I'll ask Hugo and see what he thinks. date picker dropdowns are actually dialogs/modals that are positioned like dropdowns which is the only argument I could see for keeping them different (our modal is darker than the dropdown).

But lemme see about this

@ju5t
Copy link
Author

ju5t commented Feb 21, 2025

@calebporzio the plot thickens: they're actually darker than modals too :)

In dark mode the calender uses bg-zinc-900. The modal is bg-zinc-800.

@calebporzio
Copy link
Contributor

haha oof - I talked to Hugo and he agrees this should not be the way. We will have to carve out some time to unify these styles I think

@calebporzio
Copy link
Contributor

Good catch @ju5t

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants