As you can see/understand, it takes some time to fire the document.ready event with every page load and initially the white theme has been set. This is resulting in a white flash before enabling the dark theme at every page load.
Press Alt + N together on technews.lk if you want to test it yourself.
Can anybody suggest me a solution for this?
Can we use a session and load a CSS file based on that?
Can a service worker do the CSS class addition? (I guess it’s not possible since the response is readonly in service workers)
I’m not using ember for my blog, and if you should inspect your dev tools, you’ll see the body tag attaches the dark after the DOM is loaded. My approach to this, in your case, is to use js to attach that css before the page is loaded. Or, inline a script to attached the css before or after the body tag
Im still not sure this is possible. But something I’ll explore with next.
Thank you very much for the response. I was already using an inline script for that. Finally I found the issue here. I was using Cloudflare Rocket Loader™ technology to improve JS performance.
When It’s enabled, it seems all inline javascripts also waiting till the document.ready. I just turned it off and now I have the expected outcome.
Since this is tightly bound with a business, I cannot share the theme, but I might be able to help you guys to improve yours… If you need, I can share the code snippets to get the dark mode on…
