How to Apply Theming to jQuery UI Components

Applying themes to jQuery UI components allows you to maintain a consistent visual style across widgets like datepickers, dialogs, accordions, and buttons. This article outlines the primary methods for styling jQuery UI components, including linking pre-built themes from a CDN, creating custom themes with ThemeRoller, and overriding specific CSS framework classes directly.

1. Using Pre-Built Themes via CDN

The fastest way to style jQuery UI components is to link to an official pre-built theme hosted on a Content Delivery Network (CDN).

Include the theme's CSS file in the <head> of your HTML document before initializing any widgets:

<!-- Base jQuery and jQuery UI scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<!-- Pre-built Theme: Smoothness -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">

Other official themes can be swapped into the URL path, including ui-lightness, ui-darkness, redmond, sunny, blitzer, and cupertino.

2. Generating Custom Themes with ThemeRoller

If the pre-built themes do not fit your brand, use jQuery UI's ThemeRoller web application.

  1. Navigate to the ThemeRoller tool on the official jQuery UI website.
  2. Adjust design tokens in the left sidebar, such as corner radiuses, font families, base font sizes, background colors, and state interactions (hover, active, focus).
  3. Preview your changes on interactive widgets in real time.
  4. Click Download theme to generate an archive containing the compiled jquery-ui.css, a minified version, and an images/ folder containing icons and background textures.
  5. Extract the files into your project and reference the custom CSS:
<link rel="stylesheet" href="path/to/custom-theme/jquery-ui.min.css">

Ensure the images/ directory stays in the same relative path as the CSS file so all referenced assets load correctly.

3. Overriding Theme Classes with Custom CSS

jQuery UI uses a standard set of semantic CSS classes across all widgets. You can override these classes in your own stylesheet to tweak specific elements without re-generating an entire theme:

  • Containers: .ui-widget, .ui-widget-content, .ui-widget-header
  • Interaction states: .ui-state-default, .ui-state-hover, .ui-state-active, .ui-state-focus
  • Interaction cues: .ui-state-highlight, .ui-state-error, .ui-priority-primary
  • Icons: .ui-icon

To override a default component property, place your custom stylesheet after the jQuery UI theme link:

<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="custom-overrides.css">
/* custom-overrides.css */
/* Change the primary widget header color */
.ui-widget-header {
    background: #0055aa;
    color: #ffffff;
    border: 1px solid #004488;
}

/* Adjust button corners */
.ui-corner-all {
    border-radius: 8px;
}

4. Applying Scoped Themes

To use different themes on different sections of the same page, download your theme using the ThemeRoller Scope/CSS Scope setting.

  1. In ThemeRoller, provide a CSS selector (e.g., .admin-theme) in the "Advanced Settings" scope input.
  2. The downloaded CSS file will prepend your selector to all framework rules.
  3. Wrap your target components in a container matching that selector:
<div class="admin-theme">
    <!-- Components inside this container will render using the scoped theme -->
    <div id="datepicker"></div>
</div>