jQuery Mobile は、data 属性の中でも data-theme="a" といったような属性値を与えることで、
実装されたテーマを選択できる。

でも、選ぶだけじゃなく、追加したいよね?

本家サイトにも記述されてるんだけど、「赤い(目立つ)色でアラート用のテーマを追加できる」
要するに、任意のテーマを追加できる。

方法はスタイルシートを記述するだけ。

開発者向けソースの場合、[jquery.mobile.theme.css] に追記する。
ためしに、iPhone の標準アプリにある「メモ」のオイルドペーパーなカラーを追記してみたのがこれ。

IMG_0011IMG_0010IMG_0009



/* F
-----------------------------------------------------------------------------------------------------------*/

.ui-bar-f {
	border: 1px solid 		#9C7162;
	background: 			#47332C;
	color: 					#fff;
	text-shadow: 0 1px 0 	#333;
	background-image: -moz-linear-gradient(top, 
							#855f52, 
							#47332C);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#855f52),
		color-stop(1, 		#47332C));
  	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#855f52', EndColorStr='#47332C')";
}
.ui-bar-f,
.ui-bar-f input,
.ui-bar-f select,
.ui-bar-f textarea,
.ui-bar-d button {
	font-family: Helvetica, Arial, sans-serif;
}
.ui-bar-f .ui-link-inherit {
	color: 					#333;
}
.ui-bar-f .ui-link {
	color: 					#2489CE;
	font-weight: bold;
}
.ui-body-f {
	border: 1px solid 		#AE9D7B;
	color: 					#333333;
	text-shadow: 0 1px 0 	#fff;
	background: 			#FCF99C;
	background-image: -moz-linear-gradient(top, 
							#F7EFC0, 
							#FCF99C);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#F7EFC0),
		color-stop(1, 		#FCF99C));
  	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#F7EFC0', EndColorStr='#FCF99C')";
}
.ui-body-f,
.ui-body-f input,
.ui-body-f select,
.ui-body-f textarea,
.ui-body-f button {
	font-family: Helvetica, Arial, sans-serif;
}
.ui-body-f .ui-link-inherit {
	color: 					#333333;
}
.ui-body-f .ui-link {
	color: 					#2489CE;
	font-weight: bold;
}
.ui-btn-up-f {
	border: 1px solid 		#9C7162;
	background: 			#47332C;
	font-weight: bold;
	color: 					#FFF;
	text-shadow: 0 1px 0 	#333;
	background-image: -moz-linear-gradient(top, 
							#855f52, 
							#47332C);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#855f52),
		color-stop(1, 		#47332C));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#855f52', EndColorStr='#47332C')";
}
.ui-btn-up-f a.ui-link-inherit {
	color: 					#FFF;
}
.ui-btn-hover-f {
	border: 1px solid 		#e79952;
	background: 			#fbe26f;
	font-weight: bold;
	color: 					#111;
	text-shadow: 0 1px 1px 	#fff;
	background-image: -moz-linear-gradient(top, 
							#fcf0b5, 
							#fbe26f);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#fcf0b5),
		color-stop(1, 		#fbe26f));
  	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fcf0b5', EndColorStr='#fbe26f')";
}

.ui-btn-hover-f a.ui-link-inherit {
	color: 					#333;
}
.ui-btn-down-f {
	border: 1px solid 		#9C7162;
	background: 			#855f52;
	font-weight: bold;
	color: 					#111;
	text-shadow: 0 1px 1px 	#ffffff;
	background-image: -moz-linear-gradient(top, 
							#47332C, 
							#855f52);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#47332C),
		color-stop(1, 		#855f52));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#47332C', EndColorStr='#855f52')";
}
.ui-btn-down-f a.ui-link-inherit {
	color: 					#333;
}
.ui-btn-up-f,
.ui-btn-hover-f,
.ui-btn-down-f {
	font-family: Helvetica, Arial, sans-serif;
	text-decoration: none;
}
この内容は、別ファイルのスタイルシートとしてもよい。

追加するテーマの名称は1文字である必要性はないと思う。
このサンプルでは、oiledPaper としてもよいかも(未確認)。

追記)確認した。テーマに付与する文字は a~z の1文字で構成しなければならない。
jquery.mobile.forms.slider.js を読んでて、こんなコードを見つけた。

parentTheme = parentTheme.length ? parentTheme.attr('class').match(/ui-(bar|body)-([a-z])/)[2] : 'c',

正規表現部分。([a-z])で括られてるのでそう思った次第。文字数指定なしなので、1文字と判断。



ちなみに、テーマ変更可能なクラス名のプレフィクス部分を抜き出すと次の5つでした。

    "ui-bar",
    "ui-body",
    "ui-btn-up",
    "ui-btn-hover",
    "ui-btn-down"

このプレフィックスに、ハイフンとテーマ名である a~e の文字が続く。
サンプルのCSSでは、"f" を追加してるので、マークアップ時は、data-theme="f" を記述することになる。

jQuery.Mobile の自由度を考えると、テーマは既存のものを編集してるよりは、自前で追加したほうが、互換性維持という点でもCMSに組み込む場合は、必須の知識になります。

単純なグラデーションカラーなら、ツールを作ったほうが早いかも。