jQuery UI is themeable (that’s the word the jQuery maintainers use) and customizable. You have a few different approaches for modifying themes:
- Make a theme from scratch
- Use a premade theme without making any changes
- Alter a theme manually
- Use ThemeRoller to modify a premade theme
Making a theme from scratch is anything but practical given the sheer number of CSS classes you’d have to create. Using the default themes is a great option, but the out-of-the-box defaults probably don’t match the colors of your application, so your best bet is to modify an existing theme. If you feel inclined, you can modify the CSS classes manually, but using ThemeRoller is much less of a hassle.
You can find ThemeRoller at http://jqueryui.com/themeroller. This page shows a preview of each of the widgets and the icon set before you download it. On the left side of the page is a panel displaying options for “Roll your own” themes, a gallery of premade themes, and a Help tab. Choose a theme that closely resembles what you’d like as a final product, and modify the options to suit your needs. When you’re finished, click the Download Theme button. It’s that simple.
In any event, your jQuery UI will always require the following boilerplate code, provided here for your convenience:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet”
href=”development-bundle/themes/base/ui.theme.css”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
</head>
<body>
</body>
</html>
Code snippet is from ui.css.txt
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc