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: Get it here.
For jQuery Mobile 1.3.1: Get it here.
For jQuery Mobile 1.3.0: Get it here.
For jQuery Mobile 1.2.0: Get it here.
For jQuery Mobile 1.1.1: Get it here.
For jQuery Mobile 1.0.1: Get it here.
For Google Roboto Fonts: Get them 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!

Copyright (c) 2015 Joram Teusink

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

7 comments:

  1. Thanks for this one, I didn't like the Iphone Style eather

    ReplyDelete
  2. Thanks for the great work. I couldn't find the Roboto-Thin font in RobotoFonts.zip, so I generated the missing web fonts myself. You can download them at https://dl.dropbox.com/u/2083555/roboto-complete.zip

    ReplyDelete
    Replies
    1. Hi, thanks for your comment and download. I made a mistake indeed :). Added the Regular and Thin fonts also.

      Delete
  3. will you update it to the 1.3?

    ReplyDelete
  4. I updated them (added 1.3.0 and 1.3.1). Thanks for your comment!

    ReplyDelete