Beyond GMail's Themes

New in GMail Themes is a huge range of images you can add as a background to Gmail. Or you can choose your own image if you prefer.

Google currently provides a choice of a light or dark overlay, just like those in their pre-built themes, but there is no way to modify them and no way to change the text colors

So here's how to do that yourself!

There's a very simple script below for Stylish in Firefox or Chrome. Stylish is a browser extension/add on which lets you easily install and manage userstyles - "themes" for web sites created by modifying a site's Cascading Style Sheet (CSS). You can add, delete, enable, disable, and organise your userstyles with a few clicks of a mouse. Stylish's companion website, userstyles.org, hosts tens of thousands of user styles made by other Stylish users that you can try.

This short script for Stylish lets you change:

1. Unread message background colours and degree of opacity
2. Unread message text colours for sender, subject and timestamp
3. Read message background colours and degree of opacity
4. Read message text colours for sender, subject and timestamp
5. Background colour and degree of opacity for messages you have selected
6. The colour and opacity of the line which divides your message rows in the list
7. The colours of alternating message in Conversation view, to help you distinguish one from the other

First of all, install the right version of the Stylish browser extension from userstyles.org, depending on which browser you are using, Firefox or Chrome. 

Pick your image next - you can upload one of your own from disk, grab one you uploaded earlier from My Photos or Picasa WebAlbums or choose from the gallery provided in the new Custom Background theme. Work out what colours you think will go well with it. 

Then go here, and look up those colours and their RGB codes.

There's a long list of toning colours, grouped in "families", giving all their RGB numbers, or you can pick your own from the colour pickers at the top of the page (see left). 

Choose your colours, write down the RGB numbers you want to use for (1) to (7) above and then just alter the script to suit you. You can do this by pasting it from this page into any text editor like Notepad or TextEdit - but be careful to only change the RGBA/RGB numbers. 

Here's the script...

It's currently set up with my favourite green background/text colours which work well with GMail's standard Turf and Teahouse themes, and will work with any image that has green as the main colour. You can use it exactly as it is if you like green! 

If you'd rather have other colours, all you need to do now is to plug in the new RGB values for the various elements that you have previously chosen and written down.  Copy the following lines of code into any text editor.

/* Unread rows - background colour and opacity and text */
.zE {background-color: rgba(230,255,210,0.95) !important; color: rgb(0,80,0) !important;}

/* Read rows - background colour and opacity and text */
.yO {background-color: rgba(210,240,190,0.8) !important; color: rgb(0,80,0) !important;}

/* Selected rows - background colour and opacity*/
.x7 {background-color: rgba(255,250,205,1) !important;}

/* Row dividing line colour and opacity */
.xY {border-color: rgba(140,190,140,0.9) !important;}

/* Alternating message colours in Conversation View */
div.h7:nth-of-type(odd) div.adn.ads, div.kv:nth-of-type(odd){ background-color: rgba(190,220,180,0.65); }
div.h7:nth-of-type(even) div.adn.ads, div.kv:nth-of-type(even){ background-color: rgba(230,255,210,0.85); }

How to amend the script for your chosen colours

To break this down and make it simple, let's take the first line above:
.zE {background-color: rgba(230,255,210,0.95) !important; color: rgb(0,80,0) !important;}

.zE is the Unread message row. To set the background, you need to alter the first three RED numbers in brackets after the "rgba" - that sets the colour. Then alter the fourth BLUE number inside the brackets to control the opacity of the colour you have just set. The scale is 0.05 to 1.0 in increments of 0.05 - and you can set any level that you want to change the look of your style. 

As an example, here's a similar screenshot to the green one above, which is set to have opacities of 0.85 and 0.9 - with opacities set at 0.5 - quite a difference!

Then move to the color element further along the line which is just "rgb" - that controls the colour of the text for the sender, the subject and the timestamp. You don't want these to be transparent, so there is no opacity control - just alter the three numbers within the brackets to use the RGB colour you have chosen. 

All the other lines in the script work exactly the same way. Change the RGB numbers and select the opacity level if it is shown. 

Here's how Conversation View looks - even with the recent improvements, this colour alternation makes it easier to tell one message from the next, and the slightly darker coloration of read messages makes it easier to see what you have read and what you have not read:

And finally....install your script and view it in GMail!

When you have it all tweaked, save your text file, but keep it open, because you'll want to copy from it. 

In your browser go to your GMail tab and click the Stylish extension icon - Chrome top right, Firefox bottom left. The interfaces are slightly different in Chrome and Firefox, but it's easy to find your way around.

In Chrome, choose "Manage Installed Styles" and then click the "Write new style" button. A new tab will open (see below) for you to create your code. Copy and paste in your style, give it a name and save it.

You should also add the URL of the site you want it to apply to - in our case, mail.google.com - so from the URL drop-down choose "URLs on the domain" and type "mail.google.com" into the box.  Save the style again. Then go back to GMail, and from your Stylish menu, choose the name you gave your new style and click Enable to apply it to GMail.

In Firefox, choose Write New Style from the Stylish menu to get to the code window, and follow the same procedure. To apply your style, click the Stylish icon and check the style you want to use.

If you want to tweak your colours further, or alter the opacity of the various elements now you can see them on the page, click the Stylish icon in Chrome, click your style and choose Edit.

Or in Firefox, click Manage Styles, and choose the Edit button alongside your style name. You can do this any time.

Last of all, here it is pre-built for you, as an easy installable userstyle right from the userstyles.org site with an easy method of choosing your colours - just click the link and get choosing....

GMail Message List Colours

Making more scripts for different colour schemes

You may be the kind of person that likes a change. So you might want several styles, set up to use different colour sets to go with your favourite background images. To do that, click the Stylish icon, find your script in the Stylish menu and click edit. Select and copy the script in the box. Close the edit window. Then click the Stylish icon again and choose Manage Styles and Write New Style (just as you did before) and paste in the code you just copied. Change the RGBA/RGB values to the new colours of your choice. Give your new style a name and save it. Then head back to GMail to see it working. To switch between your colour styles, use the Disable/Enable options in the Stylish menu.

If you have more than one account, and like to have them open at the same time using Multiple Sign-in. the same userstyle will be applied to both accounts. To differentiate them, you can choose different backgrounds - either a standard GMail theme or an image from the gallery in the new Custom Background theme, or one of your own - that tone nicely with the colours used for your message list.

Here are some more screen shots of what you can do using just these few lines of code. I've used my Spam label so that I need to do the least possible redaction to keep the images clear. 

If, having digested the above, you really don't want to start messing with GMail's style sheet, there are a large number of pre-written GMail userstyles available at userstyles.org, as well as the one I have written for you (see above) based on this script.- and you can just install them into Stylish and use "as is".

A particularly useful one - which also mimics the "old inbox look" to a large degree - is "Marina Resurrected". 

Unlike many of the pre-written styles, this one allows you to pick your own colours and customise the script before it is installed into Stylish.  Each element is listed, with a colour picker beside it, and you can choose from the Marina background or a solid colour - or if you are using the Custom Background theme or another GMail theme, then it will work with any of those images too. The style can also remove the People Widget and the ads in an open message, freeing up that space for wider messages.  Here's how it looks with one of the gallery images, and a small tweak to the colour of read messages:

Acknowledgement

I must thank all those busy coders at userstyles.org who publish their userstyles for other GMail users to share. I was able to browse their code to find the most straightforward and robust way of making a short colour-changing script, and could not have written this simple little style without their generosity to other GMail users. In particular, thanks are due to bookdragoness for Marina Resurrected, and C26000 for the Real GMail Turf Theme, both of which helped me write the original script, and produce the pre-built version now available at ,

Customise GMail with Userstyles

There is a huge collection of GMail userstyles published at , and more are being added all the time.

Using these styles is easy for users of Firefox and Chrome. You simply install the Stylish browser extension, available on the Userstyles website. Then, when you find a style you like, you will see an install button on the page to install the correct version of the script for your browser. The styles install directly into Stylish and don't litter up your extensions/add-ons list - that means if you don't find anything you like, you can just remove or disable Stylish from your browser extensions/add-ons list and everything will be gone.

Userstyles can even be added to Internet Explorer if you don't mind delving into IE's settings. You need to apply the scripts across to the board to all websites, but as the GMail CSS is very site specific, doing that is unlikely to make alarming changes to any other site but the GMail web interface.

Here's how to do it. First choose your GMail style at . Use the Show Code button to see the script itself. Copy and paste the code into Notepad or a similar text editor and save the file to your computer with the .css extension.  Then go here and follow the steps set out: 

For Stylish users, userstyles can be easily and quickly turned on and off, deleted or edited by clicking the Stylish icon in your browser  toolbar and calling up the Stylish menu - you can also check for updates using this menu. In Chrome it will appear in the top right, and in Firefox it lives in the bottom left.

All the styles are written by GMail users for themselves, and published for others to share. A keen user will keep his style updated as GMail changes, and the best style developers update their styles regularly at www.userstyles.org. However, they are not endorsed by Google, and could break at any time if the GMail code changes.

Some of those that work well with the new interface of GMail include:

GMail Theme

For those who like blue, this style loads a custom blue background image (stored in a Picasa Web Album and linked to the style with the image URL) and adds a blue background or read messages, with an ochre colour - similar to the old GMail orange - for the unread messages. Hover colours are slightly darker. The style also adds a border to the work area, similar to the old interface. 
In a Compose or Reply message window, the message frame is now pale blue instead of grey. 
In Conversation View, the subject is highlighted with blue

One interesting point about this style for users who like to customise their look is the background image. This is simply a photo stored in Picasa Web albums - replacing the URL in the script with the URL of one of your own Picasa Web Album stored images will add your own chosen picture instead of the blue background image.

This needs to be used with the Dusk theme in GMail's theme gallery, to make sure of getting the right text colours
NB This does not work with the Right Side Chat lab, nor with a vertical split selected in the Preview Pane lab.

Gmail - Highlight Unread Mail (Blue)

This is very simple indeed, and does exactly what it says on the tin and no more - but it does make an amazing difference to the look of even the default light theme. 
The style is so simple that it is easy to edit to use any highlight colour of your choice, once you know the hex code for it. You can look up Hex codes here: 

GMail New Preview Theme

This userstyle is even simpler - just two lines of code to change the colour of the text of unread mail. It comes with red set as standard, but is easily edited to the colour of your choice by replacing the hex colour code. Here it is in dark blue, as an example:

GMail Real Turf Theme

This simple style for use with the Turf HD GMail theme amends the read/unread message list colours to green and darker green, very similar to the way the Turf and Treetops themes looked in the old interface. It fills a big hole in the current theme gallery, as there is nothing there which is comfortably usable by people who like green! 
In Conversation view, every second message is also highlighted in a pale green/blue shade, to distinguish messages from each other more easily.
This style is quite simple and could easily be edited to match with other non-green HD themes by changing the colours.

New Gmail - Read / unread contrast increase

This style does nothing other than increase the depth of the grey highlight for read messages. Before installing it, you can choose how much contrast you want. It has only three lines of code, each containing a colour specification and transparency specification, so is very easy to edit yourself by changing the colours and the transparency - you could have a pink or purple background for your read mail, for example!

Gmail - Show Gmail/Contacts/Tasks menu items

Those that are irritated by the two-click access to Contacts can install this style, which - after the first use of the main menu - keeps the main menu expanded horizontally into three clickable links to Mail, Contacts and Tasks.

Gmail messages, rounded and compressed

The recent update to conversation view has made a significant difference to its readability. But for those who still want the borders and rounded corners of the old interface, this style works effectively. Messages in a conversation are now more easily distiguishable from each other, and from the right-hand column.

New Gmail without any of the annoyances

Whether you like this style will depend on what you consider to be annoyances and what you consider to be important. It renders the Compose button almost invisible, for example! It makes the black top bar semi-transparent, which only really shows in a light theme. It functions with many of the dark themes effectively, but - as noted by the author - some tweaking of text colours may be required for it to work with all themes. In Conversation View, the entire message area has a dark grey background, which seems illogical - but can easily be changed once you identify it in the script. 
The only way to discover if you will like this is to try it!

GMail Easy Access Coloured Buttons

For those that like the icons and haven't switched back to text, this style colours the icons on the buttons. It adds a spot of colour to the page as well making it easier to distinguish between the icons - Trash, for example, is bright red! You get a choice when installing to install for a light or a dark theme - the dark theme selection gives brighter colours.

Gmail menu and auto-completion highlighting
Many GMail users have commented that the standard colour used to highlight your selections in various dropdown menus is too pale to be easily visible. This simple style fixes that - the default colour is blue, but as the author - GMail user David Kewley - points out, the colour can be easily edited after installation to be any colour you like.

And finally...here's one I made earlier:


GMail Message List Colours

This style lets you choose your own colours for read/unread and selected mail in the Inbox and other lists, and applies colours of your choice to alternating messages in conversation view, to aid in distinguishing one message from the next. You make these choices from the Style page before installing the userstyle.  Here is the result of using the default settings, with a custom background of my own uploaded into Gmail's new background theme, which is rolling out right now....

I have drawn upon the skills of several other userstyle authors to produce this style - notably "bookdragoness" for leading me to the trick of allowing users to pre-select their own colours, and to "C2600" for help with defining the correct elements for altering the colours in message lists.

You can also use the style with any of the GMail themes - here it is with TeaHouse and the default colour set of various shades of green.

Other Userstyles
There are a host of other styles available at userstyles.org.  Several of them attempt to recreate the "old look", and these are prone to breaking because they are very complex. Return to Old GMail, GMail b2b and the GMail 2012 Merge style have all lost their lefthand sidebar scrolling ability, and Return to Old GMail has no scroll bar at all in the central pane. However, it must be noted that these styles are among the most complex, and are more liable to break than the simpler styles which refer to only a handful of elements. All of them have already required several updates to keep pace with the subtle changes which occur in GMail on an almost weekly basis. Safer is simpler - and most of the styles outlined in this article are just about as simple as it gets!

GMail's own options
The above are just a small selection of userstyles I have tested with GMail, and for which there appears to be user demand. However, it's worth remembering that GMail's own built-in options can also be used to restore text to your buttons, choose to have less space in your listings, transform the look and feel and banish the glaring whiteness. The following images are of the Ocean theme at varying times of day, with text on the buttons and compact density selected. I've also collapsed Chat leaving the sidebar free for my labels: