2 Replies Latest reply: Jul 28, 2011 6:33 PM by tmorris9
shari29172 Level 1 Level 1 (0 points)

How do I change the background color on Safari or Facebook or Gmail, etc, from white to grey? I have migraines and the white causes me great problems and I can't just dim the screen becuase then I can't see the screen.  So now I just don't get on my computer. I also have a IMAC too, that I need to change. I could really use some help.


MacBook, Mac OS X (10.6.7)
  • Chris Beall Level 1 Level 1 (30 points)

    Shari,

     

    There are two situations in which the white background will show up in Safari.  You can override both of them, but you may not want to, at least not always.  Here's how to do it.

     

    Safari displays web sites.  The author of a website may, or may not, have specified a background color for their web pages.

     

    1. If no background color was specified, Safari defaults to using white.  There does not appear to be any way to change this (except to use a different browser; most of them do let you change the default background color).

     

    2. If a background color was specified, Safari uses that color.  Gmail and Facebook specify white as the background color.

     

    It is possible (likely even) that different parts of a web page will use different background colors.  Most often, however, one color is prominent and fills most of the background.  That's probably the one you want to change.  Doing so, however, may still leave some white areas on the screen.

     

    To do this, you must create your own Style Sheet, as follows:

      Create a new Folder.  You could name it "My preferences" or something like that.  Remember where it is.

      Open TextEdit.

      Copy and paste in the following text (I'll explain it later):

     

    /* force body background color */

    body {

          background-color: #aaaabb ! important ;   /* blue gray */

         }

     

    Save As... the text file into your new folder, naming it "MyStyle.css".  Note that you will have to type over the ".txt" that is put into the name field automatically.

     

    OK, now you have to tell Safari to use your new style:

    Open Safari.

    Safari

      Preferences...

        Advanced (tab)

          Down where it says "Style sheet", click on the up-down arrows at the right.

            Click on "Other..."

              Navigate through the file structure to your new folder and select "MyStyle.css"

              Click on the "Choose" button.

              Close the Preferences window.

     

    Now go to Gmail.  Tthe white background should have changed to a blue-gray.

     

    The good news: This will work for most web pages.

    The bad news: It will also work for web pages where the original background was black, or some other dark color.  As a result, the new background may be too light to give you enough contrast to read the light text.  (It may also be ugly in combination with some other colors).

     

    For such cases, you can easily return to the original default.  Just open the Preferences... again, go to the Advanced tab, click the arrows next to "Style sheet" and select "None selected".  You should be back to bright white backgrounds or whatever the web page designer specified.  (When you want to return to your style sheet, you will find that its name now appears in the list, so you don't have to go through the folder structure to find it).

     

    So what's a Style Sheet?  It's just a set of rules for displaying web pages.  You just created a simple one.

    Here's an explanation:

      /* force body background color */

    That's just a comment.  Safari ignores it.  It is just there for humans, to remind us of what we were trying to do.

      body {

    This is a Selector.  It tells Safari which part of a web page you want to apply the style to.  In this case it is the "body", which is essentially analogous to the piece of paper on which you would write something.  The little curly bracket is the beginning of a potential collection of style Properties that we could apply to the body (we're just going to use one, but there are many others).

      background-color: #aaaabb

    This tells Safari that we want to set the background color and then provides the code for the color we want to use.  The color is specified in 3 parts: how much Red, Green, and Blue should be used.  Each part is represented by two letters (hexadecimal characters to be precise).  By mixing Red, Green, and Blue we can select many colors (about 16 million).  There are 16 values for a hexadecimal character, so in addition to the usual digits 0-9 we use A-F.  It doesn't matter if they are upper or lower case.  So the color code above says:

        aa - Use a generous amount of Red

        aa - Use a generous amount of Green

        bb - Use just a little bit more Blue

    A code of #ffffff would be white (use as much of each color as possible) and #000000 would be black (don't use any of any of the colors).

    You can play with the values to pick your own favorite or Google 'color picker' and find many examples from which to choose.  To get your change to take effect, you will have to flip Safari to "None selected" and then back to "MyStyle.css".

      ! important ;

    This tells Safari you want your rule to override whatever the website designer specified for the background color.  Without this, your style would take effect only if the website designer did not provide any background color at all.  The semicolon just ends the Property; you could potentially follow it with more Properties for the body.

      /* blue gray */

    Just another comment for the human who hasn't memorized the 16 million color codes.

      }

    Indicates the end of rules for the body.

     

    No more migraines.

     

    Chris Beall

  • tmorris9 Level 1 Level 1 (5 points)

    There is another possible solution. Hold down 'control' 'option' 'command' keys and press the number '8' key. This inverts the screen color giving you a negative image. White becomes black, black becomes white and so on.

     

    Things will look a little strange but might be an easier solution for you.

     

    To undo it simply repeat the key combination again.