Wednesday, September 26, 2012

Android Holo-inspired theme for jQuery Mobile

Recently I have created an app for Android with HTML5, CSS3, and jQuery Mobile. I soon found out that the standard theme of jQuery Mobile is much like of an clone of iPhone or a variation of it.

Then I decided that I wanted to create a theme that is much more like Android Holo theme. That theme was first introduced in Honeycomb and perfected in Ice Cream Sandwich and Jelly Bean.

The theme isn't an exact copy of Holo, but is inspired by it in terms of color scheme, fonts, and the corners for example. To make sure the theme can easily be ported to newer versions of jQuery Mobile, I basicly only changed the color's and font. The font is, obviously, Roboto, and to be more precise, Roboto Regular and Roboto Thin.

See the screenshot below. It has three styles: Holo Dark, Holo Light and Holo Light with Dark Bar.


In summary, what's in the package:
  • Holo theme colors:
    • Used from 1.0.1 till 1.3.1:
      • Roboto : 177BBD / 23,123,189 (dark cyan)
      • Charcoal: 222222 / 34,34,34 (dark grey)
      • Honest : 33B5E5 / 51,181,229(cyan)
      • Imdur : 555555 / 85,85,85 (grey)
    • Used in 1.3.2:
      • Roboto: 0099CC (dark cyan)
      • Charcoal: 222222 (dark grey)
      • Honest: 33B5E5 (cyan)
      • Imdur: 555555 (grey)
      • Grey : 696969 (dim grey, action bar)
      • Grey : CCCCCC (border)
      • Grey : F9F9F9 (background)
  • Roboto Regular font.
The download RobotoFonts contains the fonts and its css-file (stylesheet). The other downloads for JQM contains the theme as css-files (compressed and non-compressed).

Extract the folders and load the stylesheets like below (change version number accordingly).

<link rel="stylesheet" href="web-holo/AndroidHoloDarkLight.min.css" />
<link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="roboto/fonts.css" />

Make sure the fonts are loaded last.

For jQuery Mobile 1.3.2: Download here.
For jQuery Mobile 1.3.1: Download here.
For jQuery Mobile 1.3.0: Download here.
For jQuery Mobile 1.2.0: Download here.
For jQuery Mobile 1.1.1: Download here.
For jQuery Mobile 1.0.1: Download here.
For the Roboto Fonts: Download here.

Feel free to use the theme, edit it, redistribute it, etcetera. If you have a nice new version please let me know so I can fine-tune the lay-out of my app(s) too. Thanks in advance!

Hope you enjoy it!


Thank you for reading my blog!



This program is free software: you can redistribute it and/or modify it under the terms of the GNU LesserGeneral Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details. To read more about the GNU Lesser General Public License that belongs to this program, see http://www.gnu.org/licenses/