Changing Drupal 7’s built-in jQuery UI theme

jQuery UI, a Javascript widget framework built upon jQuery, comes built-in Drupal 7 core. One of jQuery UI’s nicer features is that you can switch themes by changing out a CSS file.

There are some nice jQuery UI themes out there (unfortunately, not enough!), like Tait Brown’s port of Aristo to jQuery UI (see demo).

But since jQuery UI is in Drupal core, which internally keeps track of CSS files, how do you switch the jQuery UI theme in use?

The Seven theme, including with Drupal core, provides inspiration on the “one true Drupal way” of doing this, by providing hook_css_alter(). Place into your theme’s template.php:

function MYTHEME_css_alter(&$css) {
  if (isset($css['misc/ui/jquery.ui.theme.css'])) {
    $css['misc/ui/jquery.ui.theme.css']['data'] = drupal_get_path('theme', 'MYTHEME') . '/jquery.ui.theme.css';
  }
}

Replace “MYTHEME” with the name of your theme, and adjust the path to your jQuery UI theme’s CSS file accordingly (the above assumes you place jquery.ui.theme.css in the root folder of your theme).

With this magic in hand, I now have the Aristo jQuery UI theme running on this blog. Looks quite a bit better!

This post was inspired by an answer I posted on StackExchange.