When you click on a link in Chrome to go from page x to page y, for a split-second it displays a white empty page. I want to make that page black so it won't hurt my eyes.
Now, I'm a fresh graduate of this question:
Hack Chrome to show its internal pages with black background
As the accepted answer suggests, I've customized my C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css file.
It turns out that this file is able to target the split-second loading page! Yay! I was able to make that page black by putting a simple html {background: black} in Custom.css.
Problem is… The Custom.css file is applied to all web pages. This means that now I get a black background on all pages, which is something I don't want! (Because I already have an extension that flips the colors, and black flipped becomes white.)
My question is: How do I write CSS in Custom.css that targets only the white page that Chrome shows for a split-second while loading a webpage?
Best Answer
To answer the question at hand, I don't think it is possible to target the page (or this state of a page) through CSS alone.
I created a quick Chrome extension to make every page background black until the page is loaded.
You can find it on GitHub and the Chrome Web Store.
Please note that I only wrote this for this specific question and have not done extensive testing. I already noticed an issue on Google Searches.
I use Google Instant and it seems like theIt should work pretty reliably in version 0.2 now.window.onloadevent the extension relies on is never fired.Feel free to report bugs on GitHub, I'm likely to fix them.