Skip to content

How to override existing color themes in JQuery Mobile

May 3, 2013

I had used this technique of overriding existing color themes in Jquery Mobile with another intention in mind, and that is to change the colour of the bottom part of the JQuery Mobile page to match the content section page.

For some reason simply chancing the background-color in the content section of the JQuery Mobile Page doesn’t change the entire page background color. E.g.

    <div data-role=”content” style=”background: rgb(0, 0, 0);”>
        <div id=”contentpage”>




If you view portrait in a iPad, there is a blank gap at the bottom of the page that hasn’t changed color.

A quick work around is to use override the existing data-themes in JQuery Mobile e.g. data theme a, so you can edit your own css file with the following: –

.ui-body-a, .ui-overlay-a {
    color: rgb(0, 0, 0) !important;
    text-shadow: none !important;

This theme is the dark theme, and !important notation overrides the existing settings set by JQuery Mobile CSS, this sets the entire background color to black including the bottom panel part (I need to find out why it does this!). It also sets the text shadowing to none (which is an annoying trait set by JQuery Mobile), as it doubles the font somehow making it a bit blurry especially on a light text on a darker background.


From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: