Website Flashes White in Dark Mode

[Michael13435]

When Loading the website briefly flashes white in dark mode. This only happens the first time loading the website.

To induce this if you have accessed the website before clear cookies and reload.

[trallard]

Hey @Michael13435, thanks for opening an issue.
Can you please confirm whether you are seeing this behaviour on a deployed documentation site or when working locally on docs?

See #1816 for more reference about local docs and this flashing behaviour (and thus would be a duplicate)

[Michael13435]

This is on the website: https://pydata-sphinx-theme.readthedocs.io/en/stable/
So I think that means it is deployed documentation? I didn't download any documentation locally

more specifically I saw this happen on
https://pandas.pydata.org/docs/reference/api/pandas.DataFrame.to_numpy.html

But it seems to affect anything with the pydata sphinx theme

[drammock]

I can reproduce with our site after clearing cookies

[trallard]

To further debug this are y'all using the auto setting?
Wiping cookies should clear the state then based on system/browser settings this might be reset hence the flashing. If not then there might be something iffy with the state and the theme switcher (we have already identified also other hiccups with the state not being passed for example to assistive tech) so am tagging @gabalafou who is leading the next set of a11y improvements

[Carreau]

I think that would need too big of a refactor, right now Js looks at prefers-color-scheme, and then switch a data attribute on html, so there will always be a js/css race until the attribute is set (you can also get a flash of dark website, is sys preference is dark and you want light).

I think if we want to avoid this flash on auto mode we need to set the light/dark theme attribute only of there is a user pref and otherwise use

html[data-theme="light"] || @media (prefers-color-scheme: light) {  /* not sure of the syntax */
    .... light style
}

That would also let us not use a prefersDark.onchange listener on js,

[drammock]

@Carreau's suggestion seems worth a try, it would maybe improve some of hte cases anyway.

we could also try adding a transition time, maybe that would at least make the flash less abrupt?

[Carreau]

I think the problem is not that light-dark is abrupt, but that you are coding at night and get a white flash in the middle of the night.

So it would almost be better for the default color to be dark.

[Michael13435]

@Carreau's suggestion seems worth a try, it would maybe improve some of hte cases anyway.

we could also try adding a transition time, maybe that would at least make the flash less abrupt?

I think adding some transition time would be a good solution. I was mostly concerned about photosensitive individuals when making the post so I think some transition time would be helpful. Also just personally I would find it to be less harsh if it had a second or two to transition.

This would also make the transition less harsh if default was dark mode, so I think its a good choice either way