search

digitalungdom-se / digitalungdom.se

The source code for Digital Ungdoms website
https://www.digitalungdom.se
GNU Affero General Public License v3.0
7 stars 6 forks source link

Dark mode to prevent flash for initial loading screen #109

Open Nautman opened 3 years ago

Nautman commented 3 years ago

It would be neat with a dark mode for the initial loading screen. This is to prevent flashes for when the page hasn't loaded yet.

Zigolox commented 3 years ago

This should be prioritized, I hate getting a sudden flash when loading a website

Rickard-Martensson commented 3 years ago

I guess the problem is that you can't tell the Html to enable dark-mode using js before the js has loaded. The only possible way to solve it would be to detect and change the native dark/light mode using CSS. Which I did here ☺:

https://github.com/Rickard-Martensson/digitalungdom.se/commit/145297be6209fb2ab8cb520b2eaa6ab3f6a5c9eb

Nautman commented 3 years ago

Cool! You can try to open a pull request and see how that works. It's worth noting though that the CSS solution doesn't take into account if you have dark mode browser but light mode setting, or light mode browser but dark mode setting. I'm not entirely sure how we should weigh these alternatives? If it's worth guessing what the user has.

Nautman commented 3 years ago

I think one complicated solution would be let a server check if there is a cookie for dark mode, and inject CSS into index.html.