[Firefox] Flickers from light to dark mode on navigation

[rilrom]

Describe the Bug

When navigating between screens in the admin panel, the browser will flicker from light to dark mode when your browser is set to dark mode and your payload preferences are set to 'automatic'.

Link to the code that reproduces this issue

https://github.com/payloadcms/payload/tree/main/test/_community

Reproduction Steps

1. Use firefox browser.
2. Set your firefox browser to dark mode.
3. Set your theme preferences to automatic in payload user preferences.
4. It will flash from light to dark on each navigation.

Which area(s) are affected? (Select all that apply)

area: core, area: ui

Environment Info

Payload: 3.8.0
Next: 15.1.0

[saoudi-h]

The same flickering issue occurs on the PayloadCMS site.

[sethwilsonUS]

This is happening to me in Safari also.

[rilrom]

I decided to look into this more and it's because Firefox and Safari do not support the Sec-CH-Prefers-Color-Scheme header.

Until there is support it's unlikely there is much we can do.

[dag0310]

Why is this not simply all handled on the browser side via CSS? If I go to tailwindcss.com it will just live update the website theme based on my current system or browser color theme setting even without page reload.

[rilrom]

The tailwindcss website takes a different approach to resolving this problem through the use of injecting a script tag into the head in their root layout file (https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/app/layout.tsx).

It's possible we could do the same, but it would mean an entirely different approach to what is currently implemented in Payload, something I don't have the capacity to dive into currently.

[paulpopus]

One idea I've had as a workaround was to default to dark mode, it wont prevent a flicker but a flicker from dark to white when you're in light mode is a lot easier on the eyes than white to dark when you're in dark mode - maybe something we can do as part of our v4 UI upgrade

[dag0310]

In my dark-mode-test example you can see that you can do a live switch between light and dark mode in your browser or system settings and the light/dark CSS will be applied immediately and without any flickering issues since it all happens on CSS level without any JS involved.

CSS:

body {
  background: #ddd;
}
.light {
  display: block;
  color: #222;
}
.dark {
  display: none;
  color: #ddd;
}
@media (prefers-color-scheme: dark) {
  body {
    background: #222;
  }
  .light {
    display: none;
  }
  .dark {
    display: block;
  }
}

HTML:

<h1 class="light">Your browser is not in dark mode and/or doesn't respect the user's dark choice in the OS</h1>
<h1 class="dark">Your browser is in dark mode and/or respects the user's dark choice in the OS</h1>

And yes, in the meantime I also think that dark mode default would be less straining on the eyes 👍

[Gerharddc]

I am also seeing this flickering with MS Edge. It does not show when navigating between pages in the Payload admin UI, but it does happen when refreshing the page. It also happens when navigating to payload pages from custom routes in the system.