Dark Mode Inconsistency: Streaks of Varying Darkness around Elements and Half of Dashboard Screen in Chromium Browsers

[andrewdwallo]

Package

filament/filament

Package Version

v3.0.21

Laravel Version

v10.18.0

Livewire Version

v3.0.0-beta.7

PHP Version

PHP 8.2.8

Problem description

While using dark mode in an application using Filament, I noticed some inconsistencies in the display. Specifically, half of the screen and areas around certain elements exhibit different shades of darkness, resulting in noticeable streaks. This issue affects the overall visual appearance and user experience. This bug is only present in Chromium Browsers (Edge and Chrome) and not Safari. I have not tried Firefox or other browsers.

Chrome:

Edge:

Edge:

Safari:

Expected behavior

The dark mode should provide a consistent color scheme, with uniform shades of darkness across all elements and areas of the screen in most if not all browsers. Chrome and Edge are very popular browsers which is why I'm surprised this has not been addressed recently by anyone. I have no extensions in both Chromium browsers. I actually just got a new computer and just downloaded both browsers recently.

Steps to reproduce

Steps:

1. Use any Chromium Browser (Edge or Chrome)
2. Download reproduction repository (or any repository should do).
3. Navigate to any page in Filament.
4. Enable dark mode.
5. Observe the streaks of varying darkness around elements (or half the screen in the panel).

Reproduction repository

https://github.com/andrewdwallo/company

Relevant log output

No response

[199ocero]

I've got this issue too since I'm using edge browser like half bottom part is more darker than the upper part.

[andrewdwallo]

@199ocero Yeah I'm not sure how this could be fixed on their side.

[danharrin]

I'm sorry, but I don't know how we can even fix this within Filament? If you have any ideas, go PR, but I don't think it's worth keeping this issue open as there is nothing actionable really?

[andrewdwallo]

@danharrin It just kind of sucks because it's such a noticeable thing and affects the entire view to the user. I will try to do some research and see if anything can be fixed here.