Dark mode FUOC

[Nonoss117]

Not easy for me to explain that, with my poor english knowledge :-).

I use dark mode in my browser. The behavior is the same with Firefox, Edge, Google Chrome.
When Homepage page is loading, there is a flashy white screen during the loading page and then, at the end of the loading, the dark mode and the background color of Homepage is "loaded".

Could it be possible, when Homepage page is loading, to load first the dark mode (on or off), the background color, and, at the end, all services, widgets, ... ?

sreenshot during loading the page:

screenshot once the page is loaded:

It's just "cosmetic", I know :-)

[benphelps]

This is a really well known thing, called FOUC, https://en.wikipedia.org/wiki/Flash_of_unstyled_content

I'll look into it and see if there is something that can be done.

[Nonoss117]

Thanks for your reply, and the wikipedia link. I didn't know that.

[Tataukee]

I am experiencing the FOUC issue too since today with the new version 0.4.0 (de4ce73) .

[den7007]

Just want to add I'm experiencing this issue and would really love if there was a way around it! It's hard to use homepage as the flash is just blinding and bothersome.. I end up using another dashboard for now when I'm on dark mode (at night)

[shamoon]

Is this happening on every single page load for you or just when eg switching from light to dark?

Edit: because I dont see this

[den7007]

Is this happening on every single page load for you or just when eg switching from light to dark?

Edit: because I dont see this

It's fine when switching from light to dark manually, but if I leave it at dark mode, then yes everytime I load homepage on a new tab it shows the white flash

[shamoon]

Can I ask what browser and OS you’re using? And is your system (or browser) set to dark mode too?

[den7007]

I'm on POP OS 22.04 and using latest Firefox, though I still have the same problem when I try to load homepage on Brave. It happens regardless if my browser and/or system is set to dark mode - what matters is if Homepage itself is set to load in dark mode by default

[warmbo]

Same issue now too on Windows 11 Edge. Happened since a recent update.

[Goz3rr]

I just installed Homepage and noticed I have this issue too. Homepage v0.6.28 (63a5622, Aug 4, 2023), Chrome 115.0.5790.171, Windows 11.

Adding theme: dark to settings.yaml removes the light/dark toggle but it still has the flash from light to dark when opening the page.

The very first load is quite slow (a second or so) and displays a spinner during that time, every page load after that is almost instant, be it pressing F5 or opening a new tab but does result in the light theme flashing first

[Goz3rr]

After a bit of testing I noticed that setting theme: dark in the settings only adds the dark class to #page_wrapper, but no theme which causes the page to still be white. After adding color: slate to my settings file as well the page gets generated with the theme-slate class, which actually make the page dark before any JS is ran. This might be why @shamoon couldn't reproduce it.

[shamoon]

slate is the default https://github.com/benphelps/homepage/blob/main/src/pages/api/theme.js#L7

[Goz3rr]

It does end up rendering as slate in the end yeah, but the page that is served up by the backend does not have the theme-slate class on the #page_wrapper until the client JS loads. I believe this is the relevant code: https://github.com/benphelps/homepage/blob/96e8882fb5fb1d86097ab932ef32733626b2e02b/src/pages/index.jsx#L368

[claytonjack]

I have also had this issue from the start and It happens on every page load. Would love to see this get looked as the flashing is quite annoying. It seems like @Goz3rr may have tracked down the source of the issue? I would be happy to help with any testing if needed.

Info:

Homepage v0.6.28
Installed with Docker on Ubuntu-Server

Windows 11
Chrome: Version 116.0.5845.141

[Slopz]

can confirm theme: dark + color: slate fixed it for me! no more flashes! Thanks @Goz3rr !

[github-actions[bot]]

This discussion has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns.