How to change the background color of web pages in your browser

If you spend too much time browsing the web on your computer, you may start to notice that you're getting too much darkness around your eyes. It's because of this white background color on most web pages, it's slowly turning you into a raccoon. Luckily, this can be changed.

Most web browsers allow you to control the colors of web pages. Here's how to change the background and text colors in all the popular browsers:

Internet Explorer

1. On the menu, go to Tools > Internet Options
2. On the Internet Options dialog box, click the Colors button (at the bottom left corner).
3. Uncheck the Use Windows colors check box, then change the text and background colors to the colors you want (I use black for the background and grey for the text), then click OK.
4. Next, click the Accessibility button (this time at the bottom right corner).
5. Check the Ignore colors specified on Web pages check box and click OK.
6. Click OK on the Internet Options dialog box to close it and apply the new settings.

FireFox

1. On the menu, go to Tools > Options
2. On the Options dialog box, click the Content tab (at the top)
3. Now, click the Colors button.
4. Uncheck the Use system colors check box and select the colors you want for the background and text (black and grey for example)
5. Uncheck the Allow pages to choose their own colors, instead of my selections above check box
6. Click OK to close the Colors dialog box.
7. Click OK to close the Options dialog box and apply the new settings

Opera

It's a little trickier with Opera but fortunately it's still possible.

1. Create a new text file (using Notepad or your favorite text editor) and copy and paste the code below into it, save the file anywhere you want but remember where you saved it (you may name the file opera.css, but this is optional, you can give it any other name you like)

   *
   {
       background: transparent !important;
       color: #C0C0C0 !important;
       border-color: #C0C0C0 !important;
   }
   html, body
   {
       background: #000 !important;
   }
   a:link, a:hover, a:active
   {
       color: #00E !important;
   }
   a:visited
   {
       color: #551A8B !important;
   }
   
   

2. Now in Opera, on the menu, go to Tools > Preferences
3. Click the Advanced tab
4. On the left side, click Content
5. Click the Style Options button
6. On the Style Options dialog box, under My style sheet, select the file you created in step #1 (you'll replace the value already in there but this is ok)
7. Now click the Presentation Modes tab (also on the Style Options dialog box).
8. By default, you should only have The Page style sheet and Page fonts and colors check boxes checked under both the Author mode and User mode (left and right), you should also have Default mode set to Author mode (the drop down list at the bottom right). Now, under the Author mode on the left, check the My style sheet check box and click OK.
9. Click OK to close the Preferences dialog box and apply the new settings

Google Chrome

Unfortunately for Google Chrome, you can't control the page background or text colors (this is true as to the latest version at the time of writing this post, the version I have here is 2.0.172.39 which is the latest version). The only solution I found was to use a bookmarklet, this is a short piece of code that you add to your bookmarks, you click it everytime you want to change the colors of the page (actually you can also paste it into your browser's address bar then press Enter to make it work). This is not really practical but it's all what you've got for now, hope google will fix this soon. I created this little bookmarklet for you which will change the background color to black and the text color to light grey (copy the code and paste it into the address bar in Google Chrome then press Enter, you should add it to your bookmarks to make it easier to change the color of the page by only clicking it):

javascript:(function(){var allElements=document.getElementsByTagName("*");for(var i=0;i<allElements.length;i++){var element=allElements[i];element.style.background="#000 !important";element.style.color="#C0C0C0 !important";element.style.borderColor="#C0C0C0 !important";if(element.tagName.toLowerCase()=="a"){element.style.color="#00E !important";}}})()

Update

Google Chrome now supports user stylesheets. This means you don't need to use any bookmarklets. Assuming you use Windows, change the page colors by going to "C:\Documents and Settings\{your windows user}\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets" (change the drive letter if you have Windows installed on a drive other than C). Now, open the Custom.css file then copy and paste the same code above used with Opera and save the file.

You may also now use one of many Google Chrome extensions that allow you to control the page colors. For example, see the Change Colors extension.