Bug: Incorrect background/text color in Selectable Header on dark theme (Chrome)

[lopatin96]

Flux version

v2.0.6

Livewire version

v3.6.2

Tailwind version

v.4.0.0

Browser and Operating System

Chrome on windows

What is the problem?

There is a visual issue with the <flux:calendar selectable-header /> component in Google Chrome (dark mode).

In the light theme, the background/text color appears correctly.
In the dark theme, the background/text color is incorrect, making it impossible to see.

Steps to Reproduce:

1. Open the component in Google Chrome.
2. Switch between light and dark themes.

Observe the text color in the dark theme.

Code snippets

<flux:calendar selectable-header />

How do you expect it to work?

The <flux:calendar selectable-header /> text should have sufficient contrast in both light and dark themes.

1. In the light theme, the text color is correct and easily readable.
2. In the dark theme, the text color should adjust properly to maintain readability against the dark background.
3. Ideally, the text color in the dark theme should match the expected styling, ensuring clear visibility without blending into the background.

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.

[jeffchown]

@lopatin96 It renders properly for me in both modes.

Have you run npm run build and php artisan view:clear and cleared your browser cache?

Are you using the Laravel 12 starter kit?

[lopatin96]

@jeffchown I took these photos while reviewing the documentation (https://fluxui.dev/components/calendar). The issue only occurred on Windows. I'm now testing on Mac, and everything looks fine.

Tomorrow, I'll test again on Windows (after clearing the cache) and let you know if the issue persists.

[jeffchown]

@lopatin96 Gotcha. Sounds good.

[joshhanley]

@lopatin96 thanks for reporting! I was sure I had fixed this issue. Turns out I had, for date-picker but not the calendar 🤦‍♂️ I've submitted a PR with a fix.