Question

I’m using the UI-Lightness theme and I’m trying to figure out how to use the text color for my labels. The color I’m interested in is the text found in the buttons, tabs, etc; it’s the light blue. I see that the color is defined in the “.ui-state-default” class but it also has border details and stuff I don’t want. Is there a way I can just use the color without the extra stuff? I know I can hardcode the color into a new class but that won’t help me if switch themes.

Thank you very much.

Answer 1

I thought of another way of doing this using jQuery while reading your comment. If you really find it a hassle you could add the following function at the start of all your pages:

var niceColor = $('.ui-state-default').css('color');

if(niceColor !== undefined)
{
    $('label').css('color', niceColor);
}

This will get the font color of the current ui-state-default class being used and give all your labels that colour. There is a gotcha though… You need to use something with the ui-state-default class on the page, otherwise nothing on the page has the class and therefore javascript cannot get the colour of it. That would mean you might have some labels not picking up the colour in a page where you’re not using the ui-state-default class.

To get around this you could just stick a hidden element on each page like so …

<input class="ui-state-default" style="display:none;" />

… just to be sure.

Demo: http://jsfiddle.net/E7Zza/1/