how to Customize a Swatch in jquey mobile

In this jquery mobile web programming tutorial we will learn that we can customize a swatch in jquery mobile application as in our previous post we have implement the use of themes and swatches in jquery mobile.

The theme swatches in jQuery Mobile are all defined by CSS, so they are easy to modify
to suit your individual needs. The swatches are broken out into sections in the jQuery
Mobile style sheet, and are straightforward.

The best way to modify a theme is to create a style sheet that overrides the desired styles
and then load that style sheet after you load the jQuery Mobile style sheet. This is
especially useful if you are using the CDN to serve the jQuery Mobile style sheet.

/*
Change:
#fceda7 to #a7fcaf
#fadb4e to #5afa4e
#f7c942 to #5cf742
#33ff33 to #9efaa2
#fe3 to #33ff33
#fcf0b5 to #b5fcb5
#e79952 to #52e760
#fbe26f to #76fb6f
*/
.ui-bar-e {
border: 1px solid #5cf742;
background: #5afa4e;
background-image: -moz-linear-gradient(top,
#a7fcaf,
#5afa4e);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #a7fcaf),
color-stop(1, #5afa4e));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#a7fcaf',
EndColorStr='#5afa4e')";
}
.ui-body-e {
border: 1px solid #5cf742;
background: #9efaa2;
background-image: -moz-linear-gradient(top,
#fff,
#9efaa2);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #fff),
color-stop(1, #9efaa2));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',
EndColorStr='#9efaa2')";
}
.ui-btn-up-e {
border: 1px solid #5cf742;
background: #5afa4e;
text-shadow: 0 1px 1px #33ff33;
background-image: -moz-linear-gradient(top,
#a7fcaf,
#5afa4e);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #a7fcaf),
color-stop(1, #5afa4e));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#a7fcaf',
EndColorStr='#5afa4e')";
}
.ui-btn-hover-e {

border: 1px solid #52e760;
background: #76fb6f;
background-image: -moz-linear-gradient(top,
#b5fcb5,
#76fb6f);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #b5fcb5),
color-stop(1, #76fb6f));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#b5fcb5',
EndColorStr='#76fb6f')";
}
.ui-btn-down-e {
border: 1px solid #5cf742;
background: #a7fcaf;
background-image: -moz-linear-gradient(top,
#5afa4e,
#a7fcaf);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #5afa4e),
color-stop(1, #a7fcaf));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5afa4e',
EndColorStr='#a7fcaf')";
}