Saturday, August 8, 2009

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.

14 comments:

  1. Easily I to but I think the brief should prepare more info then it has.

    ReplyDelete
  2. Your blog keeps getting better and better! Your older articles are not as good as newer ones you have a lot more creativity and originality now keep it up!

    ReplyDelete
  3. Nice post thanks for share this post. A perfect web site design is very helpful for make any site attractive.

    ReplyDelete
  4. WOW! This helped A LOT. I suffer from Horrible Cluster headaches and that typical white background was HORRIBLE on my eyes. THANKS!!!

    ReplyDelete
  5. Cool, I didn't actually know you could do that. I probably wouldn't do it though as it would ruin the design of many websites. :-)

    ReplyDelete
  6. @Roy1973

    Glad that helped another suffering soul :)

    @Adham Dannaway

    I like good designs too, but I spend too much time in front of my computer, and with that white background, I look like I got punched in both eyes!

    ReplyDelete
  7. Thank you! Thank you.

    ReplyDelete
  8. You Rock!!!! You are the only one that answered the actual question that I asked, everyone else gave answers for everything but what I asked about. thank you.

    ReplyDelete
  9. I've tried this color inverting technique with Fx, but I lose functionality on Google..eg, cannot see cursor blinking or what I am typing in the search box on a back background, nor do I see the Apps icon... Just invert your brower colors on Firefox, can you see what I mean?

    ReplyDelete
  10. Can you suggest how to change background and foreground colors for raspberry PI using epiphany? I find it very difficult on the eyes. Also tried Chromium but had the same problem.

    ReplyDelete
  11. None of this works with modern versions of those browsers, only very old ones. I wonder why they let the user customize less and less, the newer the version is? The same happens with other software as well, like Skype, for example. You used to be able to customize the colors, but not anymore.

    It's like someone decided to FORCE as much of the brightest color of the monitor to fill as much space as possible in every computer program that people might want to use, without giving a choice to the user as to whether to stare at white or not.

    Maybe it has something to do with monitors being so dim nowadays, that having lots of white on the screen makes them appear brighter (so they don't have to implement REAL HDR or create actually BRIGHT monitors - it's quite ridiculous to watch a movie or play a game and look at some 'car lights' or something, that do not look like lights at all).

    So, my question is: Is there a modern browser that lets you do this color customization like the older (obsolete) browsers did? This is the only reason why I don't use newer browsers much - it just hurts the eyes too much.

    ReplyDelete
  12. Ahaa, its nice conversation on the topic of How to change the background color of web pages in your browser at this weblog, I have read all that, so at this time me also commenting at this place.

    Top 18 Kids Website Design and Development Services for Baby and Child Specialists.

    ReplyDelete