docs.gl icon indicating copy to clipboard operation
docs.gl copied to clipboard

Dark theme shows white background for an instant

Open tuket opened this issue 5 years ago • 3 comments

When transitioning from one page to another I can see white background for an instant. It's a bit hard on the eyes to see this abrupt white flash. It looks like the flash is more apparent in Firefox. In Chrome is not noticeable most of the times but happens as well sometimes. I'm not sure if this is an easy thing to fix or it's a browser issue.

tuket avatar May 18 '20 21:05 tuket

It's because the dark mode is implemented in javascript instead of css, which means the browser renders the page with a white background (and everything that goes with it) first, and then runs the javascript which redraws everything with a black background.

The solution is to rewrite this in CSS, using @media (prefers-color-scheme:dark) to respect the user's choice, instead of javascript buttons. If we want users to be able to use a different color scheme on this website than the rest of their browser, then we can implement a javascript override, but that's a detail IMO and not necessary for a first version. I have implemented all of this (including the JS overrride) myself so feel free to ping me if you (or anyone else) wants to give this a shot :)

1ace avatar Apr 14 '23 13:04 1ace

(actually, if you look at the website on my profile you'll have an example of this implemented, and it's a really tiny website so it shouldn't be too hard to read its CSS & JS code)

1ace avatar Apr 14 '23 13:04 1ace

Submit a pull request and I would be happy to approve it :)

BSVino avatar Apr 17 '23 03:04 BSVino