🚀 After weeks of testing and refining, I finally solved one of the trickiest WKWebView dark mode problems: preventing the initial flash of light (FOUC/FOLT) while smartly inverting logos and images without breaking other content.
This solution uses a clever combination of pre-paint JS injection, CSS variables, and precise top-of-page logo detection to maintain both aesthetics and usability. Even major desktop browsers haven’t fully addressed this issue for years!
💡 Key points:
• Pre-paint opacity and background injection to eliminate flash.
• Smart CSS variable system for consistent dark mode.
• Targeted logo inversion within the top 100px of pages to avoid affecting other images.
• Fully lazy-loaded dynamic homepage support.
Credit: Zac J. + AI co-creator ChatGPT / spaceedge.com / shieldbrowser.com
GitHub (private repo):TZLD – open for requests.
If you’re a web developer or WKWebView user, I’d love your thoughts or questions!