Greasemonkey-ing with Gmail's Styles

Last week, Google finally gave us some options to customize the look of Gmail. Excitedly, I went through each theme trying to find my replacement for the boring old "Classic" one. Many of them are graphically appealing, but unfortunately, most of them also have poor contrast compared to "Classic". I finally settled on the "Mountains" theme, but one thing still bugged me about it: the text color of mail titles were too light.

Determined to fix this, I broke out Firebug, the trusty HTML/CSS inspection plugin for Firefox, and found the offending CSS:

.AnqB9d {
   color:#3F586D;
}

Then, I created this little Greasemonkey script:

function addGlobalStyle(css) {
   var head, style;
   head = document.getElementsByTagName('head')[0];
   if (!head) { return; }
   style = document.createElement('style');
   style.type = 'text/css';
   style.innerHTML = css;
   head.appendChild(style);
}

addGlobalStyle(
   '.AnqB9d {' +
   '    color: black ! important;' +
   '}'
   );

Viola! Readable mailbox items! Check out before and after shots:

Before:


After:


Related Links:

• Joel Sutherland - Gmail's New Default Theme is a Step Backwards for Usability