The background color doesn't match in dark mode

[mariomka]

I don't use a custom theme; I only have a custom primary color defined in the PanelProvider.

This is a screenshot from my panel:

This is the image linked in the readme:

The light theme works well.

[malzariey]

@mariomka, where exactly is the issue. In your provided screenshot, the picker is respecting the color of your panel (Blue in your case) .

[mariomka]

I expect the popup background color to be the same as the screenshot.

[mariomka]

Check the table background, in both screenshots, are same

[malzariey]

Do you mean this case?

[mariomka]

Yes, that's how I see it.

But there is a difference with the readme screenshot:

[malzariey]

how I see it.

But there is a difference with the readme screenshot:

Thats when you have a custom theme.

Took me time to figure out the issue because there was a little bit difference between the two blue colors in your case :)

[mariomka]

Oh, I set up a custom theme and then I removed it. Maybe I didn't delete it completely, I'll check it later.

[malzariey]

I sugguest that you use a custom theme and include the plugin css in your custom theme.css and build the assets.

For reference. https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

[malzariey]

@mariomka I tried to improve the css in version v2.7.2 migth be related to your issue.

[mariomka]

I don't think I see any differences. I'll try the custom theme. Thank you!

[mariomka]

It works well with a custom theme!

I have noticed that the CSS included with the package has the color variables "resolved" and I think that is the problem.

This is a portion of the package CSS:

:is(.dark .daterangepicker) {
    --tw-bg-opacity: 1;
    --tw-border-opacity: 1;
    background-color: rgb(31 41 55/var(--tw-bg-opacity));
    border-color: rgb(55 65 81/var(--tw-border-opacity))
}

This is for the custom theme:

.daterangepicker:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgba(var(--gray-800),var(--tw-bg-opacity));
    --tw-border-opacity: 1;
    border-color: rgba(var(--gray-700),var(--tw-border-opacity))
}

Also, I don't know why the selector is different.