jQuery Mobileのテーマを変えてみるじぇ

jQuery Mobileのテーマは、デフォルトでa～eパターンが用意されています。
data-role="page"を指定したDOMにdata-theme属性としてaとかbを設定すれば、ツールバーやパネルの色が変わります。
実際のcssを見ると、パターンごとに大きく区切って記述してありました。
それに習って、f、gといったパターンを自分で作れば独自のテーマを作れそうです。

ただ色の値は同じものを使っていることが多かったので、Compassで変数としました。
分からないセレクタもあったので、それは放置しています。
jQuery Mobileのスタイルを生成するサイトとか作ろうと思えばベースにできるかも（やんないけど）。

試しに作ってみました。
[ サンプル ]

@charset "UTF-8";

@import 'compass/css3';

// メニューバー
$bar-border-color: #8B0000;
$bar-bgcolor-top: #CD5C5C;
$bar-bgcolor-bottom: #A52A2A;
$bar-text-color: #ffffff;
$bar-text-color-shadow: #000000;
// ボディ
$body-bgcolor-top: #FFE4E1;
$body-bgcolor-bottom: #FFECEC;
$body-text-color: #696969;
$body-text-color-shadow: #000;
// ボタン
$btn-up-border: #222;
$btn-up-bgcolor-top: #A52A2A;
$btn-up-bgcolor-bottom: #B22222;
$btn-up-text: #fff;
$btn-up-text-shadow: #000;
$btn-down-border: #000;
$btn-down-bgcolor-top: #A52A2A;
$btn-down-bgcolor-bottom: #B22222;
$btn-down-text: #fff;
$btn-down-text-shadow: #000;
$btn-hover-border: #000;
$btn-hover-bgcolor-top: #800000;
$btn-hover-bgcolor-bottom: #A52A2A;
$btn-hover-text: #fff;
$btn-hover-text-shadow: #000;
// リンク
$link-text: #8B4513;

.ui-bar-f {
  border: 1px solid $bar-border-color;
  @include background($bar-bgcolor-bottom);
  color: $bar-text-color;
  font-weight: bold;
  text-shadow: 0 -1px 1px $bar-text-color-shadow;
  @include background-image(linear-gradient(top, $bar-bgcolor-top, $bar-bgcolor-bottom));
}
.ui-bar-f,
.ui-bar-f input,
.ui-bar-f select,
.ui-bar-f textarea,
.ui-bar-f button {
  font-family: Helvetica, Arial, sans-serif;
}
.ui-bar-f .ui-link-inherit {
  color: #fff;
}
.ui-bar-f .ui-link {
  color: #7cc4e7;
  font-weight: bold;
}
.ui-body-f {
  border: 1px solid $bar-border-color;
  @include background($body-bgcolor-bottom);
  color: $body-text-color;
  text-shadow: 0 1px 0 $body-text-color-shadow;
  font-weight: normal;
  @include background-image(linear-gradient(top, $body-bgcolor-top, $body-bgcolor-bottom));
}
.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: #fff;
}
.ui-body-f .ui-link {
  color: $link-text;
  font-weight: bold;
}
.ui-br {
  border-bottom: rgb(130,130,130);
  border-bottom: rgba(130,130,130,.3);
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.ui-btn-up-f {
  border: 1px solid $btn-up-border;
  @include background($btn-up-bgcolor-bottom);
  font-weight: bold;
  color: $btn-up-text;
  text-shadow: 0 -1px 1px $btn-up-text-shadow;
  @include background-image(linear-gradient(top, $btn-up-bgcolor-top, $btn-up-bgcolor-bottom));
}
.ui-btn-up-f a.ui-link-inherit {
  color: #fff;
}
.ui-btn-hover-f {
  border: 1px solid $btn-hover-border;
  @include background($btn-hover-bgcolor-bottom);
  font-weight: bold;
  color: $btn-hover-text;
  text-shadow: 0 -1px 1px $btn-hover-text-shadow;
  @include background-image(linear-gradient(top, $btn-hover-bgcolor-top, $btn-hover-bgcolor-bottom));
}
.ui-btn-hover-f a.ui-link-inherit {
  color: #fff;
}
.ui-btn-down-f {
  border: 1px solid $btn-down-border;
  @include background($btn-down-bgcolor-bottom);
  font-weight: bold;
  color: $btn-down-text;
  text-shadow: 0 -1px 1px $btn-down-text-shadow;
  @include background-image(linear-gradient(top, $btn-down-bgcolor-top, $btn-down-bgcolor-bottom));
}
.ui-btn-down-f a.ui-link-inherit {
  color: #fff;
}
.ui-btn-up-f,
.ui-btn-hover-f,
.ui-btn-down-f {
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}